Step 11 — UI Elements

Nicholas Lim
3 min readApr 26, 2021

For all the tinkering I’d ever done with Unity I have never touched the UI elements beyond showing some text on screen. Now I get to learn how to show a live score and have sprites representative of lives left.

To start with, right click in the Hierarchy → UI and you’ll see a list of options available.

The score is a Text object, and when added, it will appear underneath a Canvas object, where all the UI elements you add will show up.

In the Inspector tab for the Text object there are two things to note. One is the Anchor point, where you can pin this Text object to an area of the canvas, in this case the top right corner, and the actual Text that will be displayed, “Score: ”.

To make this Score update as I destroy enemies, the Canvas object needs a script called UIManager containing the following:

UIManager script

We set the Text variable inside the Inspector to refer to the score text object. At the start of the game it will show a score of zero. A public method UpdateScore is available to call that will increase the score and update what the text object shows, and the Player object will call this method.

Player script

The Player should have a variable to keep track of its own score, set the UI Manager variable as the game starts, and then call the UpdateScore in its own public method of AddScore, which means something else has to call AddScore, and that will be the Enemy.

Enemy scipt

So when the Enemy gets hit by a laser, it calls the Player’s AddScore method and passes an int value of 10. The Player updates its score and passes that to the UI Manager, who will update the score text on screen.

--

--