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

UFCEKU-20-3Web Games Programming

Scripting

UFCEKU-20-3Web Games Programming

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

UFCEKU-20-3Web Games Programming

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

UFCEKU-20-3Web Games Programming

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;

UFCEKU-20-3Web Games Programming

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");

UFCEKU-20-3Web Games Programming

Physics and Collision Detection

UFCEKU-20-3Web Games Programming

Example Colliders: Models

Box on Mesh Capsule on Mesh Mesh on Mesh

UFCEKU-20-3Web Games Programming

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

UFCEKU-20-3Web Games Programming

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:

UFCEKU-20-3Web Games Programming

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

UFCEKU-20-3Web Games Programming

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

UFCEKU-20-3Web Games Programming

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:

UFCEKU-20-3Web Games Programming

Prefabs

UFCEKU-20-3Web Games Programming

Camera

Mesh

Audio Listener

The First Person Controller is a prefabricated object

FPS.js

Code to handle FPS Walker etc.

Mesh collider

Scripts

UFCEKU-20-3Web Games Programming

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.

UFCEKU-20-3Web Games Programming

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.

UFCEKU-20-3Web Games Programming

Spawning Objects

UFCEKU-20-3Web Games Programming

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);

UFCEKU-20-3Web Games Programming

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));

UFCEKU-20-3Web Games Programming

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

UFCEKU-20-3Web Games Programming

Dummy Object Mesh Render Switched Off

UFCEKU-20-3Web Games Programming

Camera Overlays

UFCEKU-20-3Web Games Programming

Split - Viewport Camera Layouts

UFCEKU-20-3Web Games Programming

Vertical Split-Screen

x 0, y 0

Height

(0.5)

Width (1)

Viewport

UFCEKU-20-3Web Games Programming

Creating Camera Overlays

UFCEKU-20-3Web Games Programming

Camera Depth Order

cameraOne depth order = 0

cameraTwo depth order = 1

result

UFCEKU-20-3Web Games Programming

Adjust Depth - in the Inspector Window

UFCEKU-20-3Web Games Programming

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

UFCEKU-20-3Web Games Programming

Heads-Up Displays (HUDS)

UFCEKU-20-3Web Games Programming

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

UFCEKU-20-3Web Games Programming

HUD Declaration and Initialization

public variables associated with textures

UFCEKU-20-3Web Games Programming

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;

var charge2tex:Texture2D;

var charge3tex:Texture2D;

var charge4tex:Texture2D;

var charge0tex: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

UFCEKU-20-3Web Games Programming

/* the Update function checks status of charge variable

which is increased via an external script

each time the player collides (collects) with a battery

*/

function Update () {

/*

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

UFCEKU-20-3Web Games Programming

Updating the HUD via Scripts (PlayerCollisions.js)

function Start () {

}

function Update () {

}

function OnTriggerEnter(collisionInfo : Collider){

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

BatteryCollect.charge++;

Destroy(collisionInfo.gameObject);

}

}

This script is attached to the First Person Controller

UFCEKU-20-3Web Games Programming

Publishing for the Web

UFCEKU-20-3Web Games Programming

Choose File – Build Settings…

1. Choose Web Player

2. Add Current Scene

3. Choose Build

UFCEKU-20-3Web Games Programming

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.

UFCEKU-20-3Web Games Programming

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!