Introduction to Unity UI – Part 2

Animating the Settings Button

The Settings button should slide down the screen to make some space in the center for the dialog.

You can animate the settings button yourself! All you need to know is:

• Offscreen Pos Y should be -50.
• You don’t need to change anchors, since the button is already positioned relative to the bottom edge of the screen.

Give it a try on your own. Feel free to sneak a peek into the spoiler below.

[spoiler title=”Animating Settings Button”]
To create the slide down and slide up animation, as well as setup Animator states, follow these steps:

1. Select SettingsButton in the Hierarchy.
2. Open the Animation view.
3. Click on the Create button.
4. Name the animation SettingsButtonSlideOut and save it in RW ▸ Animations. This will also create the Animation Controller and will add the Animator component to the SettingsButton.
5. In the Animation view, click on the 1:00 mark of the timeline and make sure recording is on by clicking on the red circle.
6. In the Inspector, change SettingsButton Pos Y to -80. You don’t need to change anchors this time.
7. Stop recording by clicking the red circle button again.
8. Open the Animations folder in the Project window. Select SettingsButtonSlideOut, and uncheck Loop Time in the Inspector.
9. Select SettingsButton in the Hierarchy.
10. Now open the Animator view.
11. Copy and paste the SettingsButtonSlideOut state to duplicate it.
12. Select the duplicated state, which should be named SettingsButtonSlideOut 0. In the Inspector, change its name to SettingsButtonSlideIn, and change its Speed to -1.
13. Right-click on the SettingsButtonSlideIn state and select Set as Layer Default State.
14. Create a transition from SettingsButtonSlideIn to SettingsButtonSlideOut and then create a reverse transition.
15. Add a new Bool parameter named isHidden.
16. Select the transition from SettingsButtonSlideOut to SettingsButtonSlideIn, and in the Inspector, change Conditions to contain isHidden equals false.
17. Select the transition from SettingsButtonSlideIn to SettingsButtonSlideOut and change Conditions to contain isHidden equals true.
18. Select File ▸ Save to save your work so far and run the scene.
    [/spoiler]

This is what you should get in the end:

It’s nice to see the Settings button going up and down, but shouldn’t both buttons slide out simultaneously, just as they slide in at the start?

Yes! You’ll make that happen next.

Triggering Buttons Animation From the Script

Open the UIManagerScript that you created in the first tutorial, and add the following instance variables just inside the class definition:

public Animator startButton;
public Animator settingsButton;

After that, add the following method:

public void OpenSettings() 
{
    startButton.SetBool("isHidden", true);
    settingsButton.SetBool("isHidden", true);
}

That’s all the code you need. Save the script and switch back to Unity.

In Unity, select UIManager in the Hierarchy. Drag StartButton from the Hierarchy to the Start Button field in the Inspector and drag SettingsButton to the Settings Button field.

Then select SettingsButton in the Hierarchy and click + in the On Click () list. Drag UIManager from the Hierarchy to the new item in the list. After that, open the function selection menu and select UIManagerScript ▸ OpenSettings ().

Select File ▸ Save to save your work so far and then run the scene. Wait for the buttons to stop moving and click on the Settings button. You should see both buttons move out of the screen in opposite directions simultaneously.

Adding the Settings Dialog

Look at all that gorgeous free space you created! That seems like the perfect place for a dialog.

Creating the Panel

Usually, dialogs contain some other controls that appear and move with dialog. For that reason, it’s effective to create the dialog as a panel and set other UI Elements as child objects.

To create a panel, select GameObject ▸ UI ▸ Panel in the menu. This will create a full-screen panel that uses a white, semi-transparent image as a background. As a result, you should see some kind of full-screen veil.

However, this dialog won’t be full-screen; in fact, it’ll be relatively small. Follow these steps to set the dialog’s size and position:

1. Select Panel in the Hierarchy and rename it to SettingsDialog.
2. Set its anchors to middle-right, since you’ll position the dialog beyond the right edge and off the screen, so that it’s not visible when you run the scene.
3. Set Width to 400 and Height to 150.
4. Set Pos X to 220 and Pos Y to 0.

You should see a semi-transparent rectangle to the right of the canvas rectangle. All UI elements outside this rectangle are not visible on the screen. This is precisely what you want for the dialog!

Setting the Dialog’s Background Image

You’re going to use a 9-slice image as the dialog’s background. You need to set the border in the Import Settings first.

Open RW ‣ UI ‣Menu in the Project window and select settings_panel_bg_9slice. In the Inspector, click Sprite Editor to open the Sprite Editor view.

Set all Border values to 20 and click Apply at the top.

Now you can use this image as the dialog background.

Select SettingsDialog in the Hierarchy and drag settings_panel_bg_9slice to the Source Image field in the Inspector. Double-click on Color next to the Source Image field, and set A to 255 (or 1 depending on your color picker settings) to remove transparency.

This is what the dialog should look like after you set the background image:

Adding the Label

In its present state, it’s difficult to argue that the nondescript, green rectangle is actually a settings dialog, but there’s an easy way to fix this. All you need to do is to write Settings on it. Poof! Magic. :]

Right-click on SettingsDialog and choose UI ▸ Text to create a new Text UI element as a child of SettingsDialog. Select Text in the Hierarchy and rename it to SettingsLabel.

After that, select SettingsLabel in the Hierarchy and make the following changes:

1. Set Anchors to top-center.
2. Set Pos X to 0 and Pos Y to -40.
3. Change Text to Settings.
4. Open the Fonts folder in the Project window and drag the DCC – Dreamer font to the Font field in the Inspector.
5. Set Font Size to 30.
6. Set Alignment to Center Align.
7. Set Color to White, with A (Alpha) 255 to remove transparency.