Prototyping UI in Unity Part 3 — Introduction to UI Components (2024)

< Previous: Exploring and Customizing the Interface

This article will introduce two of the main UI GameObjects used in Unity: Images and Text.

GameObjects, which are somewhat comparable to layers in a Photoshop or Sketch, are all the objects that live inside the Hierarchy. A standard GameObject contains a Transform component, which when used with 3D objects, controls it’s dimensions within a 3D space.

2D UI GameObjects differ in that they use the Rect Transform component. The Rect Transform has all of the parameters of a Transform, plus additional 2D parameters which help render and place the object to the 2D canvas. It also controls anchoring and the pivot, which help the objects adjust flexibly to different device dimensions.

UI components in Unity are all just Rect Transforms with additional components added on top of it. For example, an image is a Rect Transform with an Image Component and a Text Label is a Rect Transform with a Text Component, and so on.

All UI must be placed inside a Canvas GameObject, or else the Camera won’t render it. The easiest way to add a Canvas is by adding a UI GameObject through the GameObject > UI dropdown menu. This will automatically add it to the scene along with the EventSystem GameObject, which is needed to handle interactivity.

Let’s start by adding an image to our prototype. From the GameObject > UI dropdown menu, select Image.

This will automatically add the Canvas and EventSystem in the Hierarchy. Double-Click the Canvas object and the Scene will center on it. You should see the 100x100 image inside your bounding box.

For now lets ensure this Image is placed in the absolute center of the scene.

1. Select the Image in the Hierarchy
2. Set the X and Y Pos values to 0

Re-select the Canvas Object in the Hierarchy and look at the inspector on the right to view the Canvas Scaler component. This is where you modify how the UI adjusts to different dimensions.

In the UI Scale Mode dropdown, there are 3 options:

1. Constant Pixel Size keeps the object exactly the same pixels, meaning some higher density devices might view objects smaller and vice versa.
2. Scale With Screen Size uses a reference resolution to dynamically scale UI Objects to fit each dimension relative to the reference. This means, your UI won’t be exactly the same pixels or physical size, but should look very similar across all devices.
3. Constant Physical Size keeps the object the same size across multiple devices, meaning a square on a high resolution iPad will be the same physical size as a square on a lower resolution iPhone.

Switch to the Game View and change your device’s resolution and the UI Scale Mode to see how the camera renders the Image object. You’ll see the differences in size dependent on what dimension you select and which scale mode you choose.

Which you pick is largely dependent on your own personal preference. I find a lot of success with consistent looking UI using Scale With Screen Size and setting the reference resolution of the size I design at.

My Sketch file for this tutorial was designed at 750x1334 and using this setting will ensure that the pixel comparison is exactly the same.

So for this tutorial, we’ll use the following settings for our Canvas Scaler:

1. Scale With Screen Size
2. Reference Resolution: X: 750, Y: 1334
3. Drag Match to the right until it says 1

I’ve already shown you how you can change the X and Y position through the inspector. But you can also manually move objects with the Move Tool.

Go back to Scene View, choose the Move Tool

First select the Image in the Hierarchy.

Then drag the Green axis to change the Y value or the Red to change the X value.

Changing the height and width of an Image is exactly the same process. You can either use the Rect Transform tool and manually drag the dimensions, like below.

Or you can change the properties through the inspector.

Set the image to 500 width and 500 height.

Tip: In both cases where deciding to either adjust manually through the tools or the inspector, it’s always preferable to use the inspector. Using the inspector ensures that your dimensions and positions are exactly how you intended.

Changing the color of Image GameObjects is as easy as manipulating the previously explained values. For this, we’ll look a little further down the inspector at the Image component.

Click the Color parameter and change to the desired color.

To use custom textures as images instead of a rectangle, we’ll first import our source textures into our project.

Download the Source Files here

Unzip the file, make sure the Assets folder is selected in your Project window and drag the Fonts and Textures to it. You can also manually add them to your Assets folder through the finder.

There are two ways to add custom textures to images.

The first way is through dragging. Make sure the Image object is still selected in the hierarchy and select the Textures folder in the Project. Then, drag the Photo1 texture from the Project window to the Source Image parameter in the Image component.

This method is a little tricky, mainly because if you let go too soon, the Image in the hierarchy is no longer selected, and you have to start over.

The second way is by pressing the circle to the right of the Source Image parameter, which brings up window with all the textures in your project to choose from.

This is one of the strengths of Unity, the ability to adjust and anchor objects to a flexible Canvas. It’s very similar to how Sketch added resizing constraints, so if you are familiar with that concept, this shouldn’t be much of a stretch.

With the Image selected, go to the Rect Transform component and select the Anchor Presets display

Here is where you can anchor objects to different areas of the Canvas, or stretch to fit a specific area. Learning how to use this properly will allow much easier result as you start to design for multiple devices.

Try playing around with all the settings and offsets to get the feeling of how it works. In the project based tutorial, we’ll get into more specific use cases.

But for the sake of this article, reset the image back to these settings.

Adding a text label is exactly like adding an image.

1. Select the object in the hierarchy where you’d like that object to be in, in this case it’s the Canvas
2. Go to the GameObject > UI menu and select Text

Adjusting it’s Rect Transform parameters also work exactly like adjusting an image, as well as the anchoring and pivot settings.

With the Text object selected, set the text to appear below the image with these parameters:

You should also see the Text component in the inspector underneath the Rect Transform. In this component, you can modify the font size, the font color, the display text, and more. All things you’d expect from any text properties panel in Sketch or Photoshop.

Set the text component to these parameters and view the results in the scene:

Changing the font is exactly like adding a custom texture to an image. You can either drag the font from the Assets > Fonts folder in the Project window.

Or click the circle to the right of the font parameter and make a choice.

Either way, select SanFranciscoDisplay-Semibold and you’ll add your custom font.

Let’s take a quick preview of how this will look on device by going to the Game view.

To modify the default background color, select the Main Camera object in the hierarchy and change the Background color to white.

These are just the basic concepts of creating UI in Unity. As you might have seen from the GameObject UI dropdown menu, there’s quite a few UI GameObjects, like Scroll Rects and Buttons. But with an understanding of how Images, Text, and anchoring work, you should have enough fundamentals to start to create your own custom layouts.

Next, we will talk about Layout components, which is the true power of the Unity UI system.

Next: Part 4 — Layout Components