Build a HUD

Setup the project

Open up your Bouncy Box project in Unity.

If you do not already have the Bouncy Box Project, follow the steps below:

1. Download the Bouncy Box project zip file if you do not already have it.

2. Move the zip file to your desktop. Then unzip the zip file there to get access to the project folder.



3. Now open Unity Hub, and on the Projects page click ADD. Then in the file explorer, locate the BouncyBox project folder and select the folder.



You may need to choose a Unity Version for the project to match one of the versions that you have installed.

Now open the project.

Creating the HUD

A HUD (Heads-Up Display) is a form of UI that displays information to the player during gameplay.

What is displayed on the HUD depends on the game you are making, but common things include health, time, weapons/ammunition, mini-maps and more.

You will create a health bar to display player health in the HUD.

Open Scene01 and create a new Image object on the Canvas.



When working with UI we always want to use the Rect Tool which will allow us to move and shape the UI Objects.

You can select the Rect Tool from the Tool Bar at the top or by pressing the shortcut T. You'll know the Rect Tool is active when you can see the blue corners on a selected UI object.





Rename the Image Object to HealthBar, and resize it so that it is thin and long like a health bar.

Then move the HealthBar so that it is in the top left of the screen.



The white bar is what the health bar will look like when it is empty. Now we need to create another bar for when the health is full.

Create a new Image object as a child of the HealthBar and name it Health.



Now we want to anchor the Health Image to the HealthBar so that it always stays the same size as the bar no matter what size the players screen is.

You can do this by selecting the Health Image object, and under the Rect Transform component in the Inspector Window you will see an icon that looks like a target.

Click this icon and you will see the Anchor Presets that will allow you to place and fix UI elements to certain positions on their parent object.



Go to the anchor preset for stretch - stretch meaning that the object will stretch to fill the parent object both vertically and horizontally.

Then, while holding the ALT key, click on that preset. This will anchor the Health object to the HealthBar object and set its size at the same time.



Now the Health Image object is directly over the HealthBar Image and is the same size.

Change the Health Image color so that it is red as this will be the fill color of the health bar.



The way we the health bar will work is by scaling this red Health image down so that it gets smaller as the health decreases. We can easily do this using the Slider component.

On the HealthBar object, in the Inspector click Add Component and search for Slider. Then select this component to add it to the Object.



Now on the Slider component uncheck Interactable, set Transition to None and set Navigation to None.

This ensures that the slider is just a static object so we cannot interact with it within the game.

Now drag the Health Image object into the Fill Rect field of the Slider component.



The slider will now control the width of the Health Image object. So if you drag the slider between 0 and 1 you will see that the width of the Image changes, where 0 is no width and 1 is full width.

Adding the Script

Now we need to add the script that will control the slider so that the health bar updates when the player takes damage.

Download the HealthBar.cs script then drag the file into the Scripts folder of the project.



Now drag the HealthBar script onto the HealthBar Game Object.

On the HealthBar object, you will now see a new Script component in the Inspector, named Health Bar.



Here there is a field named Player where you must drag in the Box Game Object.



Now if you play the game and take damage, you will see that the health bar goes down.