Basic UI in Unity

Yet another amazing feature of Unity is the ease of use to create beautiful UI. Gone are the days when you had to do everything via code. Let’s add some UI to the Space Shooter:

First, we will need two more new Manager scripts, one for the UI (UIManager) and one for the overall state of the game (GameManager). When you name a script GameManager, it will automatically change the icon to a cog wheel. My personal preference is to have all the managers gathered on one object:

To start working on UI you will need to add an object called the Canvas. You can add that by right-clicking in the hierarchy and then UI-Canvas. Alternatively, anything else you select in the UI menu will automatically create the Canvas object if it does not already exist:

Let’s start with the score text in the game:

Click on the Canvas and set UI Scale Mode to “Scale With Screen Size”. This is important to ensure the UI looks the same on all devices:

Select the text object and change the name. Set the anchor to the upper left corner, and if you hold down the alt key, you can also automatically position it in the upper left corner of the screen. Change the text to “Score:”, set a more interesting font, increase font size and set colour. To ensure that the text does not disappear when you increase the font size, set both Horizontal and Vertical Overflow to Overflow:

Open the UIManager script. Add the the namespace UnityEngine.UI on top of the script. Without this you will not be able to access any of the UI classes:

Add a private Text and a public function to update the text:

Open the GameManager script and add a private int for score and a private UIManager to reference the UIManager:

Assign the UIManager in the Start function:

Add a new public function to increase the score and update the UI:

Ensure that the IncreaseScore function is called from the Enemy script when the enemy is hit:

Add the Text object in the Inspector:

Now add an Image to the Canvas. Add the Three lives UI to source image and rename the object to Lives_image. Click on Set Native Size to ensure the aspect ratio is correct:

Set the anchor on this object as well, but this time in the upper right corner. Reduce the size and position the image:

Open up the UIManager script again and add a private Image and a private Sprite array:

Add one more public function that will update the lives image to show how many lives are left:

Ensure this is called from the Player script when the player gets hit:

Lastly, add the the sprites in the Inspector:

Final result:

Good luck!