Introduction to Unity UI – Part 1

Placing a Header Image

Phew! That was a lot of information about Rect Transform, Anchors and Pivot. Believe me, you’ll be grateful you spent the time working through the exercise, as these concepts are essential to creating awesome UI in your games.

Going forward, you’ll concentrate on creating the menu scene. The rest of this tutorial will go by in the blink of an eye!

All those manipulations exhausted the poor little header. It’s time to place it where it should be and leave it alone to recover.

Before you continue, re-enable Background if you disabled it to see the Canvas border.

Select Header in the Hierarchy and set its properties in the Inspector as follows:

1. Click Set Native Size to reset the size, as you probably messed with it while playing around with the pivot.
2. Set Anchors to top-center.
3. Set Pos X to 0 and Pos Y to -100.

You should see something like this in your Scene view:

That’s it! Now, leave the header image alone. It’s a little tired, too. :]

Now that you know about anchors and pivots, go back to the background image. Did you notice that when you added the aspect ratio fitter, some of the floor texture is now cropped off screen? We can use the Aspect Ratio Fitter in combination with the pivot to fix this:

1. Disable the Aspect Ratio Fitter
2. Set the Pivot to (X:0.5, Y:0)
3. Re-enable the Aspect Ratio Fitter

Now, not only does the background always fit the size of the phone, the floor part will always stay in view!

Adding the Start Button

Now, that your game has a nice background with a label, it’s time to add some buttons.

From the top bar, choose GameObject ‣ UI ‣ Button. This will add a Button object to the scene. You should see it in the Hierarchy. If you expand it in the Hierarchy, you’ll see that the button contains a Text child — you’ll learn about these later.

Look at the button in the Inspector, and you’ll see it has the same Image component you used to add the background and the header label.

Additionally, there’s a Button component. In other words, a button is just an image with a child Text element and an attached button script.

Positioning the Button

Now it’s all about positioning and resizing the button. Follow these steps:

1. Select Button in the Hierarchy view and rename it to StartButton.
2. Set its Anchors to bottom-stretch, since you want it to stretch horizontally if the screen size changes. Tip: Hold Alt/Cmd and Shift when selecting the anchor to also set the position and pivot.
3. To further customize the anchors, set the X to (Min:0.2, Max:0.8)
4. Set both Left and Right to 123.
5. Set the Pivot to (X:0.5, Y:0)
6. Set Height to 80.
7. Set Pos Y to 300.

Then select the nested Text element and set its Text to Start Game. Change the Font Size to 32 to make the text of the button larger.

This is what you should see in the Scene view:

Now you have a button, but it needs a facelift! To make the button look good, you’ll set an image as its background and then use a fancier font.

9-Slice Scaling

You set the image for buttons and images in the same way. After all, they use the same component. However, images rarely scale, especially non-uniformly. Buttons, on the other hand, often come in different sizes.

You could create a background image for every single button size in your game, but why waste all that space? You’ll use a technique called 9-Slice scaling, which allows you to provide one small image that scales to fit all sizes.

There’s no magic involved here. This technique works by creating different images for each of nine zones, all of which scale differently.

This ensures the image will look good at any scale.

Preparing Button Images

Before you can use a sliced image, you need to set its nine zones. To do this, open the Menu folder in the Project window and select btn_9slice_normal image.

In the Inspector’s Import Settings, set Texture Type to Sprite (2D and UI) and apply the change. Next, click on the Sprite Editor button to open the Sprite Editor view.

In the Sprite Editor, set the Border values to L:14, R:14, B:16, T:16. Remember to click Apply!

Repeat the same process for the btn_9slice_highlighted and btn_9slice_pressed images, which you’ll use for different button states.

Setting Button Images

After preparing all your images, drag them to the corresponding fields in the Inspector. Select StartButton in the Hierarchy and follow these steps:

1. Change Image Type to Sliced in the Image component.
2. Change the Transition property in the Button component to SpriteSwap.
3. Drag btn_9slice_normal to Source Image in the Image component.
4. Drag btn_9slice_highlighted to Highlighted Sprite in the Button component.
5. Drag btn_9slice_pressed to Pressed Sprite in the Button component.

Before running the scene and enjoying your cool buttons, you’re going to change the font used by the nested Text label. This will make the button mega-awesome.

Setting a Custom Font for the Button

Using a custom font is easy. Remember the Fonts folder in the package you downloaded and added to the project? Now it’s time to break it out and use one of those fonts.

Select the Text element nested within StartButton in the Hierarchy. Then open the Fonts folder in the Project window and drag the TitanOne-Regular font into the Font field. Also set the Color to white.

Now run the scene and enjoy your new mega-awesome button! :]

Adding the Settings Button

There are a few things left to do. First, add the Settings button.

You can probably do this yourself, so you’re only getting the size and position of the button to start. The rest is almost identical to they way you created the Start Game button.

These properties of the Settings button are different:

• Name: SettingsButton
• Rect Transform: Left and Right are 400, Height is 70 and Pos Y is 180
• Text: Settings
• Fontsize: 24

[spoiler title=”Solution Inside: Need help creating the Settings button?”]

If you couldn’t quite do it, just follow these steps:

1. From the top bar, select GameObject ► UI ► Button. This will create a Button object in the scene.
2. Select Button in the Hierarchy view and rename it to SettingsButton.
3. Set the button Anchors to bottom-stretch. Then update the X to (Min:0.2, Max:0.8)
4. Set the Pivot to (X:0.5, Y:0)
5. Set both Left and Right in Rect Transform to 173.
6. Set Height to 70 and Pos Y to 180.
7. Set Transition in the Button component to Sprite Swap.
8. Make sure to set Image Type in the Image component to Sliced.
9. Open the Menu folder in the Project Browser and drag btn_9slice_normal to Source Image.
10. Then drag btn_9slice_highlighted to Highlighted Sprite.
11. And finally, drag btn_9slice_pressed to Pressed Sprite.
12. Double-click on Color inside the Image component and check if A is set to 255 to remove any transparency.
    
13. Select the nested Text label.
14. Change Text to Settings.
15. Set Font Size to 24.
16. Change Color to White.
17. Open the Fonts folder in the Project window and drag the TitanOne-Regular font into the Font field in the Inspector view.
    

[/spoiler]

This is what you should see in the Scene view after adding the Settings button:

Now Save your scene.