Unity 3D: Adding UI Elements to Game Canvas

So now that we have a good idea of how the Canvas works, let's try adding our own elements into the game. We'll start with a very simple label. A label is simply static text that you use on the User Interface. Let's have our label say Use the arrow keys to move.

First off, to add any UI element, we now know that we need a Canvas first. However, Unity saves us the trouble of inserting a new Canvas into the scene, by doing it automatically when you create a UI element in a scene that doesn't already have a Canvas.

To add a label into the scene, right click in the Hierarchy and select UI Elements → Text.

As soon as you click on Text, you'll notice a new addition in your Hierarchy view.

You can safely ignore or get rid of the EventSystem gameObject. It deals with, as the name implies, handling events, something that we won't be covering as of now. See how Unity added a new Canvas and automatically made the Text element a child of that Canvas.

Now, have a look at the properties of the Text Label.

Most of what you see is quite self-explanatory. There are options for changing the color of the text, text size, font (by importing Font files into the Assets), alignments and so on. Now, take a look at the Game view.

What's this new corner (circular dot) that's appeared on the screen? Try zooming out of the game until you can see the Canvas entirely.

Unity 3D: Understanding the Canvas Size

Why is the Canvas so large? You see, lengths in Unity are measured in Units. These units are tiny little squares that span the entirety of the game world. The Canvas uses a default scaling factor of 1 UI pixel = 1 Unit, meaning the Canvas is actually 800 units long in the scene editor.

Now that the size understanding is out of our way, select the Text element in the Hierarchy, and zoom in on the Text so that you can see it properly. Let's give the text a bright red color and write what we want it to say in the Text field.

Unity 3D Canvas: Formatting the Text UI Element

Since the default Label size is slightly shorter than the text that we want it to show, we can increase the size of our label box by dragging the blue handles that we've been using so far with our sprites. In case you can't see the blue handles, simply click on the last option in the top-left corner of the editor, with Text selected.

We would also recommend trying to change the Horizontal and Vertical Overflow options in the Text's properties, since they deal with the same issue that we just solved by resizing.

Now, drag around the Label to the top right corner of the giant Canvas. You'll see that Unity has a lot of area where UI elements will fix itself into place. This includes corners and middle-points of the Canvas. This will be very useful when you work on more complex UIs that need to look organized and aligned.

Finally, change the size of the Label further and increase the font size in the properties. This ensures we have a Label that's clearly visible in the game.

In the next tutorial we will leatn how to update the text UI element in realtime to use it to display score and other game progress information.