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!
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.
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.
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…
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.
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.
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!
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!
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).
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.
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!
Great, now let’s continue our code!
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!
If we hop back into our Enemy Script…
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.
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.
Now, let’s have our Player script communicate with it!
Everything is looking good! Let’s go test it out!
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!