However subtle or obvious you may wish your user interface to be, Unity makes it easy to create complex overlays to display your valuable game information. In this article, I will walk you through how to create a basic UI.
The first step in creating a user interface in Unity is to create a Canvas Asset. The Canvas Asset is responsible for displaying and managing UI elements in our scene. You can create a Canvas in the same manner as you create any other Game Asset in Unity.
- You can use the GameObject Menu on the menu bar: UI > Canvas.
- You can use the “plus” button on the Hierarchy Window: UI > Canvas.
- You can right-click in the Hierarchy Window: UI > Canvas.
Along with the Canvas, Unity will also create an EventSystem GameObject. The EventSystem will handle events that come from user input.
Let’s take a look at the Canvas Component.
- The RectTransform Component of our Canvas GameObject holds its position and dimensions.
- The Canvas Component represents the space that holds and renders the UI.
- The Render Mode renders the UI in a scene based on the selected type.
- The UI Scale Mode of the Canvas Scaler Component handles how the UI resizes relative to the screen’s resolution.
Having added the Canvas, we can create any number of UI Elements to design our user interface.
It’s important to note that while GameObjects have a Transform Component, UI objects have a RectTransform Component. The main difference is that a RectTransform is a 2D transform of width and height centered around a pivot. However, it still has properties for Scale, Position, and Rotation that you can manipulate. Another difference is that RectTransform Components use Anchors. Anchors allow a UI element to move and stretch based on its parent object’s RectTransform values. All UI Elements must be the child of a Canvas object.
To create our first UI Text Element, we can right-click on our Canvas GameObject in the Hierarchy, then click on UI, and finally on Text.
The new Text Element now appears in our game view.
We can change some settings of our Text Component to make it look better.
In the Text Component of my Text Element, I have changed the Text field value to SCORE. I have also changed the Font Size to 24. Finally, I have changed the color of my text to white. It’s looking a lot better now.
You may have noticed that the Text Element is not visible in the Scene view. The Scene view displays the Canvas Component at a much larger size relative to our game. To move our Text, we can select it in the Hierarchy, move our mouse to the scene view, and press ‘F’ to focus on it.
While keeping an eye on our Game view, we can move the Text element to a more desirable position.
Now that we have set the Text position, there is one small problem to fix. The Text Element seems to vanish if we resize our Game view.
We can fix this in the Canvas Scaler Component I mentioned earlier. By setting the UI Scale Mode to Scale With Screen Size, we will force the Canvas to be rendered based on the game's resolution.
We can instantly see the results of this change.
Besides Text Elements, Unity provides us with many other types of Components we can include in our user interface. One such item is the Image Element. Image Elements, not unlike Text and other UI Components, can be manipulated as needed.
I have prepared an image that will be the basis of my game’s UI. To add it to my Canvas, I can follow the same steps as before.
For now, it will appear as a white square in my Game view.
After I import my custom image, I replace the sprite of the Image Component with it.
I had to reposition and scale my image to fit, and lastly, I Anchored it to the bottom of my canvas.
So far, my UI is starting to take shape. My idea is to build an interface made up of multiple Image Components with animations. Each Element will be created, placed, or nested based on its function. I can follow the method described above to compose composite Elements.
Note: Unity renders UI Elements based on the order they occupy in the Hierarchy. Put Elements you want to show in front of others lower in the Hierarchy.
This short guide should give you the basics to start creating UI Elements in Unity. For more information on the Canvas Component, please take a look that the Online Documentation.