My 120-day journey to being a better Unity Developer — Day 19
Ease of Building UI Elements in Unity
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.
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.
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
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.
Create a public method so when the enemy ship is damage, it can communicate to the UIManager to update the score.
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.
Create a public method AddScore to add to the score and communicates to the UIManager to update the display.
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.
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.
