Introduction to Unity UI – Part 1

Starting the Game

The final task for this part is to click the Start Game button and run the second scene in the game itself.

Adding Scenes to Build

Before you can run different scenes, you need to add them to the Scenes in Build list in the Project Settings.

To do this, on the menu select File ‣ Build Settings. This will open the Build Settings dialog. Then open the Scenes folder in the Project browser. First, drag the MenuScene and then the RocketMouse scene to the Scenes in Build list.

Finally, close the Build Settings dialog.

Creating UIManager

Here comes the 5% code part of the tutorial!

When you add an event handler to the button, you need to specify which method to call when you click the button. Since you can’t use static methods, you’ll need to select a public method from a script attached to a GameObject.

From the top bar, choose GameObject ‣ Create Empty. Then select GameObject in the Hierarchy view and rename it to UIManager.

Create a Scripts folder inside RW and then create a new C# script in it named UIManager. Once Unity compiles it, attach it as a component to your UIManager GameObject.

This is what you should see in the Hierarchy view and the Inspector view:

Double-click on the UIManagerScript in the Inspector to open the script in MonoDevelop. Once the script loads, remove both Start() and Update().

Next add the following statement underneath the previous using statements.

using UnityEngine.SceneManagement;

This allows you to load other scenes. Now, add the following:

public void StartGame() 
{
    SceneManager.LoadScene("RocketMouse");
}

Save the script and move on to the next step:

Calling StartGame When the Button is Clicked

Switch back to Unity and follow these steps:

1. Select StartButton in the Hierarchy and scroll down in the Inspector to the On Click() list.
2. Click the + button to add a new item.
3. Drag UIManager from the Hierarchy to the newly added item in the list.
4. Click on the dropdown to select the function. Right now, it’s set to No Function.
5. In the opened menu, select UIManagerScript and the select StartGame () in the menu that opens next.

Save the scene and then click the Play button to run the game. Click the Start Game button in the menu. This should open the game scene.

Where to Go From Here?

Stuck on any issues? Feel free to download the completed project for this part using the Download Materials button at the top or bottom of this tutorial.

It might feel like you didn’t do much in this last section, but take another look: You set up the UI, added images and buttons, and even wrote the code that starts the game when you click on the button!

In many games, that’s all that comprises the UI.

You also learned a lot about Rect Transform, Anchors and Pivot. Now that you understand them, you’ll be able to move much faster when you apply these skills to your own projects.

In part two of this series, you’ll learn how to animate UI elements, create dialogs, and use controls like Slider and Toggle. By the end of the series, you’ll have a working menu scene.

If you have any questions or comments please leave them below! See you in Part 2!