Production: UI in Unity

Introduction

In the last post we went through the UI design process in Photoshop. Today we will implement that design in Unity.

Let’s get started.

The Challenge

The challenge is to 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). photoshop design

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.

Canvas Scaler

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 1920×1080 and let the other settings to their defaults.

Now, we can finally begin adding the UI elements.

Lives Images

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 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.

player lives

Fuel Bar

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.

fuel bar

Shields

Following suite, 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.

shields

Stars

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.

stars

Message Panel

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.

message panel

Summary

Our new UI is now in place, and soon we’ll be updating it programmatically!

final

Stay tuned for the next post. Take care.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s