Introduction to Unity UI – Part 3

Making the Panel Slide Up and Down

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

Follow these steps:

1. Select ContentPanel in the Hierarchy and open the Animation view.
2. Create a new clip by clicking on the Create button.
3. Name the animation SlidingMenuDown and save it to RW ▸ Animations.
4. Click on the 1:00 mark in the timeline and 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 RW ▸ Animations in Project window and select SlidingMenuDown. Uncheck Loop Time in the Inspector.



7. Select ContentPanel in the Hierarchy and open the Animator view. Copy and paste the SlidingMenuDown state to create a duplicate.



8. Rename the duplicate SlidingMenuUp and set its Speed to -1 in the Inspector.



9. Create two transitions: one from SlidingMenuUp to SlidingMenuDown, and one the opposite direction.



10. Add a new Bool parameter named isHidden and set its default value to true.



11. Select the transition from SlidingMenuUp to SlidingMenuDown, and in the list of conditions, set isHidden to true.



12. Select the transition from SlidingMenuDown to SlidingMenuUp, and this time set conditions to be isHidden equals false.



13. Next, right-click in the Animator, 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 SlidingMenuUp. Set the condition so that isHidden is equal to false.



15. Select ContentPanel 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! Save your work again. Unfortunately, when you run your game, nothing happens. You’ll make things move in code.

Adding Code to Toggle the Menu

Open the UIManagerScript in a code editor and add the 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 ContentPanel from the Hierarchy to the Content Panel field in the Inspector.

Now, select SlideMenuButton in the Hierarchy. In the Inspector, find a list of On Click () 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 menu, select UIManagerScript ▸ ToggleMenu ().

Save your work, run the scene and relish in your cool sliding menu.

Adding a Rotating Gear Icon

Don’t you think something is missing? Of course! The rotating gear icon on the opening button itself — the one shown in the animated GIF image at the start of this part.

Adding the Gear Image

First, add an image as a child object of SlideMenuButton, and set it to animate during the menu opening and closing animations.

Right-click on SlideMenuButton and select UI ▸ Image to create a new image as a child object.

After that, follow these steps:

1. Rename the image GearImage.
2. Open RW ▸ UI ▸ Menu in the Project window and drag the slide_menu_gear image to the Source Image field in the Inspector.
3. Click Set Native Size.

Animating the Gear Image

By now, creating two animation states and a parameter to switch between them is probably second nature. You may 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:

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

If need more detailed directions, open the spoiler below.

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

Then, click on the 1:00 mark in the timeline and enable recording. 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 GearRotateOpen. In the Inspector, uncheck Loop Time.

Now, set up states. Select GearImage in the Hierarchy, open the Animator view and do the following:

1. Right-click the Animator and choose Create State. Then choose Empty.
2. In the Inspector, name the state GearIdle.
3. Right-click GearIdle and select Set as Layer Default State.
4. Duplicate the GearRotateOpen state by copying and pasting it.
5. Rename the duplicate to GearRotateClose 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 GearRotateOpen to GearRotateClose, and isHidden to false for the reverse transition.
8. Create a transition from GearIdle to GearRotateOpen. Set the isHidden condition to false.

[/spoiler]

Triggering the Gear Animation from Code

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

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

public Animator gearImage;

Then, scroll down and find ToggleMenu. 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 contentPanel animator’s isHidden parameter.

Save the script file and switch back to Unity.

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

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

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

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