Unity Dev: Basic UI

These days, it’s up in the air whether players even want a user interface. A number of games include the option to completely hide the UI of games to increase immersion. That said, we’re going to create a simple display to show our player’s score and the lives they’ve got left.

Note: If you’ve been following along, you’ll notice that the background is substantially different than what I was previously using. It was done by simply swapping out the image. I was also playing around with a Particle System, which I’ll do a write up on as soon as I’ve got a better handle on it.

Our first step, as always, is planning. So what information do we want to provide our player to help them along the way? Let’s consider a few options.

1. What’s the fun in a game if we can’t brag to our friends about how well we’re doing? Each enemy ship kill generates some points so we should give that some screen real estate. Score Display
2. Our Player can only take so much damage. There’s no God Mode (yet), so we should make an indicator letting the player know how many lives they have left. Lives Display
3. So there’s no God Mode. That must mean there’s a Game Over scenario, which will happen when our lives reach 0. Game Over Screen
4. If the game ends, we need some way of restarting it so that our player can try to beat their high score. We can use our UI to inform them of how to trigger a restart. Restart Screen

We’ll cover how the Score Display here which should give you enough context to set up the others.

Score Display

To start your UI, create a Text element from your object creation menu. This will create an object called “Canvas” and this is where all your UI elements are going to be stored. In addition, a “Text” object will be created which you can call “Score_text” and play with the configurations for different fonts, colours, and general text editing options.

Next up, create an empty object called “UI_Manager” and a coordinating C# script called “UIManager”. Attach the script to the object and open it up. We’ll be using this script to, well, manage our UI items.

Start of simple by making a variable for your new Text object and then attach “Score_text” to the UI_Manager object in the inspector. In void Start() we want to default the text to read “Score: 0”, so we’ll add a line to do just this using string interpolation. The string interpolation isn’t really necessary for this bit, but I like to do it anyway to highlight the fact that the 0 is the section of the text that is going to be changing.

Finally, we create a function in the UIManager to update the text of the score as it changes. We’ll let it accept a integer value as an argument which will be the Player’s total score that we’ll be receiving

Player.cs
Inside of your Player script, we need to create a reference to our UIManager so that we can communicate with it.

Don’t forget to populate this variable using GetComponent<> and null check it!

From here, we’ve got a couple functions in our Player script.

EnemyKill() is called from the Enemy script whenever a Laser collides with an Enemy object. It then creates a random int between 10 and 20. This int is then passed to our AddScore() function.

AddScore() takes the argument it’s been passed and adds it to our global _score variable. The next line then asks our UIManager to run it’s UpdateScore() function and gives it the newly updated _score value.

And that’s it! If you run your game, you’ll now see that your UI updates accordingly whenever you destroy an enemy ship.

More UI

Now that you’ve got your UIManager set up, how can you use it to establish the other elements you need to show your player? How can you swap out images to create a Lives counter? How can you use existing code to show the Game Over text when our Player _lives == 0 ?