Building a simple UI in Unity
Unity makes it easy for us to create a User-Interface (UI) for our game.
Right-clicking in the hierarchy and going into the UI section of the menu that pops up, gives you a list of various elements to use.
As you can see, most of them are pretty self-explanatory 😀
Evident by there being two different types for some elements, there’s also something called TextMeshPro.
TextMeshPro, often abbreviated to TMP, provides more advanced features. I’ll be sticking with the ‘default’ one here, though.
For my game, all I really need is some text and image displays. Text for the score and ammo, and image for the lives.
“A word of caution”
One suggestion when working with UI is to NOT use the “Free Aspect” setting for the game view.
Doing so can lead to headaches when you build the game, with UI elements not being where you expect them to.
My advice is to use an aspect ratio or resolution based on the target device(s) you are developing for 😃
I start by adding a text element from the menu, this automagically creates two objects in my hierarchy, the Canvas, and the EventSystem. The text element is then placed inside the canvas. The canvas is what will hold all the other UI elements, and there are a few different settings to tinker with.
One of the first things I like to do is set the UI sale mode to scale with screen size. By default, this is set to Constant pixel size.
By having it scale I make sure it looks the same even if played on lower or higher resolution.
The default “Render mode” is to have the UI occupy the screen space, as an overlay. Elements on our canvas then don’t follow quite the same way of working with positions as we have gotten used to with our gameobjects.
Instead, we use the reference resolution as a reference. It still uses the same axis direction but at a greater scale, and in reference to the anchor's position.
Example:
A text element with a size of 160x30 would be placed halfway up on the left edge of the screen, if it had an anchor in the center of the screen, with a position of -320 on the X-axis.
Why -320?
800 wide, anchor in the center means there is 400 to each side of it.
Left of it is negative, right of it is positive. Placing it at -400 would have half of the element be out of view, calculated from its own center.
400–80 = 320. Left of the anchor = -320 😀
Obviously, you don’t need to calculate the position yourself, you can drag elements around and position them just as you like. Clicking the anchor position gives you some presets.
Anchors are important, because when you’re doing the scaling that is the “reference point” used.
This is why I would recommend using not the free aspect option, the edge of the screen might not be where you think it will be!
Outside of that it really works similar to how Unity operates with components and scripts. So I won’t go into more details on it in this article.
I create a UI Manager to handle updating the UI information with public methods I can call and pass in the new info.
That’s all for now, thank you for reading 😃
