Creating Score system with UI in Unity!

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

Creating Score Text

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

  1. Similar to how we created Canvas — right click on Hierarchy → UI → 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’.

Adding Score when Enemy is destroyed

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

  1. We need to create a new empty gameobject called ‘UI_Manager’
  • 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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Du Young Yoon

Du Young Yoon

XR Unity Developer / Designer / Architect