Ease of Building UI Elements in Unity
Adding UI elements to your game
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.
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.
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.
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.
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.
To be more precise, we can set the x and y positions to x:-70, y:-50.
Now lets Change our font size to 20, change the text color to white and modify the text to Score: 50.
Notice we now have a Score text showing on our 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.
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.
Now, the text will scale along with the 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.
Now, still in the Player script, we will add a new method to increase our score.
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.
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.
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.
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.
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.
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.
In my next article, I will place the lives on the screen so you know when you have been hit.
