Create a Player Health Status Indicator for the Unity GUI
Posted on Oct 13, 2012 (last modified Jun 1, 2021)
This is the first of a multi-part series that will teach you how to build a player health status indicator for the Unity GUI.
Introduction
In this series, we’ll build a cartoon-styled health status indicator and you will learn how to create one with a style that suits your game. What we want to do in this part of the series is to simply give you a starting point that will get you results fast. We’ll focus on finer details in follow-on posts.
If you download the Health Status Indicator assets, you can have the health status indicator that’s shown above in your game’s GUI very quickly. Though it will not yet be fully functional, it will give you a good base from which to start. So, let’s get on with it…
Draw the health status bar on 3 layers
Start by drawing your health status bar using any graphics tool that supports layers. We used Adobe Illustrator to get the cartoon style that we wanted. We then used Adobe Photoshop to crop and save each layer as a transparent GIF and PNG-24 files.
The layers are going to be stacked and properly aligned in the Unity GUI. As the player loses health, the background and top frame layers remain static, but the middle layer will be reduced in size horizontally.
When preparing the image assets from the layers, crop the background layer and the frame layer exactly the same size so they will align easily when placed in the GUI.
The green layer, which represents health, must be cropped exactly around the dimensions of the green bar with no transparent space around it. This is because it will be resized horizontally to represent the player’s health being reduced or increased. If the image had transparency around it, you can get unexpected results in the GUI that are not easily fixed by the math in your code.
Be sure to save the images with their transparency so that you’ll be able to see through the transparent parts to the game world behind the health status bar.
We saved the foreground and background images as GIF files because that file format is good for images that don’t have a lot of photographic detail or gradients. With a GIF, we were able to get the file size as small as possible. For the frame, we used a transparent PNG-24, which was necessary for the semi-transparent effect that mimiks the reflection of light on glass.
You can import your image assets by right-clicking in the Unity Project panel and choosing Import New Asset… from the context menu (shown below). In our case, we created a folder to help keep our assets organized.
Create a simple script to start with
Now, we’re going to need a Unity script to represent and control our health status widget. You can create a new script by right-clicking in the Project panel and choosing Create > Javascript. Name the script ‘HealthStatusBarScript’.
Below you will find a simple starter script that will allow us to get something showing in the GUI quickly. We’ll explain this code line-by-line in the next article of this series and then later, we’ll improve it.
#pragma strict
// JavaScript
var backgroundTexture : Texture;
var foregroundTexture : Texture;
var frameTexture : Texture;
var healthWidth: int = 199;
var healthHeight: int = 30;
var healthMarginLeft: int = 41;
var healthMarginTop: int = 38;
var frameWidth : int = 266;
var frameHeight: int = 65;
var frameMarginLeft : int = 10;
var frameMarginTop: int = 10;
function OnGUI () {
GUI.DrawTexture( Rect(frameMarginLeft,frameMarginTop, frameMarginLeft + frameWidth, frameMarginTop + frameHeight), backgroundTexture, ScaleMode.ScaleToFit, true, 0 );
GUI.DrawTexture( Rect(healthMarginLeft,healthMarginTop,healthWidth + healthMarginLeft, healthHeight), foregroundTexture, ScaleMode.ScaleAndCrop, true, 0 );
GUI.DrawTexture( Rect(frameMarginLeft,frameMarginTop, frameMarginLeft + frameWidth,frameMarginTop + frameHeight), frameTexture, ScaleMode.ScaleToFit, true, 0 );
}Create an empty GameObject, attach the Javascript and associate the textures
In order for the script to do anything, it needs to be attached to a GameObject, so create a new GameObject by selecting from the menu: GameObject > Create Empty. Once the GameObject is made you can right-click on it and rename it to something meaningful like ‘HealthStatusBarGUI’. Drag the script onto the GameObject. You should then see the script’s global variables in the Inspector panel where you must add each of the textures to the appropriate slot.
Tip: You can add the textures to each slot by simply dragging and dropping each image asset from the Project panel onto the appropriate texture slot in the Inspector.
Run the game and admire your progress
At this point, you can run the game and see your new health status bar on the screen!
To get a feel for how the indicator will work during game play, drag the Health Width item left and right in the Inspector panel while the game is playing.
Conclusion
In this article, we provided the assets and a few tips for getting you started on building a player health status indicator for your game. What we wanted to do was give you a starting point that would get you results fast. We discussed how you can prepare the graphics for your GUI in layers which will allow the green health bar to shrink and expand beneath the indicator’s glass and frame. We also provided a starting script and a way to manually drag a control to preview how the widget’s going to move during game play.
In Part 2, we’ll examine the Javascript line by line so that you can learn how the script works and hopefully also improve your programming skills.
Until next time, enjoy the craft!