Building UI Elements in Unity

No game knows beforehand anything about the player's lives, score, ammo, or any other element of the game; it is all for you to set up - and setting up even more complex UIs in Unity is pretty straightforward. Let me show you the roots of how you can set up and track players’ score.

The first step in creating a user interface(or UI for short) in Unity is to create a ‘Canvas’ game asset. It is responsible for displaying and controlling ‘UI’ elements in our scene. Whenever you create any UI element, it will automatically create the ‘Canvas’ unless one already exists. Thus, the first thing we will add to our scene is a ‘Text’ element.

When a ‘Canvas’ game asset is created - an ‘EventSystem’ GameObject is also created simultaneously. The Event System is a way of sending events to objects in the application based on the input.

Let’s take a look at the Text UI element, which I have named ‘Score_text.’ One thing we can see is that while regular GameObjects have a ‘Transform’ component, UI objects have a 2D ‘RectTransform’ component. The ‘Transform’ represents a single point, ‘RectTransform’ represents a rectangle that a UI element can be placed inside.

I will now adjust the positioning and the text of the ‘Score_text’ element to show our score text in the upper right corner of the screen.

Now that we have set the position of our ‘Score_text’ element, we can observe one tiny bug. If we were to resize the ‘Game’ view, the ‘Score_text’ element stays the same size.

This can be easily fixed, however, and that is by setting the ‘Canvas Scaler’ component’s ‘UI Scale Mode’ to ‘Scale With Screen Size’ on our ‘Canvas’ asset.

Now, all we need to do is hook up this functionality to code! For that, we need to create a new script called ‘UIManager’ and put that on our ‘Canvas’ asset.

Since we will be working with UI, the first thing to add to our code is to add another namespace.

We need to create a serialized variable, which we will populate with the ‘Score_text’ UI element to get a reference to it. And set up the initial text of that score to show the text: “Score: 0”.

Finally, we need to create a new public method that will get called each time the players’ score changes. I will call it the ‘UpdateScore()’ method. And the resulting code should look something like this:

Next up, we need to update our ‘Enemy’ and ‘Player’ scripts as well. First, let’s take a look at the ‘Player’ script.

Here, we need to create two new variables - one will keep the score value for us, and the other will be stored and set in the ‘Start’ method as a reference to the ‘Canvas’ and its ‘UIManager.’

We need to create a new method, ‘AddScore(int points)’ - here, I am adding the ‘int points’ parameter because different enemies might be worth different score amounts.

This method also calls the ‘UpdateScore()’ method that we created in the ‘UIManager’ script.

Now, all we need to do is to call this method in the ‘Enemy’ script whenever the Enemy prefab gets destroyed.

And there you go, now anytime an enemy gets destroyed, your score will be changed on the UI.

But that is it for now, thank you for reading and feel free to follow me for more articles - and as always, good luck and see you next time!