Introduction to Unity UI – Part 3

Updating the RocketMouse Scene to use Unity’s UI

In the RocketMouse game, a few UI elements use the old GUI method to display: the points scored and the button to restart the game. You’re going to replace them with new text and image UI elements, and a dialog that allows you to restart the game or exit to the main menu.

Adding the Points Label

Switch to the RocketMouse scene and open the Scenes folder in the Project window. Double-click on the RocketMouse scene to open it.

Choose GameObject \ UI \ Text to create a new Text UI element. You’re also going to work with Canvas and EventSystem while you’re in here.

Select Text in the Hierarchy and make following changes in the Inspector:

1. Rename it to Txt_Points.
2. Set Anchors to top-left.
3. Set Pivot to (0, 0.5).
4. Set Pos X to 50 and Pos Y to -30.
5. Change Text to 0, since the player starts with zero points.
6. Open the Fonts folder in the Project window and drag TitanOne-Regular to the Font field in the Inspector.
7. Set Font Size to 24.
8. Set Horizontal Overflow to Overflow to make sure the label can display even the most outrageous scores.

Also, don’t forget to change the color of the text to be white.

Adding a Points Icon

Nowadays, simply displaying text to show the points is not enough. You need to make sure that it’s perfectly clear what this text means from the moment the player’s eyes see it.

Yes, players these days are spoiled by impressive UI on even the simplest apps, so you need to add an icon to make the score perfectly crisp, clear and well-defined.

Select GameObject \ UI \ Image to create a new Image. Select it in the Hierarchy and follow these steps:

1. Rename it to Img_Points
2. Drag it over Txt_Points to add it as a child, so that when you move the label the icon moves, too.
3. Set Anchors to middle-left.
4. Set Pivot to (1, 0.5).
5. Set both Width and Height to 32.
6. Set Pos X to -5 and Pos Y to 0.
7. Open the Sprites folder in the Project window and drag the coin image to the Source Image field in the Inspector.

Note: This time you do not click Set Native Size, because you’re going to reuse the image for coins in the game, which will be a bit bigger than the icon.

Updating the Points Label

Most of the code of the game lives in the MouseController.cs script, so you’ll edit this script to update the points label. In fact, until the end of this tutorial, you’ll only work with this script.

Note: Normally, I’d break this huge script into several smaller chunks, but I don’t want you to waste your time on housekeeping, especially because refactoring will take more time and will require a strong understanding of existing code.

It’s better to work with it in a big ol’ block so you can just make the small changes needed and move on with your life.

Open the Scripts folder in the Project window and double-click on the MouseController script to open it in a code editor.

When the script loads, find and remove following methods, which use the old GUI system:

• onGUI
• DisplayCoinsCount
• DisplayRestartButton

Add the following using directive:

using UnityEngine.UI;

After that, add the following instance variable to contain a reference to the label:

public Text coinsLabel;

Finally, add the following line at the end of CollectCoin(), which is called every time the mouse collects a coin.

coinsLabel.text = coins.ToString();

Save the script file and switch back to Unity.

In Unity, select mouse in the Hierarchy and drag Txt_Points to the Coins Label field in the Inspector.

Run the scene and send the mouse out to collect a few coins. You should see the label update when he collects a coin.

Everything is looking good, but you might have noticed one rather embarrassing problem. When you removed the old onGUI method you also removed the button that displayed when the mouse dies, leaving the player unable to restart the game. Doh!

Adding a Restart Dialog

I think you’ve got a good handle on the new GUI system and can create this dialog without a bunch of prodding from me. So create a panel with a label and two buttons that looks like this:

Place it in the center of the canvas.

Come back when you’re done – you’re on your own, friend!

Gotcha? :] Of course I’m not going to leave you hanging. If you’d like a step-by-step, just open up the spoiler below.

[spoiler title=”Solution”]

1. Create a new Panel using GameObject \ UI \ Panel and rename it to Dlg_Restart.
2. Set Anchors to middle-center.
3. Set both Width and Height to 200 and both Pos X and Pos Y to 0.
4. Use the settings_panel_bg_9slice image from the Menu folder as the Source Image for the panel.
5. Double-click on the Color field in the Inspector and set A to 255 to remove transparency.
   
6. Create a Text element by selecting GameObject \ UI \ Text and rename it to Lbl_YouLose.
7. Drag Lbl_YouLose over Dlg_Restart to add it as a child element.
8. Set its Anchors to top-center, Pos X to 0 and Pos Y to -40.
9. Use the DCC-Dreamer font from the Fonts folder. Set Font Size to 30.
10. Set Alignment to Center Align and Horizontal Overflow to Overflow.
11. Change Text to You Lose :[
12. Set the text Color to completely white (no transparency).
13. Create a new Button using GameObject \ UI \ Button and rename it to Btn_Restart.
14. Drag it over Dlg_Restart to add it as a child.
15. Set its Anchors to top-center, Pos X to 0, Pos Y to -100.
16. Set its Width to 135 and Height to 45.
17. Use btn_9slice_normal as Source Image.
18. Select the nested Text element and set its Font to TitanOne-Regular, Font Size to 18 and Color to completely white (no transparency). Set the value of the Text field in the Inspector to Restart.
19. To create a second button, simply right-click on Btn_Restart and select Duplicate. Name it Btn_Exit. Set its Pos Y to -160. Then select the nested text element and change its Text to Exit.

[/spoiler]