Creating a HUD
Creating a Heads Up Display to display the player Health
The second UI part to our game is going to be the HUD. The Heads Up Display is going to be responsible for handling the player health and total amount of collected gems. The HUD is also responsible for the mobile touch input which includes the direction joystick and virtual buttons.
Creating the HUD:
The first HUD UI element that I will focus on is the display of the player health and total gem count. Just like I created the Shop UI, I will also be creating the player HUD using Adobe Illustrator.
For this player HUD, I wanted to add in extra features such as showing the Key Icon and Wing Boots icon to create a user feedback and letting the players know that they have acquired the items. The reason behind this design choice was because these items are “technically” invisible to the player, unlike the flame sword which would show via a special effects later on.
Like usual, after the design is completed, I imported the file into Unity and sliced the individual elements into their own objects, then I rearranged them again according to the layout in Illustrator.
I created a new UI panel called “HUD” to separate the shop UI and the main player UI since the shop UI is off by default and the player HUD needs to be on throughout the game.
The final setup for the Player Health and gem UI, is to link all four life units under one empty game object, then create a new text object that will display the total collected Gems.
Then I manually turn off the two icons (key and boots) so they won’t show when the game starts, and will only be trigger when the player buys them.
Scripting:
First we are going to make the Gem text update when the player collects the diamonds on the scene. Similar to how we get the shop UI to show the current gem count, we can follow the same procedure to do the player HUD gem count.
Starting with the UI Manager script we are going to create a new text handler for the HUD gem count.
Then we are going to create a new public method that updates the text handler with the integer variable. Now we just need the player script to trigger this public method whenever it makes contact with a diamond.
In the player script in the method which we add gems, we are also going to sneak in the UI manager method that updates the text.
Back in Unity, make sure you drag the text object into the Merchant NPC script slot. When you hit play, you will noticed that the gem text will now update accordingly.
In the next article, we will focus on how to toggle off the two icons along with having the Player UI turn off, while the Shop UI is active.
