Scoring Points With Unity’s UI Tools

So far we’ve been using many of Unity’s built in features to help build a 2D game. For example, we use the Inspector window to assign variables, and Collider components to detect when objects hit each other while the game is running. Another feature we can make use of is the Unity User Interface (UI).

Today we’ll look at how to implement a score system to a 2D space shooter game. First we’ll need some Text to display the score on screen. It’s a new type of game object we can add to the scene by using the GameObject tab at the top, or right-clicking in the Hierarchy.

This creates some UI elements in the scene. We can see them if we zoom out using the scroll wheel. It also creates a few objects for us in the Hierarchy window. A Canvas contains all the UI elements and has settings that allow us to control how those UI elements match to the game screen. The EventSystem allows us to activate UI elements by hovering over them and clicking on them. Finally, Text is what we actually want to add to display the score on this Canvas. Here we can rename it to Score_text.

In order to change the color of the text to white, we can select the Text game object and use its color bar in the inspector.

Before we get started implementing a scoring system for the game, there’s a problem we should address. Not all screens are the same size, and often we will want this game to be playable on smaller or larger screens. All the game objects like the player and enemies are automatically made smaller as the screen shrinks. However, the UI currently does not. This causes the Text we made to go off screen when we change the size of the game screen.

To fix this, we need to do two things. We need to properly attach that text box to the top right of the screen, and make sure the canvas itself properly scales larger or smaller. We should select the Text object, and in the text box’s Inspector, we can set a new anchor to the top right by clicking this square.

Now we can select the Canvas object and change its UI Scale Mode to “Scale With Screen Size”. This will cause all objects in the canvas to shrink or grow depending on how large the screen is.

Now when we try changing the size of the screen by dragging, the text in the top right becomes smaller, and stays anchored to the top right of the screen.

Now it’s time to use this new text field to display the score we accumulate by destroying enemies. It’s easy enough to change the text to whatever we wish by using its Inspector.

What we really want is the ability to change that text while the game is running.

Lets give the canvas a UIManager script. We want to use this new script to keep track of important UI information, like the accumulated score.

In the UIManager script, we can add a variable to store the text field, and one more to store the total score. It’s important to add “using UnityEngine.UI;” since that’s the only way the script will recognize UI elements like the Text variable type.

Now we can drag the Score_text object into that new field in the inspector. Even though we are dragging a game object, Unity recognizes that Score_text has a Text component and will accept that into the new inspector field of the script.

Now, the rest of UIManager. When the game starts, it should set the score to zero and update the text to display that. Other classes can use the public AddScore method to add to the number of points. UpdateText gets the text field of the assigned UI text component, and sets it to display “Score: ” followed by the actual score value.

Now, what should actually tell the score to increase? When enemies are destroyed by lasers, of course! That is handled by the Enemy script, so we’ll make some adjustments there. We need to add a _scoreValue variable that controls how many points the enemy is worth, and we need to setup a way for enemies to communicate with the UIManager.

We can’t make a variable to store the the UIManager object like usual, because the enemies are prefabs and cannot store information about non-prefab objects like the UI. Instead, we use the GameObject.Find method to get access to the UIManager object in the scene.

Finally, we modify the OnTriggerEnter2D method to call “AddScore” then this enemy is destroyed by a laser. The UI system we’ve set up will take care of the rest.

All done! Time to rack up a new high score!