My 120-day journey to being a better Unity Developer — Day 19

UI elements provide more information to the player

Objective: Implementing User Interface (UI) to the game to provide more on-screen information to the player

Leading up, we had no way of telling the player how many lives they had left or providing incentives of what their score is.

In this article, we will go implement a UI system that will tackle each one of those problems.

Player Lives

To get started, we need a UI Canvas, which is where all the UI elements go into. Right-click in the Hierarchy and select UI | Canvas.

This creates automatically an Event System that handles the interaction with the UI elements like clicking on a button.

Right-click Canvas and choose UI | Image

This will create a white square in your game view and a Image game object under Canvas. Rename this to LivesImage.

In this example, we have four images available for each possibility when it comes to the player lives, 0 through to 3 ships images. Each time the player loses a life, we will swap out the image.

One Ship Left
Three Ships Level

With the LiveImage selected, drag the three-ship image onto the Source Image slot.

Lets position the Player’s Lives UI at the top left of the screen and for it to behaviour responsive to any screen size. In the Inspector, in the Rect Transform, hold down the ALT key and anchor to the Image to the Top Left with PosX at 125 and PosY at -50.

Reposition the Lives UI

In the UIManager class, lets create a variable to store a reference to the LivesImage so it can manage the UI.

Remember to drag the LivesImage in the Hierarchy to the new slot in UIManager script on the Canvas.

Create a public method for the Player class to communicate to it to let it know how many lives the player currently has.

The change to the Player class is when the player takes damage and loses a life, it lets the UIManager know by calling the UpdateLives method and passes the amount of lives.

Scoring System

What is a Space Shooter without a scoring system. For each enemy ship destroyed, 10 points will be added to the score. First lets add a UI Text to the Canvas and rename it to ScoreText.

You will see a faint “New Text” that will need to be position top right, and change the format of the text. With the ScoreText select, make the following changes in the Inspector.

Anchor: Top Right

PosX: -120

PosY: -50

Text: Score: 9999

Font Size: 28

Alignment: Centred both horizontal and vertical

Horizontal Overflow: Overflow

Vertical Overflow: Overflow

Colour: White

Setting changes in the Inspector
Score formatted and in position

In the UIManager, create a variable so the UIManger may reference the ScoreText. Drag on the ScoreText to the new slot on the UIManager.

In the UIManager class, in the Start Method, reset the score text.

UIManager class

Create a public method so when the enemy ship is damage, it can communicate to the UIManager to update the score.

UIManager class

We need somewhere to store the current score, for now lets put this in the Player class. We may move this to a more suitable spot in a GameManager.

Player class

Create a public method AddScore to add to the score and communicates to the UIManager to update the display.

Player class

In the Enemy class, create a reference to the Player class so when the enemy is shot by the laser, it can call the AddScore method.

At the top of the Enemy class

In the OnTriggerEnter2D, when the enemy collides with the laser, call the AddScore method. We are passing 10, 10 points for destroying the enemy ship.

That is it. We have added UI elements to inform the Player how many lives they have left and what their current score is.

If you enjoyed reading this article give me a Clap, also if you would like to see more, “Follow” me, so you may be notified of future releases. You may also send me a message if you need any further help.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jean-Noel Seneque

Jean-Noel Seneque

A Data & Analytics Consultant who is expanding into developing experiences in XR, Enterprise and Gaming space using Unity