UFCEKU-20-3Web Games Programming Creating and Updating a Graphical Heads-Up Display (HUD)

UFCEKU-20-3Web Games Programming Agenda The Typical Role of a Heads-Up Display (HUD) Steps required in implementing a HUD Creating the HUD Artwork Components Positioning HUD Components using GUI Coordinate System Declaration and Initialization of Components via Scripts Updating the HUD Based on 3D World States and Events

UFCEKU-20-3Web Games Programming Role of a Head-Up Display Inform user of character’s state, e.g. health, power, number of lives Information on capabilities –provide real-time update of collectable items that aid progression in the scenario Timers – typically time down to zero or total time value General information about other elements states in the world Camera ‘birdseye’ viewpoints to aid navigation in a complex world Menu items to access change options and settings.

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 Creating the HUD Components Create custom artwork to suit the given scenario ( images text and numeric type if required etc.) Use.psd for content creation to retain high quality originals Export to Portable Network Graphic format with 32 bit depth to retain alpha transparency (.png 32)

UFCEKU-20-3Web Games Programming Positioning HUD Components HUD components use the same coordinate positioning as Camera Overlays. The x position in between 0..1 and the y position is between

UFCEKU-20-3Web Games Programming GUI Texture in Default Position Texture centered at x = 0.5, y = 0.5

UFCEKU-20-3Web Games Programming GUI Texture in Default Position Texture left positioned at x = 0.1, y = 0.37

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 Island HUD example

UFCEKU-20-3Web Games Programming Summary Heads Up Displays are an important aspect of the user experience and enhance usability. HUDs in Unity 3D are easy to setup but often require artwork HUD content to be created which is often the most time consuming stage. The artwork is imported as a new asset(s) and associated with a GUI Texture GameObject via public variables. The script which directly changes the HUDs elements will be attached to the GUI Texture GameObject. The script which triggers events communicates with the GUI texture script via a static variable. This script is typical attached to the First Person Controller