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.

The final design layout for the player HUD.

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 HUD layout imported into Unity.

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.

--

--

--

A Designer, an Illustrator and a massive tech geek aspiring to become a professional Unity Developer.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

SQL 101 — Choose Your Join Wisely

Internet controlled LED using Arduino and ESP8266 | Part 1

“EasyAuth” in Functions App with Azure Active Directory

CS 371P Spring 2021 Final entry: Caroline Hatcher

Beaver Weekly Report #5

Discover the Best programming Languages that will make you an Expert Developer

3 yrs post bootcamp, here’s what I’ve learned…

Query Lambdas: Increasing Developer Velocity for Application Development

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Simon Truong

Simon Truong

A Designer, an Illustrator and a massive tech geek aspiring to become a professional Unity Developer.

More from Medium

My journey becoming a Unity game developer: Make a game look beautiful-Creating Columns pt.2

Installing the Universal Render Pipeline in Unity 2021.2

Creating the Main Menu

High Definition Rendering Pipeline in Unity