Creating Score system with UI in Unity!

5 min readMay 11, 2021

Today, let’s talk about the basics of UI system in Unity. UI is very intuitive and easy to use in Unity once you understand the basics of how it works. It is also extremely important to have the UI set up correctly in any application as we, developers, often deploy to different platforms such as mobile, PC, etc. I will go over how to make a score system.

What do we need to do first?

First thing we need to do is to create a canvas that will hold our UI systems.

Right click on Hierarchy → go to UI → Canvas

Once you’ve created Canvas, you will notice a giant rectangular box shown up on scene view. This will be where our UI elements will live within.

Creating Score Text

Now, let’s create a text that will store the player’s score value.

Similar to how we created Canvas — right click on Hierarchy → UI → Text

2. Rename it as ‘Score_text’.

Key features of UI Text

There are a couple of key features of UI Text.

Text Style

Text: a text field (what will be shown on game screen)
Font, Font Style, Font Size, Line Spacing: changing stype and spacing, etc
Paragraph Alignment: Left, center, right / top, middle, bottom
Color: changing text color or transparency

Paragraph Horizontal & Vertical Overflows: if the text is bigger than the text box, you will notice that it disappears. In this case, you will need to change both Horizontal and Vertical overflow to ‘Overflow’.

Anchoring Text to the Canvas

Another important thing that we must do is to anchor this text to the Canvas. Since this will be a score text, I will place it at the top right of the screen. Based on this, it would make sense to make anchor this score text to the top right corner.

Under React Transform component, you can click on the square box icon on the top left to change the anchor setting (The default anchor point is the center of the screen).
Now, you will see a bunch of squares. Click on Top Right anchor icon (refer to the GIF below)
If you move around the text block, you will see the position X and Y values are calculated from the top right corner. We can even manually input the value under Pos X and Pos Y.

Key features of Canvas

One last feature that I want to go over is Canvas Scaler.

Canvas Scaler

Under Canvas gameobject, there is a component called, ‘Canvas Scaler’.

The default setting should be ‘Constant Pixel Size’. We want to change this to ‘Scale with Screen Size’. The reason is ‘Constant Pixel Size’ will keep the text (or any UI elements) to be same size even when the screen size is shrinking or expanding. Imagine we are shipping an app for both PC and Mobile. Obviously, the screen sizes will vary in a large amount. Plus, if the UI elements comes in one fixed size for all of these small and large screens… That’s not ideal.

<Example — Constant Pixel Size>

<Example — Scale with Screen>

Adding Score when Enemy is destroyed

Ok, it’s time to write some code to add score when the enemy is destroyed.

We need to create a new empty gameobject called ‘UI_Manager’

2. Create a new C# script called ‘UIManager’ under UI_Manager.

3. We need 2 variables: 1) The score text & 2) the actual score in number

4. In Start(), we need to let our game know the score should start at 0.

5. Create a new method called ‘AddScore()’. This will be activated when Enemy collided with the laser and destroyed.

Let’s create a parameter of int type called ‘_killPoint’ inside of ().
Write ‘_score += _killPoint’ to add killpoint to the current score.
Then, write ‘_scoreText.text = “Score: “ + _score.ToString();’ to update our score text to match the score.

Inside of Enemy script, under OnTriggerEnter2D(), when the enemy collides with laser, activate AddScore() method that we wrote above and pass on a random number between 5–15. This random number will be converted into _killPoint (that we created as parameter above).