With Unity, it is easy to create great looking UI for displaying useful information to the Player. However, computers are kinda dumb and they don’t know about any of the elements of a game that many would take for granted.
We need to tell our game what it means to take damage, lose lives or even what a score is. Thankfully, that is also fairly easy to accomplish. What is a life or score? Well, to us developers, they are simply variables…
With these added to our Player script, we now have lives and a score to be able to manipulate as we want.
Adding this method to our Player allows us to update the score by calling it when required — i.e. when an enemy is destroyed.
As for lives —
We need a damage method in our Player script so that we can deduct from our lives if we get damaged. As our enemy doesn’t have any weapons yet, that’ll just be when we collide with an enemy…
Damaging Player and Enemy when colliding —as we have the damage method of the enemy updating our score, there is no need to add anything for that.
Now that our game knows what lives and scores are, we can look into displaying them to our Player. Firstly, our UI needs a Canvas —
It is common to create the Canvas required for the UI then rename it as the UI_Manager, this makes references easier to read in code.
This will also automatically add an ‘EventSystem’ GameObject to the scene. Think of this as the UI Input Manager — it’s what allows us to interact with the UI (more on UI interactions in another article). There can only be one Event System in a scene.
To ensure that the UI doesn’t act strange depending on the screen size used, change the Canvas Scaler’s UI scale mode so that it scales with the screen size in use.
There are a variety of different elements we can add to a UI from the UI context menu —
Our lives display is going to be some sprite images, so we need to add an Image GameObject. And our score will simply be some text we can edit, we could just use a simple ‘Text’ box for our score but I’m going to use the ‘Text — TextMeshPro’ option instead. This gives you far more customization options to play around with to make the text look even better.
NOTE : When you first add TextMeshPro to your project you will get a window like this pop up —
For TMP to function, you only need to add the ‘Essentials’. Once that has imported, the other option will become available, this includes examples of usage as well as a few more fonts.
With Text and Image GameObjects in our scene, we need a new UIManager script attached to our UI_Manager.
In our new script, we first need to add some namespaces at the top—
These namespaces allows us to access the code libraries in C# for the standard Unity UI (Text and Image in our case) as well as the TMP libraries (for the TMP Text)
Create some references to our UI elements in the script —
As we will be using sprites to display our lives, we need an array of Sprites we can select from — assign the appropriate GameObjects and images in the inspector —
With that done, it’s back to our UIManager script for a couple of methods to update our score and lives —
These are public methods so that we can access them from the Player as the Player is controlling the change of score and lives.
All we need to to now is head back to our Player script —
Add calls to update our lives display and score display after they have been updated by the Player.
Be sure to pass in the information required by each method so they update appropriately.
There is great flexibility in how you can create the UI for your game, we’ll look at creating a Game Over screen in the next article.