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, both to display the points scored and the button that restarts the game. You’ll 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 by opening RW ▸ Scenes 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 here.

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

1. Rename it PointsText.
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 RW ▸ UI ▸ Fonts 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.
9. Change the Color of the text to white.

Adding a Points Icon

Displaying text to show the points isn’t enough. You need to make sure it’s clear what this text means from the moment the player sees it. Add an icon to make the score 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 PointsIcon.
2. Drag it over PointsText 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 RocketMouse ▸ sprites in the Project window and drag the coin image to the Source Image field in the Inspector.

Updating the Points Label

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

Open RocketMouse ▸ Scripts 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 the 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 find the MouseController component. Drag PointsText 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 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. Oops!

Adding a Restart Dialog

Create a 200px * 200px 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!

Just kidding. For a step-by-step guide, open the spoiler below.

[spoiler title=”Solution”]

1. Create a new Panel using GameObject ▸ UI ▸ Panel and rename it RestartDialog.
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 1 (or 255 depending on your range settings) to remove transparency.
6. Create a Text element by right-clicking on RestartDialog and selecting UI ▸ Text. Rename it to YouLoseLabel.
7. Set its Anchors to top-center, Pos X to 0 and Pos Y to -40.
8. Use the DCC-Dreamer font from the Fonts folder. Set Font Size to 30.
9. Set Alignment to Center Align and Horizontal Overflow to Overflow.
10. Change Text to You Lose :[
11. Set the text Color to completely white (no transparency).
12. Create a Button as a child of RestartDialog and rename it RestartButton.
13. Set its Anchors to top-center, Pos X to 0, Pos Y to -100.
14. Set its Width to 135 and Height to 45.
15. Use btn_9slice_normal as Source Image.
16. 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.
17. To create a second button, right-click on RestartButton and select Duplicate. Name it ExitButton. Set its Pos Y to -160. Then select the nested text element and change its Text to Exit.

[/spoiler]

Displaying the Restart Dialog

Instead, of animating the dialog, you’ll hide the dialog at the start and show it when the player loses the game.

Open the MouseController script in a code editor and add the following instance variable:

public GameObject restartDialog; 

Then, add the following line of code to Start to hide the dialog at the start:

restartDialog.SetActive(false);

Scroll down and add the following line to the end of HitByLaser:

restartDialog.SetActive(true);

As you may have guessed, HitByLaser is called when the mouse dies. It’s the perfect place to display a restart dialog.

Now you need to handle the buttons on the restart dialog. Add the following two methods to restart and exit the game:

public void RestartGame() 
{
    SceneManager.LoadScene(SceneManager.GetActiveScene().name);
}

public void ExitToMenu() 
{
    SceneManager.LoadScene("MenuScene");
}

You’ll link them to the corresponding buttons in a moment.

Save the script file and switch back to Unity.

In Unity, select Mouse in the Hierarchy and drag RestartDialog to the Restart Dialog field in the Inspector.

Then select RestartButton in the Hierarchy and scroll down to the On Click () list.

Click + to add a new item. After that, drag Mouse from the Hierarchy to the new item. In the function selection dropdown menu, select MouseController ▸ RestartGame ().

Now, select ExitButton, and repeat the process, but this time select the MouseController ▸ ExitToMenu () function.

Save and run the scene and send your mouse into the laser’s line of fire. You should see a dialog appear instantly after he dies. If you press Restart, you’ll restart the game. If you press Exit you’ll return to the main menu.