Introduction to Unity UI – Part 3

Making the Panel Slide Up and Down

To make the panel slide up and down, you’re going to use the same technique you’ve already employed for buttons and the settings dialog.

It will be easy, just follow these steps:

1. Select Pnl_Content in the Hierarchy and open the Animation view.
2. Create a new clip by clicking on the Create button.
3. Name the animation sliding_menu_down and save it the Animations folder.
4. Click on the 1:00 mark in the timeline. This should also enable recording in the Animation view. Turn it on by pressing the red circle button, and then look for the playback controls to turn red.
5. Set the Top to 192 in the Inspector and then stop recording.
   
6. Open the Animations folder in Project window and select sliding_menu_down. Uncheck Loop Time in the Inspector.
7. Select Pnl_Content in Hierarchy and open the Animator view. Copy and paste the sliding_menu_down state to create a duplicate.
8. Rename the duplicate to sliding_menu_up and set its Speed to -1 in the Inspector.
9. Create two transitions: from sliding_menu_up to sliding_menu_down and from sliding_menu_down to sliding_menu_up.
10. Add a new Bool parameter named isHidden and set its default value to true.
11. Select the transition from sliding_menu_up to sliding_menu_down, and in the list of conditions set isHidden to true.
12. Select the transition from sliding_menu_down to sliding_menu_up, and this time set Conditions to be isHidden equals false.
13. Next, right click in the Animator and select Create State and then choose Empty.
    
14. In the Inspector, name the state idle. Next, right click the state and choose Set as Layer Default State. Create a transition between idle to sliding_menu_up. Set the Condition as isHidden is equal to false.
    
15. Select Pnl_Content in the Hierarchy and open the Animation View. Create a new animation clip and call it idle.
    
16. In the first keyframe, set the Top to be 192. Then Stop the recording.

That’s it, 16 easy steps! :] Select Save Scenes to save your work so far. Unfortunately, when you run your game, nothing happens.

Adding Code to Toggle the Menu

Now it’s time to make things move and you’ll do this in code. Open the UIManagerScript in a code editor and add following instance variable:

public Animator contentPanel;

After that, add the following method:

public void ToggleMenu() 
{
    bool isHidden = contentPanel.GetBool("isHidden");
    contentPanel.SetBool("isHidden", !isHidden);
}

This enables the animator component when you open the sliding menu and sets the correct isHidden parameter value.

Save the script and switch back to Unity. In Unity, select UIManager in the Hierarchy and drag Pnl_Content from the Hierarchy to the Content Panel field in the Inspector.

Now, select Btn_Slide in the Hierarchy. In the Inspector, find a list of On Click (Button) event handlers and add a new one by clicking the + button.

After that, drag UIManager from the Hierarchy to that new handler. Then, in the function selection dropdown, select UIManagerScript \ ToggleMenu ().

Select Save Scenes to save your work, run the scene and relish in your cool sliding-up-and-down menu.

Adding a Rotating Gear Icon

There is something missing, don’t you think? Oh, of course! The rotating gears icon on the opening button itself — the one shown in the animated GIF image at the start of this part.

Adding the Gear Image

Your first step is to add an image as a child object of btn_slide, and animate it during the menu opening and closing animations.

Choose GameObject \ UI \ Image to create a new image. Drag it over Btn_Slide in the Hierarchy to add it as a child object.

After that, follow these steps:

1. Rename the image to Img_Gear
2. Set the Anchors to middle-center
3. Set both Pos X and Pos Y to 0.
4. Open the Menu folder in Project window and drag the slide_menu_gear image to the Source Image field in the Inspector.
5. Click Set Native Size.

Animating the Gear Image

By now, the technique of creating two animation states and a parameter to switch between them should be second nature. So, you should be able to create a left-rotating gear and reverse the animation to make a right-rotating gear on your own.

Here are the need-to-know details:

• Animation duration should be identical to the sliding panel animation, and this is easy since all animations in this tutorial are exactly 1 second long.
• The gear should rotate 360 degrees around the Z axis (Rotation Z).
• Use the same name isHidden for parameter name and set its default value to true.
• Remember to disable looping and the Animator component.

Should you find that you need more detailed directions, feel free to open the spoiler below.

[spoiler title=”Rotating the Gear”]
Select Img_Gear in the Hierarchy and open the Animation view. Create a new clip by clicking on the Create button and name it gear_rotate_up. Save it in the Animations folder.

Then click on the 1:00 mark in the timeline. After that, in the Inspector, change Rotation Z to 360.

Stop recording by clicking the button with a red circle.

Now open the Animations folder in the Project window and select gear_rotate_up. In the Inspector, uncheck Loop Time.

Now, it’s time to set up states. Select Img_Gear in the Hierarchy, open the Animator view, and then follow these steps:

1. Right click the Animator, and choose Create State, then choose Empty.
2. In the Inspector, name the state gear_idle
3. Right click gear_idle and select Set as Layer Default State.
4. Duplicate the gear_rotate_up state by copying and pasting it.
5. Rename the duplicate to gear_rotate_down, and change its Speed to -1 in the Inspector.
6. Add a new Bool parameter named isHidden, and set its default value to true.
7. Create two transitions between states. Under conditions, set isHidden to true for the transition from gear_rotate_up to gear_rotate_down, and isHidden to false for the reverse transition.
8. Create a transition from gear_idle to gear_rotate_up. Set isHidden condition to false

[/spoiler]

Triggering the Gear Animation from Code

To complete the sliding menu control, you need to trigger the gear animation from code, but you only need to write a few lines.

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

public Animator gearImage;

Then scroll down and find the ToggleMenu method. Add the following to the bottom of the method’s body:

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

    gearImage.SetBool("isHidden", !isHidden);
}

This enables the Animator component and sets its isHidden parameter to the same value as the content panel’s Animator isHidden parameter.

Save the script file and switch back to Unity.

In Unity, select UIManager in the Hierarchy. Drag Img_Gear to the Gear Image field in the Inspector.

Save Scenes your work and run the scene and enjoy your fancy rotating gear icon.

Good job! The sliding menu is complete and your scene is coming together.

You’re not going to handle clicks on the buttons in the menu, because you should be already familiar with handling UI events and actually integrating Game Center would send this tutorial down a rabbit hole. Instead, you’re going to update the old GUI-based RocketMouse scene so that it uses the new GUI system.