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

2. UFCEKU-20-3Web Games Programming Review Topics Scripting Physics and Collision Detection Prefabs Spawning Objects Camera Overlays Heads-Up Displays Publishing

3. UFCEKU-20-3Web Games Programming Scripting

4. 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

5. UFCEKU-20-3Web Games Programming Inter-Script Communication TransmitReceive Transmit.js Code to send message to Receive.js attached to cube object Receive.js Code to handle message sent by Transmit.js attached to sphere object Sphere Cube

6. 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;

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

8. UFCEKU-20-3Web Games Programming Physics and Collision Detection

9. UFCEKU-20-3Web Games Programming Example Colliders: Models Box on MeshCapsule on MeshMesh on Mesh

10. 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

11. 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:

12. 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

13. 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

14. 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:

15. UFCEKU-20-3Web Games Programming Prefabs

16. 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

17. 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.

18. 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.

19. UFCEKU-20-3Web Games Programming Spawning Objects

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

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

22. UFCEKU-20-3Web Games Programming Dummy Object Positioned in Scene at (0, 2, 5)

23. UFCEKU-20-3Web Games Programming Dummy Object Mesh Render Switched Off

24. UFCEKU-20-3Web Games Programming Camera Overlays

25. UFCEKU-20-3Web Games Programming Split - Viewport Camera Layouts

26. UFCEKU-20-3Web Games Programming Vertical Split-Screen x 0, y 0 Height (0.5) Width (1) Viewport

27. UFCEKU-20-3Web Games Programming Creating Camera Overlays

28. UFCEKU-20-3Web Games Programming Camera Depth Order cameraOne depth order = 0 cameraTwo depth order = 1 result

29. UFCEKU-20-3Web Games Programming Adjust Depth - in the Inspector Window

30. 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

31. UFCEKU-20-3Web Games Programming Heads-Up Displays (HUDS)

32. 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

33. UFCEKU-20-3Web Games Programming HUD Declaration and Initialization public variables associated with textures

34. 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

35. 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

36. 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

37. UFCEKU-20-3Web Games Programming Publishing for the Web

38. UFCEKU-20-3Web Games Programming Choose File – Build Settings… 1. Choose Web Player 2. Add Current Scene 3. Choose Build

39. 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.

40. 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!