In the last article, we went through the UI design process in Photoshop. Today we will implement that design in Unity.
We'll create a UI in Unity using the Canvas, Image, and TextMeshPro UI components. We'll make sure that the UI looks correct under several aspect ratios as well. If you're unfamiliar with TextMeshPro, read more about it here.
As a reminder, here's our final design (including the guides).
UI Parent Setup
Let's start with creating the UI components we need. I'll create a new parent GameObject named
UI where the rest of our UI child components will live. I'll also add a UI Manager script to update the UI later as well (we'll talk about the UI Manager in the next post).
Now let's add a Canvas via Right Click on the UI GameObject and selecting UI -> Canvas. The canvas will act as a host for our other components. Before we add those, let's set a few important settings on the Canvas.
Unity takes care of a lot of issues we no longer have to be concerned about, thanks to the Canvas Scaler. This component is responsible for controlling the scale and pixel density of child UI elements, which includes font sizes and image borders. We definitely want this! Doing this work manually is tedious and time-consuming.
By default, the scale mode will be set to Constant Pixel Size, which means nothing on the canvas will scale with screen size. I'll switch to the Scale With Screen Size mode, which will make UI elements larger for larger screen sizes. I'll set the reference resolution to 1920x1080 and let the other settings to their defaults.
Now, we can finally begin adding the UI elements.
First I'll add ad new Lives parent GameObject anchored to the top left of the screen, and then add a child image to represent a player's life. In the Image component, I'll check
Preserve Aspect and click the
Set Native Size button, and then resize manually to taste. I'll then duplicate this image two times so we can represent three lives total for our player.
Next, I'll add a Boost parent GameObject, also anchored to the top left, and then add two images and follow the same routine as I did for the lives image. The fuel itself I'll place behind the container and change the
Image Type to Filled and set
Fill Method to Vertical. We will later programmatically adjust this value when the player is using the speed boost pickup.
Following suit, I'll create the parent Shields GameObject first, then add an Image and TextMeshPro component. I'm using a custom font (you can create TextMeshPro font assets via Window -> TextMeshPro -> Font Asset Creator). TextMeshPro components contain many settings. I won't waste your time going through all of them, but you can see the result of my tweaks.
I won't waste time explaining the stars setup, since it is practically identical of what we did for shields. Duplicate that and update the image and change the default text to
00/00. I've got the parent anchored to the top right.
After creating a panel parent object and anchoring it to the bottom, I'll add an image to be the background of the message and a TextMeshPro component that's centered for the text. I tweaked the settings for the look I want, and here's the result.
Our new UI is now in place, and soon we'll be updating it programmatically!