Ease of Building UI Elements in Unity

But can it play Candy Crush?

The User Interface for my space shooter will be one of the most important elements of the game. I need to be able to accurately communicate to the player the state of play without too much visual clutter. I have to make it scale across multiple screen sizes and shapes. I have to make sure the visual style is consistent throughout. And I want all of these things effortlessly, because while it’s a crucial part of every game I don’t want it to be a huge time sink.

Thanks to Unity, making UI elements couldn’t be easier.

The first thing I need to do is create an empty game object in the Hierarchy and call it “Canvas.” Then I’ll right-click in the Hierarchy and scroll down to UI:

There are lots and lots of options here, but for now we will focus on the basic stuff: text and image.

I need a score display so the player can brag about it — so I’ll create a UI Text object called “Score_text” to display that. I need a lives display because the player needs to know how many chances they have left — I’ll make a UI Image object for that part. I’ll also need a “Game Over” notification and a way for the player to try again after a loss. So I’ll make two more UI Text objects; one called “Game_Over_text” and one called “Restart_text” which will both start hidden from view. I’ll trigger their visibility via script later. Now my Hierarchy looks like this.

Now, let’s look at the inspector for each. First, the score:

The first component of each of these will be a RectTransform. The most important part is the Anchor Presets box left of the Position coordinates. Clicking on it will allow you to set the reference position on the screen where the position coordinates will consider to be 0 on all axes. For the score, I’m going to place it in the upper right corner, so I’ll set my reference there.

You’ll also notice a Text component. This will be the component we’ll refer to when we script the score update. For now, write in “Score: “ and move on.

Next is the Lives Display image:

As before, I’ll want to set a anchor point so the UI elements can scale across multiple screen sizes. This one will go in the top left. The Image component should be the sprite for three lives for now. This is the component we’ll call for when we set up the lives update script.

Finally, the last two UI text elements:

I can keep these two anchored to the center. I’ll just set the text up for each for now.

I can now create my UI_Manager script and drag it onto the Canvas object. The code is very straightforward, so I’ll just go through each section and method one at a time.

Before anything else, I need to get access to the UI classes. At the very top of the script I will add the line “using UnityEngine.UI;”

I’ll also declare all my necessary variables. One for score text component, the lives image component and an array to hold the sprite images, the Game Over and Restart text game objects and the Game Manager object (ignore _ammoText; for now — that will come later).

The Start method:

Now I’m setting the initial text and making sure the Game Over and Restart text objects aren’t visible. I also load up the _gameManager variable with GetComponent (again, ignore the Ammo for now).

The first public method will be for updating the score text. I’ll call for that when the Enemy is destroyed in the Enemy’s OnTriggerEnter() block.

Then I need a public method to update the lives image and, when necessary, turn on the Game Over text (via the GameOverTextRoutine below) and Restart text. I’ll run this method via a call in the Player script every time the character loses a life in the Player.Damage() method. Each time the number of current lives will correspond to one of the images stored in the _liveSprites array.

And in the Game Manager script I put the functionality for restarting the game by loading the game scene fresh and new after the R key is pressed, or quitting the application by hitting Escape:

The GameOverTextRoutine is just a simple routine to flash the game over text on and off:

Finally, I’ll drag all the appropriate items into the UI Manager script on the Canvas object.

When all of that is complete, I should have a fully working UI.

Perfect!

In the next article, I’ll go over damage VFX using animated sprites.

Unity Developer / Game Developer / Artist / Problem Solver