Introduction to Unity UI – Part 3

Update 20th December 2016: This tutorial was updated to Unity 5.5 by Brian Moakley. Original post by Kirill Muzykov.

Creating sliding menus in Unity is now a snap!

Creating sliding menus in Unity is now a snap!

In Part 1, you created a menu scene, complete with an adaptive background and neatly controlled graphical elements, thanks to expert-level use of anchors, pivot and other cool tricks.

Part 2 was all about animating buttons and actions to make your game uber-interactive.

Now you’re going to build on these skills to round out your understanding of Unity’s UI, but you’re not going to stop with a fancy new menu. You’ll also migrate the RocketMouse game scene from the old legacy GUI system to the new UI system!

Getting Started

Start off by opening the Unity project at the point where you left it at the end of Part 2. If you tinkered with your old project file to a point beyond recognition — or skipped the last part — you can download the starter project for Part 3 here: Rocket Mouse part 3 Starter Project. Unpack it and open it in Unity.

Strap yourself in, this tutorial is about to get real.

Creating a Sliding Menu

In many cases, you want to provide your users easy access to some game options or features, but don’t want to waste space on the screen. This is a job for a sliding menu.

You’ve seen these before: they’re a control that comprises a small, unassuming button that is always visible and a menu that slides out to reveal options. Your first step is adding that button.

Adding an Open Button

You should already know how to add a button after working through the first two parts of this series, but if not, the following directions should be ample for you to accomplish the task.

Select GameObject \ UI \ Button in the menu. Rename the newly added button to Btn_Slide and remove the nested Text object, since the button won’t need a label.

Select Btn_Slide in the Hierarchy and open the Menu folder in the Project window. Drag the btn_9slice_normal image to the Source Image field in the Inspector.

Now set the button position and size as follows:

1. Set Anchors to bottom-left.
2. Set both Pos X and Pos Y to 80.
3. Set Width and Height to 64.

And that’s how simple it is to complete the first step.

Add the Masking Panel

To create this control, you’re going to need two panels. One will define the mask and the other will move within the mask.

Note: If you’re not entirely sure what a mask is, don’t sweat it. Just follow the steps and you’ll see how it works in real-time. You’ll need to have both panels to see it in action.

Select GameObject \ UI \ Panel to create the first panel that will be the mask. This will add a Panel to the Hierarchy. Select it and follow these steps:

1. Rename it to Pnl_Mask.
2. Drag it over Btn_Slide to add it as a child object.
3. Set Anchors to top-center.
4. Set Pivot to (0.5, 0)
5. Set both Pos X and Pos Y to 0.
6. Set Width to 64 and Height to 192.
7. Add the mask component by clicking Add Component button and selecting UI \ Mask.
8. Uncheck Show Mask Graphic inside the mask component dialog.

Note: You don’t always have to add the panel with a mask as a child node of the button. But when you do, you ensure that when the button moves, the masking panel moves with it.

Adding the Content Panel

Add another panel by selecting GameObject \ UI \ Panel and following these steps:

Note: Did you notice that you can see only a small portion of the white panel, although its size didn’t change? After adding it as a child of the panel with a mask, you now only see the portion of pnl_content that is inside the rect of pnl_mask.

1. Rename it to Pnl_Content
2. Add it as a child of Pnl_Mask

   Note: Did you notice that you can see only a small portion of the white panel, although its size didn’t change? After adding it as a child of the panel with a mask, you now only see the portion of pnl_content that is inside the rect of pnl_mask.

3. Set the Anchors to stretch-stretch.
4. Set Left, Top, Right and Bottom to 0.
5. Set Pivot to (0.5, 1)

Now it’s time to change the background image for the content panel.

Open the Menu folder in the Project window and select the slide_menu_panel_9slice image. Open Sprite Editor in the Inspector and set all Border values to 8. Click Apply!

After that, select Pnl_Content in the Hierarchy, and then drag slide_menu_panel_9slice from the Project window to the Source Image field in the Inspector.

On the following GIF, you can see both how the content panel should look and how the mask component works. Now you see it, now you don’t

Note: As you can see, a mask works similarly to a window in a wall. If someone is walking along a wall, you can only see him when he passes by a window. Another way to think of it is as a cloaking device that allows only a portion of the image to show through.