Ease of Building UI Elements in Unity

Now its time to start adding some UI elements to our game. The first UI element to add is the score UI. Unity has a lot built into it to help create the UI. To get started, in the Hierarchy window right click and go down to UI then select Text. This will add 3 objects to the Hierarchy, first is the Canvas, this is where all of the UI elements will be contained. Inside the Canvas is the Text object, this will allow us to write something onto the scene. Last is an EventSystem, this will allow us to interact with the UI in game.

Next, you need to setup the text element. To do this change the name to Score_Text. Set the color to white and the font size to 20. Then, in the Rect Transform component there is a box in the top left with middle on the left and center on the top. This is where the text is attached and will be what the position is based off of. Set it to the top right.

Next, you need to make sure that the text size adjusts with the screen size. This can be done in the Canvas. The Canvas has a component called Canvas Scaler. In the Canvas Scaler change the UI Scale Mode to Scale With Screen Size.

Next, update the text of Score_Text to “Score: 0”. You should see it update in the scene. Now it is time to go over how to update a UI element so that we can start racking up high scores!

To get started with this you first need to create a new script called UIManager. Attach the script to the Canvas. Open the UIManager script and add a new variable called _scoreText of type Text. To be able to use the a variable of type text you will need to include UnityEngine.UI at the top of the file. The top of your script should now look like this.

using UnityEngine.UI;
public class UIManager: MonoBehaviour
{
  [SerializeField] private Text _scoreText

In the Unity editor drag the Score_Text object onto the variable field in the script. You can now change the text of the object in the script by using the text value of the variable. Back in the script in the Start function you can set the score to 0.

_scoreText.text = "Score: " + 0;

For the player to be able to update the score you need a function that the player can call that will update the score. It will work just like setting the initial score but will require an int variable to be passed to it for the score to be assigned as in the code below.

public void UpdateScore(int playerScore)
{
  _scoreText.text = "Score: " + playerScore;
}

Now to start updating the score first you need to start tracking the score. The score will be tracked in the Player object. Go to the Player script and create a variable for the score of type int.

[SerializeField] private int _score;

Next, create a function that can be called to increase the score.

public void AddScore()
{
  _score += 10;
}

Now you need to be able to call that function from the Enemy script when it is destroyed by a laser. The best way to do this is to add a variable so that the Enemy always knows who the player is. The player variable is of type Player. You should assign the player in the Start function. You can do this using “GameObject.FindWithTag(“Player”).GetComponent<Player>()” that will get the player component.

private Player _player;
private void Start()
{
  _player = GameObject.Find("Player").GetComponent<Player>();
}

Next, in the script where it handles when the enemy is hit by a laser you need to add code to call AddScore.

if (_player != null)
{
  _player.AddScore();
}

Now the players score variable is updating you need to use the score to update the UI. First you need to get the UI. You can do this the same way you found the player for the enemy. First creating the UIManager variable.

private UIManager _uiManager;

Then in the start function assigning it.

_uiManager = GameObject.Find("Canvas").GetComponent<UIManager>();
if (_uiManager == null)
{
  Debug.LogError("The UI Manager is NULL.");
}

The last thing to do is in your AddScore function to call UpdateScore from the UIManager and pass it the score. Now your UI will start updating!

public void AddScore(int points)
{
  _score += points;
  _uiManager.UpdateScore(_score);
}

With that done you are able to start adding more UI elements and will all ready be setup to control and update it.

Good Luck Adventurer!

-Chris