Ease of Building UI Elements in Unity- Game Dev Series 20

5 min readMay 15, 2021

Objective: Creating an UI to display scores and lives count.

Previous: Switch Statement to the Rescue

We have almost finished a fully functional game, it is time to create some UI.

Score System:

First, let’s create a score system to get 10 points every time we eliminate an enemy. Right click on Hierarchy and select UI> Text. This will automatically create a Canvas & EventSystem which are the default UI objects.

We can adjust the color, size, position of the text object in the inspector.

Use Anchor Presets to set the origin position of object. In this case, we will set the score at the top right of our game scene.

By default, if you scale the whole game scene, you will notice the scale of UI object stays same, which is not we want. Click Canvas and select the UI Scale Mode inside the Canvas Scaler, change it to Scale With Screen Size.

It should be scale with game screen now.

Now let’s create a script to handle the score calculation.

Create a script called UIManager and attach it to Canvas.
First we need to get this access to the database of UI system.

Add using UnityEngine.UI at the top of script.

Then we can create a variable to the text. Make this variable SerializeField so we can drag in our text component easily.

Then create a method to update the score. The score will add the value that this method pass in from other script, which will be added later.

This method contains a parameter as integer which will shows on the score screen.

Then we need to figure out where should this value pass out. We deal the damage in enemy which is the best place to add the points. However, it might not be a good way to send the points directly to UIManager. We might add other enemies in the future but the player will always stay as one. We should use Player as a points-collector, then pass the value to UIManager.

Let’s create 2 variables to store the score and the UIMagager, and also a method to deal with the points that pass in from enemies and send it to UIManager.

Don’t forget to locate the UIManager in the void Start().

Then we can open Enemy script and add the points when an enemy got eliminate. First we need to add a variable of Player and locate it in void Start().

With this variable, we can add the calculation in OnTriggerEnter2D. And also make a null check to prevent error.

This will add 10 points to AddScore() inside Player script. Then we can Play our game to check the result.

Lives Count:

Right click on Canvas in Hierarchy and add UI> image. Change the name and drag in the sprite of lives count 3 from Project. Check the Preserve Aspect to set as default size of the image. Then we can drag this image gameobject to the location we want.

We need to change the image of lives count base on the lives that player left. To do this, we will need to pass in all the sprites of lives into UIManager.

Set a variable of Sprite as array, and store all the sprites in the inspector.

Set array size to 4, and drag in all the sprites base on its number.

Then we also need to create a variable of Image game object, and drag in from hierarchy.

Create another method to set the sprite of Image game object. Same as score calculation, we also need to pass in the lives number from Player script, and replace the sprite by the same number in sprite array.