Ease of Building UI Elements in Unity!

Objective: To create an easy-to-use User Interface in Unity and add in a Player Score, Lives Display, and Main Menu!

Here’s what it will look like!

Now that we have all our powerups functioning properly, let’s begin working on the UI! Because there is a lot to cover in regards to UI, this section will be broken down into a few parts, starting with the scoring. We’ll create a scoring system that adds 10 points for each Enemy we destroy. The first step is to create a UI Canvas. Simply right-click in your Hierarchy, select UI, then Text.

We will automatically get a Canvas, Text, and Event System

All our UI elements will go in this Canvas

Now, let’s rename our text to Score_Text and change it to a white color.

Great, now let’s work on the positioning of our text! We want to situate it in the top-right corner, and we want to make sure that remains consistent regardless of the user’s screen size. To do this, we can use anchors.

Let’s also change the font size to 20

We also need to make sure that out text scales with the screen size. Right now, it’s set to a constant pixel size. This means that even if we play on a much smaller (or larger) screen, the text size will not change. So we need to adjust it to make sure the text size changes with the screen size.

Doing so will go from this…

Notice how the text becomes too large on small screens and too small on big screens.

…to this!

Ahh, just right!

Change the text to say ‘Score: ‘ and we are ready to create our UIManager Script! We will attach this script to our Canvas, and it will be responsible for updating all onscreen displays.

We will learn how to update this to reflect our current score soon!

Now that we have that set up, let’s actually go into our Player Script. Because the score will belong to the Player, we need to create a method on the Player Script to control it. How do we do that? We start by creating a variable to store the score.

This idea is similar to our Lives system we created

While the score belongs to the Player, it’s based off of how many Enemies we destroy. This means that our Enemy script will call the Player’s method to add 10 to the score every time one is destroyed.

We’re doing great! Now, let’s hop into the UIManager Script and set it up so that it can communicate with our Player Script and update the score. In order to update the score on the UI, we need to have access to the Text component.

So, let’s create a private Text variable!

Hmm…we can’t seem to find a Text variable option…

Well, we seem to have run into a problem. Why can’t we find the Text variable we need? Unity has libraries, which are listed at the top of your script (‘using…’). In order to access certain elements, we need to make sure we have access to the proper libraries. So, let’s add the library that relates to UI!

And don’t forget the SerializedField :)

Alright, we got it! Now we can drag our Score_Text into our Canvas!

We’re getting closer! Now let’s add some code to our Start section that will display our score at the beginning of the game (we’ll set it to 50 for now just as an example).

‘50’ is an appended value, and we could change it to be anything we wanted

When we start our game, we see our Score of 50 in the corner! How cool is that!

Now that we have all the pieces, let’s go ahead and create our method to update the score real-time! First, let’s create some code in our Player Script.

We just need a simple method to add to our Score. We will have it communicate with our UIManager later

Let’s head into our Enemy Script so we can call this method each time an Enemy is destroyed. While we could do it this way…

…this can become a very performance-heavy way to do it. GameObject.Find and GetComponent are very expensive; calling them frequently could affect the performance and speed of our game. Instead, let’s create a global handle for it and call it once in our Start section!

This way is much more efficient!

Great, now let’s continue our code!

Always null check :)

Just for fun, what if we didn’t want our Score to increase by 10 each time we destroyed an Enemy? What if we wanted to randomize it or base it off the type of Enemy we destroyed? Let’s take a look at our Player Script!

We can pass in a parameter called ‘points’ to modify the amount of points we earn!

If we hop back into our Enemy Script…

We can pass in an integer (or create an integer variable) to store!

This is just a way to be able to modify our game a little bit more. Now, to communicate with our UI! Let’s create a global handle like we did earlier to make it more efficient.

Same pattern as before, and don’t forget to null check :)

Almost there! We just need to create a method on our UI Manager script to update the score and make our Player have access to that method.

We created a simple method on our UI Manager Script that updates the score we see on our UI everytime our Player destroys an Enemy

Now, let’s have our Player script communicate with it!

We access the UpdateScore method from our UIManager Script and pass in our current Player score

Everything is looking good! Let’s go test it out!

How neat is that? :)

We did it! We successfully created a fully functional score system that updates in our game! Tomorrow, we’ll keep the ball rolling by adding in a lives display! See you there!