Ease of Building UI Elements in Unity

Siddhant Thakur
Apr 16 · 6 min read
Photo by Harpal Singh on Unsplash

With the way the games industry is heading, we’re seeing a rise in players that wish to play a game with all their HUDs (Heads up display) aka UI ( referring to basic User Interface) turned off or have practically minimal UI elements on the screen. The reason being immersion. Games have also been migrating towards minimal UI because that’s what the Players(we) want, games like Last of Us, Ghost of Tsushima, where environmental cues are being used to guide the player, show player status, etc. But for competitive games (Arcade games, Battle Royals), UI elements (for example, Time, Score, Kills) are required to immerse the player.

Currently, our arcade game has no means to let the player know how much health/ how many hits he can take before witnessing the beautiful game over screen nor do we have a score factor to make the player keep track of his progress. Luckily, Unity makes creating these Elements quite easy.

Score UI:

Let’s start by implementing a score factor that increases with the number of enemies destroyed.

For starters, lets create a UI Text field which will be the place holder for the Player Score.

We now need a position to place our Score on the Player Screen.

The Score font gets a color, and we set the canvas to scale with the screen size.
Score is placed and has its anchors set too.

So a few things have been done here, lets look at those briefly,

The Canvas game object contains a Canvas Scaler component which contains a UI Scale Mode, make sure you have this set to scale with screen size as you don’t want the screen size to affect the look and feel of your UI.

Here, in the Score game object, we need to make sure that the Anchor position is set. This is done to ensure that the UI element(Score, in this case) remains attached to that position even when the screen is being scaled. Think of it as an anchor to a ship.

Health UI:

Similarly, we will now be adding a heath bar which will help the player keep track of how many lives he has left. But instead of it being a Text field that updates based on the lives we have left, we will be using sprites to keep track of the number of lives the Player has.

The process is the same but with a slight change instead of creating a Text object we will be creating an Image object(as we want Sprites to show number of lives left).

Here’s another catch if we leave things as it is the sprite passed in wont be in its native size instead it would be scaled to fit into the white Image object as shown above.

Before
After

This was achieved by doing the following,

Stretch got cleared.
Scaled the Image to desired size.

With this done, we can now move onto managing this behavior of adding on to score and decreasing lives by using a script.

Score Behavior :

Since this is a UI behavior we can create a UIManager which deals with anything UI related have it attached to the Canvas game object.

Now lets create a method to update the player score,

UIManager Script

This method takes an integer value as an input parameter and appends it to the Player Score. So depending on the Enemy type we can vary the points given to the Player.

Now, lets move onto the Player script

Player Script

All thats left is to decide the score given to the player based on the enemy type for now we only have one enemy, but it’s always better to code while thinking of scalability.

So, heres how the score gets updated in the enemy behavior.

For more info on the above trigger collision method click here and to know about how the scripts communicate with each other click here.

With this we should have our Score updating based on the the type of enemy destroyed(in this case we only have a single enemy type for now, so scores will be incremented by 10 for every enemy destroyed).

Note : Make sure to add the Score game object to your UIManager in the Editor.

With this we have got the score function working, now let's get the Lives to reflect how many lives we have left.

Lives Behavior :

The concept here is that we will be replacing the Lives game object’s sprite with new sprites to show how many lives we’ve left. To do this we will be using an array which will store 4 sprites, one for each state(3 lives, 2 lives, 1 lives, no lives).

We know that arrays are 0 indexed meaning the indices start from 0 and go till the length(Array)-1. So if we have 3 lives left we will check the array at the 4th position(Array[3]). Similarly,

Two lives → Array[2] implying the 3rd position of the array.
One Life → Array[1] implying the 2nd position of the array.
No Lives → Array[0] implying the 1st position of the array.

Now all that’s left is to pass the number of lives the Player has, this can be done through the Player script.

Note : if you’re using the method the same way I am then we don’t need our Array to have a size of 4 since we can make do with 3. That being 2 lives, 1 lives, no lives, as by default the game already shows us with 3 lives left.

This gives us the following result,

Thank you for reading. More to come!!!

CodeX

Everything connected with Tech & Code

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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