Ease of Building UI Elements in Unity: Adding a Score Display
Building an UI (User Interface) is easy like Sunday morning, well not THAT easy but still pretty easy. The User Interface determines how the user interacts with screen. UI is applicable to all types of games and apps and for this example we will be setting up a simple scoreboard for my Space Shooter game.
The first step is to create a UI element in the hierarchy. Just simply right click in the hierarchy, scroll over UI and choose what kind of UI element you want to add. In this case, we are going with a Text element.
When you create an UI element, a few things will appear in the hierarchy.
A Canvas, which will house all of the UI elements, and in this case, a Text element. Also, an EventSystem which is needed for the user to interact with any of the UI elements.
Looking at the image above, you can see the Canvas in the Scene as a white box. It is acting as a layer over the Game Scene. When the Text element is selected, you can see how when it is reposition on the Canvas, how it is also repositioned in the Game Screen is a similar manner.
In setting up the Score Text in the Canvas and the Game Scene, I want to make sure the Score Text stays in the top right corner across all platforms or devices that it is published on. For this to happen, the Score Text must have an anchor point and look at the image above, you just need to select anchor presets in the Rect Transform, then simply give it some padding on either the X or Y. With this in place, no matter the screen size, the Score Text will remain in the upper right hand corner of the screen.
We are not out of the scaling woods yet. The Score Text remains anchored in the top right corner, but when the screen size is adjusted, the size of the text remains constant throughout. We need to change this, so the Score text size will scale with the screen size. Clicking on the Canvas and looking under the Canvas Scalar, the UI Scale Mode default is Constant Pixel Size; not what we want. We need to change the UI Scale Mode to Scale with Screen Size. With the change, you can notice in the image above, the Score Text now scales with the screen size.
Right now, the Score Text is static and it needs to be more dynamic! Here is the logic for setting the Player Score. When the player hits an enemy with a laser, the player will be award a certain amount of points. Seems simple, but this is going to take 3 scripts to talk to each other; Player script, Enemy Script, and the new kid on the block UIManager script.
First, create the UI Manager script, which will control all of the UI elements, to the Canvas.
Looking at the Player script, the Player is going to be the keeper of the score so we will add an int variable for it. Also, we need to create a handle for the UI Manager since we will need to communicate with that script when the score has been updated. We will get the UI Manager component using the GameObject Find Canvas(UI Manager script is attached to the Canvas) and assign it to our _uiManager in the Start. We also want to Null check it too!
Next, we need to make a Method to let the Enemy Script to know when to Add Points to the Player’s Score. In making the Method, we add a parameter of int points to make this more flexible, instead of hard coding the amount of points that are going to be added.
Having the AddScore Method setup, we need to call it when the Laser hits the Enemy, so we head now over to the Enemy script. Looking at the collision between Laser and Enemy, we need access to the Player script since it has the AddScore Method. Unfortunately, we cannot use the Collider 2D other variable because that is storing the Laser script. So, we need to get access to the Player Script by Finding the Player GameObject and getting the Player component. This will work but it is expensive operation, if we are to the Player Component each time the Laser Collides with the Enemy.
In optimizing this, we will create a player reference to the Player Component and assign for each instance of the enemy at the Start.
With the Player reference or handle, we can now simply Null check and call the Player Method of AddScore and pass in the amount of want to add.
The last part of this script communication triangle is the UI Manager. We need to let the UI know when we are adding to the score. In setting this up, we need access to the text component of the Canvas (UI Manager script is attached to the Canvas GameObject). In order to access UI element, we to access that library by typing using UnityEngine.UI at the top. then we can create a variable type of Text, that will store the text and in the Start, set it to “Score:” with the appendage of 0.
Lastly, we need the Player Script and the UIManager Script to talk when score has beed added to, so in the UIManager script we will create a public UpdateScore Method with an int parameter. We will update the Score Text by this int parameter of playerScore.
The only thing to do now is call the UpdateScore Method from the UIManager in the AddScore Method of the Player’s script and pass in the _score.
