Learning Unity — Building UI Elements In Unity
In the last article, we learned about how we can use the C# switch statement to clean up overly large if else blocks. This time around, we’re going to take our first look at building user interface (or UI) elements in Unity.
In the context of a video game, the User Interface (or UI) is used to display and manage many of the parts of a game that aren’t the game itself. Things like menus, inventories, information about how the player is doing; these are all potential UI elements.
We can get started by right-clicking in our Hierarchy window and selecting an option from the UI menu. We’ll just select the “Text” option for this example. Once this option is selected, notice that there are now three new objects in our Hierarchy window — an EventSystem object, a Canvas object, and underneath the Canvas object is the Text object that we selected.
The Event System object manages the elements that make up the Unity event system. The Canvas object requires it to function, but aside from that we don’t need to worry about it right now.
The Canvas object represents the space that our UI elements occupy. All UI elements in the scene must be children objects of a Canvas. There are many options we can configure to display our UI in various ways, but for now let’s just move on to the final object created.
Our Text object is the individual element that we wanted to create for this UI example. As the name suggests, it displays text to the user. We can examine the Text component in the Inspector window to see some standard options we can configure.
We can set the text to display here. We can also configure various options of how the text is displayed, including the font, size, alignment, and much more.
For our example, I’ve set the text to display “Time:”, placed it in the middle of the screen, and set the color to white. Here is the result:
Well, that was easy and it looks fine, but it’s not very interesting. As things stand, this text would just sit there in the middle of the screen and never change. Let’s see what else we can do.
Create a new script and attach it to the Text object. We are now going to write some code to display how long the game has been running in the Text object.
For our script, before anything else, we first need to include the UnityEngine.UI library. We can do this by adding a new line to the using statements at the top of the script.
Next we will modify the Update method of the script to create our functionality. Within the Update method, we first need to get the Text component of the object. In that component, we then will want to change the value of the text property. Finally, we need to change that value from “Time:” to “Time: X”, where X represents the time the game has been running.
You may recall that we can get the time the game has been running by using the time property of the Time class, or in other words Time.time.
Putting this script in place, we get this as our result:
This is a very simple example, but you could connect the UI elements to other gameplay information such as score, remaining lives, hit points, etc. You can also use things other than just text, such as images.
That concludes our introduction to building UI in Unity. In the next article, we’re going to continue with UI and see how we can make it a bit more interesting. Until then, good luck and happy coding!