Web Games Programming

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

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

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.

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

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)

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 0..1 1 1 0

GUI Texture in Default Position Texture centered at x = 0.5, y = 0.5

GUI Texture in Default Position Texture left positioned at x = 0.1, y = 0.37

HUD Declaration and Initialization public variables associated with textures

Updating the HUD via Scripts (BatteryCollect.js) This script is attached to the GUI Texture GameObject // static variable is accessible by other scripts i.e. its // variable scope is global static varcharge: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; }

Updating the HUD via Scripts /* 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 (PlayerCollisions.js) This script is attached to the First Person Controller function Start () { } function Update () { } function OnTriggerEnter(collisionInfo : Collider){ if(collisionInfo.gameObject.tag == "battery"){ BatteryCollect.charge++; Destroy(collisionInfo.gameObject); } }

Island HUD example

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

Web Games Programming