Getting our Game HUD Built

Jordan Evans
Nerd For Tech
Published in
3 min readOct 16, 2021

--

Now that we have our shop set built in, let’s get it so that we have a HUD to let us know how many diamonds we have on hand, along with seeing our current health pool. To start, let’s work on getting our HUD in place. We will create a new panel to work with and start placing all of the pieces we will need for the game:

We can see how in the bottom left we have a joystick like icon for when we transition it to mobile controls, along with an A and B key for jumping and attacking. The functionality for those we will go over another time. For now, we are going to focus on our health and diamonds at the top.
In this case, we are going to have it so that our health bar works in segments, and upon taking damage, we will lose 1 segment at a time. In order to create the logic for this, we will want to create a for loop so that it knows which of the icons to turn off:

What will happen here is when our player takes damage, it will relay the information to here, and the UIManager will disable the proper health segment:

Within our player script, we are going to have a similar process to that of the monsters, except instead of running the death anim here, we link it towards our playeranimations script. From here, we can see if it properly shows the player being damaged:

As we can see, each time the skeleton swings at us, a chunk of our health goes away and once we hit 0, our player dies.
Next, let’s build in our tracker for the collection of gems:

Here, we have just created a basic link between the player script and the UIManager script to let it know how many gems the player has, and to update it accordingly:

Now that our player has a working health bar and gem collection, we are going to look at preparing and moving over to mobile controls.

--

--