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!

--

--

--

Unity / C# Game developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

PHP empty() function use with MySQL NULL

Prims: Greedy when it counts

Why is Communication a Top soft skill for engineers?

How to Make Money in the Metaverse

Unity and my layout

Deploy Grafana to Azure App Service using Bicep

生產力爆棚神器新登場 亞果元素全新iPad 磁吸支架上市

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
Niklas Bergstrand

Niklas Bergstrand

Unity / C# Game developer

More from Medium

The Awesome CSS Transform Property and Scale Function

What is the transform scaleX function

Loading Scenes in Unity

Reflections on Senior Graphic Design: Fall Semester 2021

Generating a LabVIEW UI 2: Color Scheme

Color Scheme 1 (Cornflower Blue)