ufcfsu-30-13d technologies for the web creating and updating a graphical heads-up display (hud)

UFCFSU-30-13D Technologies for the Web

3D Technologies for the Web

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

0 1


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)

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

// variable scope is global

public int charge;

Texture2D charge1tex;





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

void Start(){

guiTexture.enabled = false;

charge = 0;

}

This script is attached to the GUI Texture GameObject


/* the Update method checks status of charge variable

which is increased via an external script

each time the player collides (collects) with a battery

*/

void 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


Updating the HUD via Scripts (PlayerCollisions.js)

void Start () {

}

void Update () {

}

public void OnTriggerEnter(Collider collisionInfo){

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

BatteryCollect.charge++;

Destroy(collisionInfo.gameObject);

}

}

This script is attached to the First Person Controller


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 public method.

• This script is typical attached to the First Person Controller

ufcfsu-30-13d technologies for the web creating and updating a graphical heads-up display (hud)

Documents