HUD
190We'll be sticking with Canvas for our purposes, as it suits our needs well and only requires
knowledge of UnrealScript. Canvas offers a plethora of functions for depicting elements to
the screen, including materials, shapes, images, and text. Combining these elements we can
make an attractive, cohesive, and useful interface.
Canvas is not without its limitations though. On the PC or a console material drawing, it works
fine; but it is not currently supported on mobile. Therefore, if you're considering UDK for
mobile games, you may want to take a deeper look into Scaleform.
Displaying a bar for the player's health
One of the most important bits of information to display on screen is that of the player's
health. Developers have also begun to think outside the box and come up with creative
ways to illustrate a player's health other than just through text or a standard HUD. Capcom's
Resident Evil franchise often has characters appear visibly different, such as characters
walking with a limp and moving at a slower pace when injured. Dead Space uses the player's
space suit to illustrate the current health by drawing a health bar on the back, although this is
done with Scaleform.
Regardless, the generic HUD doesn't seem to be leaving at any time soon, so let's start by
illustrating our most important information, a health bar.
Getting ready
Start the same as we always do, that is, with our IDE open and a new class created. This time
we're going to create a new class called TutorialHUD and have it extend from MobileHUD.
class TutorialHUD extends MobileHUD;How to do it...
Our goal is to use what UDK has provided for us and create a simple HUD of our own. In this
recipe, we'll be adding a health bar which changes color depending on the amount of health
our pawn currently has. When full, the bar will be tinted green; but when the pawn's health is
critically low, it will become red.
- With our class created, we can focus on adding the variables now.
/* Holds the scaled width and height of the viewport, which
adjusts with the res /
var float ResScaleX, ResScaleY;