Made With Unity | 2D Space Shooter Part 10: User Interface (UI)

7 min readMay 31, 2022

Diving into creating a simple UI to keep up our score, live count, a Game Over screen and a Restart.

🎮Reminder 🎮
We are using Unity 2021LTS

UI MANAGER

Create a new script called UIManager. Since we have two script with the word Manager lets create a new folder and named it Managers; drag both the SpawnManager and the UIManager inside.

USER INTERFACE (UI) CANVAS

Score System

Right click on the Hierarchy, got to UI->Text-TextMeshPro, Import TMP Essentials and rename de Canvas to UI.

Selecting the UI object go to Canvas Scaler and make the changes similar to the image below:

Rename your Text(TMP) object to score_text and on the inspector make the changes to the Rect Transform section and the TextMeshPro-Text(UI) according to the images below:

Select the UI object and add the script component UIManager

Open the UIManager script and add the following namespace on the top of your script. When working with Unity UI / Canvas we need to have the UI namespace in order to interact with the UI / Canvas components.

Since we are using the TextMeshPro object we also need to add the namespace to interact with the component

Add the following Header(), variable and method/function inside your UIManager Class

Go to the UI object and drag the score_text object to the Score Text field on the UIManager script component.

Go to the Player script and add the following changes: 1) add 2 new variable for the _score and one for the _uiManager, 2) on the Start() method get reference for the UI component and 3) create a new public method AddPointsToScore()

Make the following changes to the Enemy script:

Every time a enemy gets destroyed by a laser, you get 10 points.

Live Count

Right click on the UI object and add a image object. Rename the image object to lives_image and edit the Rect Transform using the image below and on the Source Image field I will add the sprite that has the 3 lives ships.

Add the following lines of code inside the UIManager script

On the Live Image Holder I dragged the lives_image object. I added a 4 to the Lives Sprites List and added the remaining sprite on the Element field so I can swap the sprites depending on the live of the player.

Add the following PlayerLivesDisplay() method inside the UIManager script:

Add a new line of code inside the Start() method on the Player script

Game Over Screen

For the Game Over Screen we are goin to add a Panel, rename it to gameover_panel

Change the color of the panel to red or the color of your choosing

Selecting the gameover_panel object, right click and add a Text-TextMeshPro

Add the following lines of code to the UIManager script:

Drag the gameover_panel and the gameover_text to there designed field on the UIManager script component and turn off the gameover_panel object on the inspector

Add the _uiManager.GameOverPanel() calling on the Player script

Restart

Lets add a new Text-TextMeshPro to the Panel and named it restart_text

Create a new script called GameManager inside the Managers folder. In the Hierarchy create a new empty game object, named it GameManager, inside the [ — MANAGERS — ] game object add the script component GameManager

By default Unity changes the script icon to a gear if a script is called GameManager.

Type the following inside the GameManager script:

We can only “Restart” the game with the “R” key from the keyboard when the player is dead, line 12. We create the public method IsPlayerDead() so that the Player script can tell us if is dead and this will allowed us to “Restart”

You will notice a new namespace, using UnityEngine.SceneManagement;, this will allowed us to loads any scene by its name or index in Build Settings. On line 14 were are loading the scene with the index of 0, that our current scene, the game scene. How did we know that?

Go to File->Build Settings, on the windows press Add Open Scenes. It will add our current scene that we are working on and give it a 0 as is index number.