Unity Guide
Creating UI elements in Unity
A quick guide about how to create UI elements in Unity
Objective: Create user interfaces in Unity for a space shooter game.
Now that we’ve covered the power-up implementation of the space shooter game in Unity, it’s time to add user interface (UI) elements to add visual feedback of the player progress in the game. For instance, this is the look of the space shooter game without UI elements:
So, in order to create UI elements in Unity, we need to right click the scene or the hierarchy and add the respective UI element to be used in the game. In this case, I’ll add a new Text element to display the score that the player has achieved in the game:
Once the Text element is created, we are able to modify its position inside the canvas using the scene view. We can also notice how it’s displayed in the game view:
Then, in the inspector, we can modify the color of the text to make it more visible:
Also, we can modify properties like the font size, the alignment and the overflow:
We need to be aware of the position and scale of the UI elements when the game is going to be displayed in different screen sizes. For example, if I change the size of the game view you’ll notice that the Text element starts getting off screen:
So, in order to avoid the UI elements going off screen, we can use the anchor presets inside the inspector to attach the Text element to a corner of the canvas and set a new relative position. This way, the Text element is going to stay in that position when the game is executed without disappearing in different screen sizes:
Once the Text element is attached to the right corner we can set the Vector3 position to 0 and we’ll notice that the text will be placed right in the corner.
If we move the Text element inside the Canvas we’ll notice the new relative position:
Now, when the screen size changes, the Text element stays in its place but it doesn’t scale with the screen size and it makes it look bigger than the player:
To fix this, we need to select the Canvas and change the UI scale mode to Scale With Screen Size:
Now, when the screen size changes, the Text element is scaled and it looks better:
Continuing with the score displaying, let’s change the text of the element to preview how it looks:
Also, let’s create a new script to control the UI elements behavior and let’s attach it to the Canvas:
Now, open the Player script, where we’ll store the total score in a new variable:
Let’s create a new public function to increase the value of the score. We can use a parameter to receive a custom value to add and then reuse the function with different actions:
Then, inside the Enemy script, let’s create a variable to store a reference to the Player script attached to the player:
In order to avoid searching for the Player script every time that the enemy is destroyed, let’s initialize the variable inside the Start function:
Now, in the OnTriggerEnter2D function, let’s call the public function that adds value to the score before the enemy gets destroyed by a laser. We can choose how much score increases using the parameter of the function:
Now open the new UI Manager script and let’s add the UI utility class that helps us to work with UI elements inside the script:
Then, create a new variable of type Text to store a reference of the score text in our scene. Don’t forget to use [SerializeField] to drag the text element into the inspector:
Now let’s create the public function that will be called to update the value of the score text element using the respective parameter:
Then, back in the Player script, let’s create a new variable to store the reference of the UI Manager script that’s attached to the Canvas:
Let’s initialize it in the Start function to avoid doing it every time the score changes:
And finally, let’s call the public function to update the score after it changes in the Player script:
Now, when we run the game in Unity, we’ll see that the score changes every time that the player destroys an enemy with a laser:
And that’s it, you can create and use UI elements in Unity for your game! :D. I’ll see you in the next post, where I’ll be showing how to create a game over UI element with a retro behavior.
