UFCEK-20-3Web Games Programming Unity 3D: Review of Topics Publishing for the Web

UFCEK-20-3Web Games Programming

Web Games Programming

Unity 3D: Review of Topics

Publishing for the Web

UFCEKU-20-3Web Games Programming

Review Topics

Scripting Physics and Collision DetectionPrefabsSpawning ObjectsCamera OverlaysHeads-Up DisplaysPublishing


Scripting


Changing an Object’s Properties via Scripts

Cube Object

// fragment

function Update () {

if(Input.GetKeyDown(KeyCode.R)){

gameObject.renderer.material.color = Color.red;

}

ColourSwitcher.js


Inter-Script Communication

Transmit Receive

Transmit.js

Code to send message to Receive.js attached tocube object

Receive.js

Code to handle message sent by Transmit.js attached to sphere object

Sphere Cube


Static Variables

Declaring variables as static make them available to be referenced by other scripts in the 3D environment.

In programming parlance static variables have global scope

// static variable declaration in Receive.js

static var messageReceived:boolean;


Debug Utility Function

Very useful debug and environment events utility function

Debug.Log (“Message you to want to send to the Console Window”);

Debug.Log("I have received " + numberOfMessages + ” messages from the transmit script");


Physics and Collision Detection


Example Colliders: Models

Box on Mesh Capsule on Mesh Mesh on Mesh


Using Colliders as ‘Colliders’

• The default setting for any collider attached to an object is to restrict the object being passed through be other world objects. The collision event must be handled by a script attached to one or both of the objects involved in the collision

ObjectCollisons.js

Code to handle collisions


Handling Events Initiated by Collisions

This function is attached to the First Person Controller (Capsule Collider)

function OnControllerColliderHit(hit:ControllerColliderHit){

if (hit.collider == GameObject.Find("RedSphere").collider){

Debug.Log("I've hit the Red Sphere");

};

if (hit.collider == GameObject.Find("BlueSphere").collider){

Debug.Log("I've hit the Blue Sphere");

};

};

• Unity has a built in function for detecting collisions:


Using Colliders as ‘Triggers’

• Object collisions may be used to generate events ‘triggers’ which can be used to update logic in the World, generate actions, instantiate (create) new objects or remove unwanted objects from the world. Using triggers is one way for the player to collect items that update values via attached scripts.

ObjectTriggers.js

Code to handle collisions as event triggers.

Objects defined as triggers can be ‘passed through’ by other objects


Tag Names and the Tag Manager

• To reference objects in the collision function each object must have a name (Tag) defined via the Tag Manager

• The tag name used in any script reference must exactly match the tag name defined in the Tag Manager

• So RedSphere is not the same as redSphere


Handling Events Initiated by Triggers

This function is attached to the First Person Controller (Capsule Collider)

function OnTriggerEnter(collisionInfo:Collider){

if(collisionInfo.gameObject.tag == "RedSphere"){

Debug.Log("I've gone through the Red Sphere!");

}

if(collisionInfo.gameObject.tag == "BlueSphere"){

Debug.Log("I've deleted the Blue Sphere!");

Destroy(collisionInfo.gameObject);

}

}

• Unity has a built in function for detecting collisions as triggers:


Prefabs


Camera

Mesh

Audio Listener

The First Person Controller is a prefabricated object

FPS.js

Code to handle FPS Walker etc.

Mesh collider

Scripts


Creating Prefabs

• In order to create a Prefab, simply drag a object that you've created in the scene into the Project View.

• The object's name will turn blue to show that it is a Prefab, then rename your new Prefab

• The object and all its ‘children’ have been copied into the Prefab data

• The Prefab can now be re-used in multiple instances

• The original object in the Hierarchy has now become an ‘instance’ of the new Prefab.


Creating a Simple Prefab (Receive)

Receive

Receive.js

Code to handle message sent by Transmit.js attached to sphere object

Prefab created from the Receive cube by attaching a script.


Spawning Objects


Instantiate Command

• The Instantiate command has three parameters (arguments)

• Object to create, position to create it, rotation to give it:

Instantiate(object,object’s position,object’s rotation);


Instantiate Command

• Position and Rotation of objects to be instantiated must be specified as Vector3 values (X,Y,Z) used as follows:

var aPrefab: GameObject;// variable of type GameObject

Instantiate(aPrefab, Vector3(0,12,30), Vector3(0,0,90));


Dummy Object Positioned in Scene at (0, 2, 5)


Dummy Object Mesh Render Switched Off


Camera Overlays


Split - Viewport Camera Layouts


Vertical Split-Screen

x 0, y 0

Height

(0.5)

Width (1)

Viewport


Creating Camera Overlays


Camera Depth Order

cameraOne depth order = 0

cameraTwo depth order = 1

result


Adjust Depth - in the Inspector Window


Overlay and Scaling

Scaled camera window overlay on main camera could be used as a follow overhead camera to aid character navigation in the world


Heads-Up Displays (HUDS)


Steps Required to Establish a HUD

• Acquire or create art work in an appropriate format

• Import the HUD artwork via Asset- Import New Asset

• Create a GUI Texture Game Object and associate the artwork with the texture object

• Position the HUD components in the interface

• Create scripts which initialize and update the HUD based on world states and events

• Attach scripts to objects that change world state and trigger events which update values in the appropriate HUD script


HUD Declaration and Initialization

public variables associated with textures


Updating the HUD via Scripts (BatteryCollect.js)

// static variable is accessible by other scripts i.e. its

// variable scope is global

static var charge:int = 0;

var charge1tex:Texture2D;





// initialise GUI texture to false (don't display it)

function Start(){

guiTexture.enabled = false;

charge = 0;

}

This script is attached to the GUI Texture GameObject


/* the Update function checks status of charge variable

which is increased via an external script

each time the player collides (collects) with a battery

*/


/*

first battery collected

assign the first texture image to guiTexture

and enable (display) texture

*/

if(charge == 1){

guiTexture.texture = charge1tex;

guiTexture.enabled = true;

}

// display subsequent textures to indicate power collected

else if(charge == 2){

guiTexture.texture = charge2tex;

} // etc.

Updating the HUD via Scripts


Updating the HUD via Scripts (PlayerCollisions.js)

function Start () {

}


}

function OnTriggerEnter(collisionInfo : Collider){

if(collisionInfo.gameObject.tag == "battery"){

BatteryCollect.charge++;

Destroy(collisionInfo.gameObject);

}

}

This script is attached to the First Person Controller


Publishing for the Web


Choose File – Build Settings…

1. Choose Web Player

2. Add Current Scene

3. Choose Build


Check Colour and Layout of HTML Page

Unity will create a default html page for your web player and save them both to a common folder with the name you chose after selecting build.

You will need to edit the file to remove unwanted text, provide an appropriate html page title, adjust layout, and change page background colour.


Publish to your UWE Student Module Homepage and make sure to test everything is working.

Ask a fellow student to access your page from their account to ensure file permissions are correctly set.

Publish and Test!

Documents

UFCEK-20-3Web Games Programming Unity 3D: Review of Topics Publishing for the Web