Setting up a basic pop-up menu

The last example we will cover in this chapter will utilize the Canvas Group component. We won't be able to really see this component in action until we start programming in Chapter 4, The Event System and Programming for UI, but we can lay the groundwork now. We'll also get a bit more practice with laying out UI with this example.

To create the pop-up menu shown in the preceding image, complete the following steps:

1. Create a new Canvas using Create | UI | Canvas.
2. In the Canvas Inspector, change the name to Popup Canvas.
3. I want to use the same properties for the Canvas Scaler on this Canvas that I used for the HUD Canvas. Instead of setting up all that again, I'll use a shortcut and copy the Canvas Scaler from the HUD Canvas. To do so, select the cog in the right-hand corner of the Canvas Scaler component on the HUD Canvas and select Copy Component.
4. Now select the cog in the right-hand corner of the Canvas Scaler component on the Popup Canvas and select Paste Component Values.
5. We will add a panel that will hold all the items, similar to the way we did with the HUD. This will ensure that everything stays together as it should. Right-click on Popup Canvas and select UI | Panel. Rename the new Panel as Pause Panel.
6. Place the uiElement_32 image in the Source Image slot, give it a full alpha value, and select Preserve Aspect.
7. Set the Rect Transform properties, as shown in the following screenshot, and ensure that you hold Shift + Alt when selecting the Anchor Presets:

8. Now let's give the Panel a nice banner at the top. Right-click on Popup Panel and select UI | Panel. Rename the new Panel to Pause Banner.
9. Place the uiElement_27 image in the Source Image slot and select Preserve Aspect.
10. Set the Rect Transform properties, as shown in the following screenshot, and ensure that you hold Shift + Alt when selecting the Anchor Presets:

We'll add the text to this banner in a later chapter.

The main point of this example was to demonstrate the use of the Canvas Group component (and to give you a little more layout practice). You can add a Canvas Group to any UI object. The Canvas Group will then be applied to all the children of the object on which you applied it. We will eventually put more pop-up panels on this Canvas, and we will want to be able to control each of them separately, so I will put the Canvas Group on the Pause Panel. Select Pause Panel, and then select Add Component | Layout | Canvas Group (you can also just search for Canvas Group).

That's it for now! Change the values of Alpha in the Inspector of the Pause Panel, and you will see that as you change it, both the Pause Panel and the Pause Banner alpha values change. This is great for pop-up menus you want to hide a show without having to program each item individually. Once we spend more time with this Pause Panel, it will have a lot more items on it, and we will be happy that we don't have to program each piece individually.