UI made easy with Unity and C#

Les Street
Jul 21 · 5 min read
A simple UI to display information to the Player

With Unity, it is easy to create great looking UI for displaying useful information to the Player. However, computers are kinda dumb and they don’t know about any of the elements of a game that many would take for granted.

We need to tell our game what it means to take damage, lose lives or even what a score is. Thankfully, that is also fairly easy to accomplish. What is a life or score? Well, to us developers, they are simply variables…

Declaring variables

With these added to our Player script, we now have lives and a score to be able to manipulate as we want.

Increasing the score variable

Adding this method to our Player allows us to update the score by calling it when required — i.e. when an enemy is destroyed.

Calling the UpdateScore method from the Enemy script
Don’t forget, you need to get a reference to the Player — and null check — before you can call a method from the Player!

As for lives —

We need a damage method in our Player script so that we can deduct from our lives if we get damaged. As our enemy doesn’t have any weapons yet, that’ll just be when we collide with an enemy…

Damaging Player and Enemy when colliding —as we have the damage method of the enemy updating our score, there is no need to add anything for that.

Now that our game knows what lives and scores are, we can look into displaying them to our Player. Firstly, our UI needs a Canvas —

Create a UI Manager “Canvas” GameObject in the scene

It is common to create the Canvas required for the UI then rename it as the UI_Manager, this makes references easier to read in code.

This will also automatically add an ‘EventSystem’ GameObject to the scene. Think of this as the UI Input Manager — it’s what allows us to interact with the UI (more on UI interactions in another article). There can only be one Event System in a scene.

To ensure that the UI doesn’t act strange depending on the screen size used, change the Canvas Scaler’s UI scale mode so that it scales with the screen size in use.

There are a variety of different elements we can add to a UI from the UI context menu —

Available UI elements

Our lives display is going to be some sprite images, so we need to add an Image GameObject. And our score will simply be some text we can edit, we could just use a simple ‘Text’ box for our score but I’m going to use the ‘Text — TextMeshPro’ option instead. This gives you far more customization options to play around with to make the text look even better.

NOTE : When you first add TextMeshPro to your project you will get a window like this pop up —

TMP importing

For TMP to function, you only need to add the ‘Essentials’. Once that has imported, the other option will become available, this includes examples of usage as well as a few more fonts.

With Text and Image GameObjects in our scene, we need a new UIManager script attached to our UI_Manager.

In our new script, we first need to add some namespaces at the top—

UI namespaces

These namespaces allows us to access the code libraries in C# for the standard Unity UI (Text and Image in our case) as well as the TMP libraries (for the TMP Text)

Create some references to our UI elements in the script —

Variable references

As we will be using sprites to display our lives, we need an array of Sprites we can select from — assign the appropriate GameObjects and images in the inspector —

Assign variables in the inspector

With that done, it’s back to our UIManager script for a couple of methods to update our score and lives —

These are public methods so that we can access them from the Player as the Player is controlling the change of score and lives.

All we need to to now is head back to our Player script —

Grab a reference to our new UIManager script

Add calls to update our lives display and score display after they have been updated by the Player.

Be sure to pass in the information required by each method so they update appropriately.

There is great flexibility in how you can create the UI for your game, we’ll look at creating a Game Over screen in the next article.

Nerd For Tech

From Confusion to Clarification

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.

Les Street

Written by

A UK based Unity Developer with a passion for gaming and coding

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.