Building UI in Unity

In this article, we will look at making UI with Unity UI or uGUI. To show how to use it, we will make a Text element that will keep track of the Player’s score and an Image element that will keep track of the Player’s lives.

The first thing we need is a Canvas. The Canvas is what is overlayed on the camera, and all UI elements must be children of a Canvas to render. When creating a UI element, it will automatically generate a Canvas if there is not one already.

Create a Text element and name it “Score Text”. Then adjust the settings till you get the Score Text looking the way you want and where you want it on the Canvas.

Notice that when Unity created the Canvas, it also created an EventSystem; this is what the UI elements use to send messages like UI button clicks and when the cursor enters or exits a UI element.

Next, we need to create a script for managing the UI, name it “UIManager”, and attach it to the Canvas.

At the top of the UIManager script, add “using UnityEngine,UI”. That is called adding a namespace, and it allows us to use the classes in that namespace. In this case, it is the UI classes like Image and Text.

Next, create a private variable of Type Text, named “_scoreText”, with a null value. Then create a public method to change _scoreText named “UpdateScore” and have it take in an int. Inside the method, have the text property of _scoreText set to “Score: “with the int score appended at the end.

In the Player script, create a private int for the score with a value of 0. Then make a private UIManager with a null value; this will hold the reference to the UIManager on the Canvas.

Next, in Start, retrieve the reference to the UIManager using GameObject.Find looking for the Canvas and get the UIManager script component. Then null check it and call the UpdateScore method on the UIManager passing in the Player’s score variable.

When you enter Play Mode now, the game will set the score to the Player’s current score of 0.

Back in the Player script, create a public method named “AddScore”, this will be what increases the Player’s score and updates the UI. Inside the method, add 10 to _score and then call UpdateScore on _uIManager passing in _score.

Next in the Enemy script, create a private variable of Type Player named “_player” to hold a reference to the Player. Then in Start, retrieve the reference to the Player using GameObject.Find and get the Player script component.

In the OnTriggerEnter2D, remove the local player variable and replace it with _player. Then add a null check for _player in the Laser tag if statement, and if not null, call the AddScore method on _player.

Now killing enemies with the Laser will give the Player 10 points and update the UI.

In Unity, create an Image UI element, name it “Lives Image”, this will be what shows the Player’s current lives. Add the no_lives sprite to the Source Image slot, then click Set Native Size, which will resize the Image element to the sprite’s pixel size.

Adjust it from there till you get it looking how you want it.

In the UIManager script, create a private variable of Type Image named “_livesImage” with a null value; this will hold the reference to the UI element, then add a private array of Type Sprite named “_liveSprites” with a null value. Finally, create a public method named “UpdateLivesImage” and have it take in an int. Inside the method, have the sprite of _livesImage equal the array element of _liveSprites that is the same index number as the Player’s lives.

In the Player script, inside Start, after calling the UpdateScore method on the _uIManager, call the UpdatLivesImage on _uIManager and pass in _lives.

Then in the ChangeLives method, after adding the amount to _lives, call the UpdateLivesImage on _uIManager passing in _lives.

In Unity, we now need to hook up the UI element and live sprites to the Canvas. Drag the Lives Image into the Lives Image field, then increase the Live Sprite array size to 4 and drag the sprite to their corresponding fields, no lives to 0, one life to 1, two lives to 2, and three lives to 3.

Now you can enter Play Mode and see the Player’s lives represented in the game.

In the following article, we will look at making a Game Over behavior when the Player dies.