2D Galaxy Shooter — Introducing an User Interface with Score

4 min readAug 19, 2021

Hello all,

Today, I will go over User Interfaces (UI) in Unity by making a score system display at the top right of the game screen.

Setting Up the User Interface in Our Scene

Add a new game object by clicking the + button at the top-left of the Hierarchy, then UI, and Text. Rename it Score_text.
This will make 3 game objects: Canvas, a new Text, and an EventSystem.
- Canvas is where the UI text will sit and EventSystem is used when you need to interact with the UI, like tapping a button.
In the scene view, zoom out till you see all of the new white box. That is our full UI, drag the “new text” around the white box while watching the game view, you should see it move around in proportion with our game view.
Select the Canvas and head to the inspector, find the “Canvas Scaler” component, and change the “UI Scale Mode” from “Consistent Pixel Size” to “Scale With Screen Size”. This will help if you want to port the game over to platforms with different screen sizes.
Select Score_text and go to the inspector.
Under the Text component, change the text to “Score: “.
Under Rect Transform component, there’s a box at the top-left, click that and select top-right. These are anchor points.
Now drag Score_text to the top-right part of the Canvas and position it where it would look best. I’d give it room to have a few digits added to it.

Behavior to Add Score when I Kill an Enemy

Now that we know how to make a simple UI, let’s make it where we can score points. Another key staple in space shooters!

Create a new C# script, name it “UIManager”, and assign it to the Canvas. The Canvas will be our UIManager going forward.
Open the UIManager script.

3. At the top where the Libraries are, make a new Library called, “UnityEngine.UI”. This allows us to use elements from the UI, like the score.

4. Add variable — [SerializeField] private Text _scoreText;
- Text will not be available if the UI library is not there.

5. In void Start, add _scoreText.text = “Score: “ + 0
- This will just make the score 0 when the game starts.

6. Create a new method —“ public void UpdateScore()”

7. Head to the Player script.

8. Add variables:
[SerializeField] private int _score;
private UIManager _uiManager;

9. Go to Start and pull the UIManager script from Canvas, see below.

- Best practice is to not run GetComponent a lot, it‘s very resource intensive. By doing it this way, we pull it once when the game starts instead of several times during game play.

10. Create a new method:
- This means that when called, this method will send the value of _score to the UIManager, then display the score.

11. Now, let’s call this method when an enemy is killed. Head to the Enemy script.

12. Like with the Player script, create a variable —“ private Player _player;”

13. In Start, add:

14. Find the “if (other.tag == “Laser”)” statement.

15. Now lets call the “AddScore()” method in the Player script.
- The 10 inside AddScore(10) is giving the player 10 points when killed. We will add more enemies later that will give higher points, but with higher risk!