Ease of Building UI Elements in Unity

Adding UI elements to your game

Marc Frappier
6 min readApr 23, 2021

Getting UI elements on to your game like Score or Lives available or text boxes, etc. is quite simple in Unity.

We have our player, enemies, lasers and powerups ready. Now we need to work on our interface.

No Interface yet

For our game to be more interesting, we need to have a visible score board. We already have a variable that keeps our score, but we need to display it on the screen.

Scoreboard Setup

In order to add UI items to our game, we need to add a new Canvas with a text object. To do this, we right-click in the Hierarchy window, select UI, Text.

Adding the Canvas and Text from UI

We can see in the Hierarchy window that we now have three new items:

  • Canvas
  • Text
  • EventSystem

Select the Text object and rename it to Score_Text. Then, lets anchor it to the top right corner of our game screen. To anchor an object, select the square inside the Rect Transform and select Top Right.

Anchoring Score_Text top-Right

To see the Canvas, we need to zoom out from our Scene view. It is the large white rectangle coming out of the center of our game screen.

UI Canvas

Our Text appears in the Top Right Corner of the canvas, but that isn’t exactly where we want it, so lets drag it to a better location.

Relocating the Text object

To be more precise, we can set the x and y positions to x:-70, y:-50.

More precise location

Now lets Change our font size to 20, change the text color to white and modify the text to Score: 50.

Changing Score_Text attributes

Notice we now have a Score text showing on our screen.

Score on screen

Scaling Text

We want our text to scale with the screen size. Right now it maintains its size no matter the size of the screen.

Text not scaling with screen size

To fix this, select Canvas in the Hierarchy and in the Inspector window under Canvas Scalar, change the UI Scale Mode from Constant Pixel Size to Scale with Screen size.

Activating Scale with Screen size

Now, the text will scale along with the screen size.

Text scaling with screen size

UI Manager Setup

This management system will be in charge of updating all of our UI objects.

Lets create a new C# script called UIManager and apply it to the Canvas object.

Since it is our Player that will be collecting the score by eliminating the enemy with its’ lasers, we need to add a variable to collect the score.

new _score variable

Now, still in the Player script, we will add a new method to increase our score.

AddScore method

Each time this method is called, i.e. when a laser hits an enemy, 10 will be added to the Player’s score.

Lets move over to the Enemy script. Here, we need to call the AddScore method when a laser hits it.

Since we need to call the Player, we need to connect to it. Instead of calling a GetComponent on the Player every time we hit an enemy with a laser, we can cache it in the Start method. This way it only gets called once.

First we must create a new variable of type Player.

New _player variable

Now we can connect it in the Start method.

Now, we can call the AddScore method. This is done in the OnTriggerEnter2D method when verifying that the object hitting the enemy is a laser.

Calling AddScore method from Enemy script

Now we have a score keeping variable and method. Now, we want it to show up on the display.

Showing the Score on the display

It is the UIManager script that is in charge of displaying our UI objects. In order to call any methods in this script, we must connect to it first.

Since it is in our Player script that we are increasing the score, it is from here that we should call the method in the UIManager script.

Just like connecting to the Player script from the enemy script, we will cache this at the beginning.

First we will create a variable of type UIManager.

and cache it in the Start method:

For error checking, we should make sure the component exists and does not return null.

Checking for null

In our AddScore method, we will call the method in our UIManager script so that each time the score is updated in AddScore, it will also get updated on our screen.

Calling UpdateScore method in UIManager script

Updating the on-screen score

We have just called a method in our UIManager script, so lets go create it.

In our UIManager script, the first thing we need to do, since we are going to be accessing UI objects, is to add an extra using at the top.

Now lets create a variable of type Text.

In our Start method, we can set our test score to 0.

Setting screen Score text to 0

Now we can create the method which we are calling from the Player script in order to update the on screen score.

Now, we can see our score update on the screen as we shoot the enemy.

Functional Score board

In my next article, I will place the lives on the screen so you know when you have been hit.

--

--

Marc Frappier
Marc Frappier

Written by Marc Frappier

Poultry Scientist by profession, online marketer at heart. After many years in the poultry business, I've decided to pursue passion for Digital Marketing a shot

No responses yet