Day 23 — Getting started with the UI system
Hey and welcome!
It’s time we implement a score system that’s updated by a random number each time the player destroys an enemy and for that we’re going to need to start building a UI so that the user has visual confirmation of their score increasing.
First right click the hierarchy and choose the UI > text option:
That will automatically create a canvas element as well that has your new text object in it. Rename your text object to something appropriate like ScoreText and then go ahead and change the color to white and then anchor your text to the top right using the anchor option as this will make it so that your text will stay in a fixed point regardless of the screen size.
You can put in some placeholder text as well in the Text field so that you have an idea of what it will look like in the game view. Next double click on your canvas object so that it zooms out and shows it all off and reposition your text to the top right:
Lastly go into your Canvas’ inspector and select Scale With Screen Size as your UI scale mode and you should be getting something like the following:
Pretty intuitive stuff right? Now you have some score text that can be shown on widescreen TVs or phones.
Updating the score
Now let’s get into our code for updating the text. First let’s create an UIManager object and assign a UIManager C# script to it. Alternatively you can just add the script to the Canvas object instead but I like to have it this way so that I remember where I’ve put my script.
We’re going to be doing something a little new here for our UIManager script:
private Text _scoreText;public void UpdateScore(int playerScore)
_scoreText.text = "Score: " + playerScore;
We’re passing in a parameter of playerScore in our UpdateScore() which means our UpdateScore method is now going to be looking for an int value to be passed into it when we call it in a different script, more on that later.
We’ve also set the data type of _scoreText as Text rather than the GameObject that we’re used to but it works much in the same way when assigning the object to the variable:
Which means we can access the Text component in our score text using _scoreText.text in order to change its value on the fly. However Unity will not recognise .text right away so you must make sure that you also include the UI library by including using UnityEngine.UI at the top so that Unity has a reference to the library.
Next let’s scurry on over to our enemy script and add this to our Start() method:
_player = GameObject.Find("Player").GetComponent<Player>();
With that we’ve cached our GetComponent to the player so that we can make use of this multiple times in the script without having to make the call each time as it’s not very optimised. Go ahead and update the collision with the player replacing the GetComponent call with _player and then add this to our laser collision:
if (_player != null)
This double checks that our player exists before we try accessing the AddScore() method contained in our player. Then we’re passing in a random value between 5 and 20 to the AddScore() method which we’ve added to our Player script:
private int _score;
private UIManager _uiManager;public void AddScore(int points)
_score += points;
Now the random value we gave at the laser collision in our enemy script is stored in points here which we use to add onto a global variable of _score for the Player script. Then _score is being passed into the UpdateScore() method from our UIManger script to go update that.
_uiManager = GameObject.Find("UIManager").GetComponent<UIManager>();
You’ll see that _uiManager contains our call to the UIManager component which I’ve cached in our start method in case we need further use of it in the Player script. Also remember that if you’ve attached your UIManager script to your canvas you’ll need to have it as Find(“Canvas”) instead.
With that you’ll have something like the above. This is barely a start on what the UI tool in Unity is capable of, you can use it for most UI things you can think of in games from inventory screens to menu screens and we’ll certainly be covering more of this in the future.