Introduction to Unity UI – Part 3

Adding Buttons

You’re about to add three buttons to the sliding menu.

To create the first button, select GameObject \ UI \ Button. Rename it to Btn_About and remove the text child.

Drag the Btn_About button onto Pnl_Content in the Hierarchy to add it as a child. Open the Menu folder in the Project window and drag slide_menu_btn_about to the Source Image in the Inspector. Click Set Native Size.

Set Anchors to top-center and Pivot to (0.5, 1). After that, set both Pos X to 0 and Pos Y to 0.

Now it’s your turn to add two remaining buttons, all by yourself.

Name them Btn_Achievements and Btn_Leaderboards and use the slide_menu_btn_achievements and the slide_menu_btn_leaderboards images respectively.

If you need a nudge, feel free to open up the spoiler.

[spoiler title=”Adding More Buttons”]
Right-click on the Btn_About in the Hierarchy and select Duplicate. Yes, this time you’ll take the easy way. :]

Rename the duplicate to Btn_Achievements, change its Pos X to 0 its Pos Y to -64 and use the slide_menu_btn_achievements from the Menu folder in Project window as Source Image.

After that, duplicate the achievement button. Name it Btn_Leaderboards, set Pos X to 0 and Pos Y to -128 and use slide_menu_btn_leaderboards as the source image.
[/spoiler]

This is what you see in the end:

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]