Introduction to Unity UI – Part 2

Animating the Settings Dialog

Now you’ve got a legitimate Settings dialog. The next step is to make it appear when the user clicks the Settings button.

You’re going to use almost exactly the same technique as you did to make the buttons slide in and out, the only difference being that the dialog won’t slide in automatically after the scene starts.

Select SettingsDialog in the Hierarchy and open the Animation view. Then create a new animation by clicking Create.

Name the animation SettingsDialogSlideIn and save it in RW ‣ Animations.

Then click on the 1:00 mark in the timeline and make sure recording is started, or start it manually by clicking the record button.

In the Inspector, set Anchors to middle-center and Pos X to 0.

Stop recording the animation. Open the Animations folder in the Project window and select SettingsDialogSlideIn in the Inspector. Finally, uncheck Loop Time.

Select SettingsDialog in the Hierarchy and open the Animator view. Copy and paste the SettingsDialogSlideIn state to duplicate it. Rename the duplicate to SettlingsDialogSlideOut, and set its Speed to -1.

Click the + button and add a new bool parameter named isHidden.

Create two transitions between the states, just as you did for the buttons. Then add the isHidden parameter of type bool.

Change the condition of the SettingsDialogSlideOut => SettingsDialogSlideIn transition to be isHidden equals false. For the SettingsDialogeSlideIn => SettingsDialogSlideOut transition, change the condition to isHidden equals true.

Next, right-click in the Animator and select Create State and then choose Empty.

In the Inspector, name the state Idle. Next, right-click the state and choose Set as Layer Default State. Finally, create a transition between Idle to SettingsDialogSlideIn. Set the Condition as isHidden is equal to false.

It should look as follows:

Select File ▸ Save to save your work so far and then run the scene. You’ll see the dialog sliding in at the start and overlapping the buttons.

This is getting there, but it’s still not what you want. You need to disable the Animator component so it won’t play the animation at the start. You want the dialog to appear on demand, which you’ll do next.

Displaying Dialog on Button Click

Disable the Animator component so it won’t play the animation at the start by setting the default value for the isHidden to true. Click on some empty space in the Animator window and set isHidden to true:

Now when you run the scene, the dialog doesn’t appear straight away, which is good; however, it won’t show up even when you click the settings button. This is not good.

Open the UIManagerScript and add the following instance variable:

public Animator dialog;

Then add the following line to the end of OpenSettings:

public void OpenSettings() 
{
    //..skipped..

    dialog.SetBool("isHidden", false);
}

This enables the Animator component and sets the correct value to the isHidden parameter.

Finally, add a new method called CloseSettings, as follows:

public void CloseSettings() 
{
    startButton.SetBool("isHidden", false);
    settingsButton.SetBool("isHidden", false);
    dialog.SetBool("isHidden", true);
}

This returns the buttons and hides the dialog. You’ll add the UI element that calls this method in a moment.

Save the UIManagerScript and switch back to the Unity editor.

Select UIManager in the Hierarchy and drag SettingsDialog to the Dialog field in the Inspector.

Run the scene. Then click the Settings button and see how the buttons slide out as the dialog slides in.

That’s better, but you can’t close the dialog. To fix this, you need to add a close button to the dialog.

Adding a Close Button

Create a new button as a child of the SettingsDialog by right-clicking on it in the Hierarchy and selecting UI ▸ Button. Rename this new button to CloseSettingsButton. Also, this button won’t have text on it, so remove the Text object nested in CloseSettingsButton.

This is what you should have in the Hierarchy at this point:

Now, select CloseSettingsButton and follow these steps:

1. Set Anchors to top-right.
2. Set both Pos X and Pos Y to 0.
3. Open RW ‣ UI ‣ Menu in the Project window and drag settings_btn_close to the Source Image field in the Inspector.
4. Click Set Native Size.

This is how the dialog should look in the Scene view now:

The button looks great, but it does nothing. Fortunately, you’ve already added the method this button needs to call.

Select CloseSettingsButton in the Hierarchy. Scroll down to the On Click () list and click +. Drag UIManager from the Hierarchy to the new item, and then select UIManagerScript ▸ CloseSettings () method in the dropdown.

Select File ▸ Save to save your work so far and then run the scene. Click the Settings button and close the scene by clicking Close after the dialog slides into the scene.

Hey, you’ve done well. That looks nice! :]

Adding Sound Settings

There’s not much sense in keeping a meaningless settings dialog, so it’s time to add some settings to it. In this dialog, the player will have control over the music’s volume in the menu scene.

Music? Yes, what fun is a game without a rockin’ soundtrack?

Adding Music to the Menu Scene

You’re welcome to rummage around your files for a suitable clip, but you don’t have to because the project already contains a snappy music track. All you need to do is to play it.

Select Main Camera in the Hierarchy and add the Audio Source component. Then, in the Project window, open RocketMouse ‣ Audio and drag Music to the Audio Clip field in the Inspector.

Enable Play On Awake.

Toggling Music On and Off

To toggle music on and off you’re going to use a — wait for it — toggle control. Right-click on SettingsDialog and select UI ▸ Toggle to add a toggle UI element as a child of the dialog.

The toggle controls consist of the root object, which has a toggle component attached, and several child objects:

• Background: An image that is always visible (i.e. in both on and off states)
• Checkmark: An image that is only visible when the toggle is active (ON)
• Label: A label displayed next to the toggle

You don’t need a label this time, so remove the nested Label. Then rename Toggle to SoundToggle. This is what you should see in the Hierarchy after you’re done:

Select SoundToggle in the Hierarchy. Set its Anchors to middle-left, Pos X to 115 and Pos Y to -10.

Keep in mind, changing the Anchors and Pivot won’t change the UI element position. Instead, they update position fields (e.g., Pos X, Pos Y, Left, Right) to values that position the element at the same place by using the new anchors and pivot. Set these first and play with them to set the correct position.

Also, under the Toggle component, uncheck the Is On checkbox.

Now you need to specify images for the Background and Checkmark child objects. Just as you’ve done with the other images, you will take them from RW ‣ UI ‣ Menu, so open that folder in the Project window.

You’re going to need two images:

• settings_btn_sound for Background
• settings_btn_sound_checkmark for Checkmark

Select the Background child of SoundToggle in the Hierarchy and drag settings_btn_sound from the Project window to Source Image in the Inspector. Then click Set Native Size.

Select Checkmark and repeat the previous steps, but this time use the settings_btn_sound_checkmark image from the Project window.

This is what you should see in the Scene view: