Beginner, Tutorials, Uncategorized, Unity3D

Unity3D Animated Pause Menu, Part 1: Setting up the UI

Today, we’re going to start building an animated pause menu in Unity3D. We’ll go through setting up the UI, animating the UI elements, creating the animator controller / state machine to transition from unpaused to paused, and actually pausing the game in response to player input. We’ll even get into a bit of polish and shine by making the game visible but blurred while the game is paused.

Here’s a preview of the finished product:

Pause menu animating in and out with example gameplay in background
Pause Menu in Action (click for higher quality)

Setting up the UI

Let’s get started! First things first, we’ll want to add a UI canvas (Create > UI > Canvas) if the scene doesn’t already have one. Since part of the pause animation involves the various components swooping in from off-screen, we want to make sure that our pause menu elements never accidentally appear on screen until we want them to.

Canvas Scaler Component With that in mind, go ahead and add a Canvas Scaler component to the Canvas GameObject. This controls how the UI elements parented under the canvas are scaled at various resolutions. I like to use Scale with Screen Size with a Reference Resolution of 1024×768, but you can set the reference resolution to whatever works for you. Either way, set the Match property to 0.5 to take screen width and screen height into account equally. This should help avoid situations where the edges of your pause menu UI elements become visible at higher resolutions.

Now we need to create the menu itself. The transition I have in mind is for the background panel of the menu to come in from one side, the buttons and text of the menu to come in from the other, and the game name or logo to drop in from above. This means that, while I would normally add the buttons as children of the background panel, I’m going to need to add the buttons to a sibling object of the panel. This will allow me to animate them separately without conflicts.

Anchor Presets
Anchor Presets
After adding the background panel (Create > UI > Panel), you’ll want to open the anchor presets by clicking on the crosshair-looking box in the upper left of the panel’s Rect Transform and shift-click the middle button to set the anchor and pivot of the panel to the middle of the screen. Then you can change the width and height of the panel. I chose 300 x 330 for a nice, chunky-looking box.

Now to create the content (buttons and text) that will go into the box. Select the canvas and add an empty child (Create > Create Empty), name it something like “Panel Contents,” then repeat the steps that you followed for the background panel: set the anchor and pivot to the middle of the screen, and give it the same height and width as the background panel. I added some text that reads “Paused” and set the anchor/pivot to stretch across the top of the container, then added another empty child to the Panel Contents game object, called “Buttons.”

On the Buttons game object, add a Vertical Layout Group component, which will automatically position our menu buttons in a nice column. Set Child Alignment to “Upper Center”, and make sure the width and height buttons are both checked for Child Force Expand, ensuring that the buttons use all the available space inside the layout group. Set padding and spacing values to whatever looks good to you: padding is how much space will be between the edge of the menu box and the buttons, and spacing controls how much vertical space there is between buttons. If you’re not sure, start with 10 and adjust from there. Make sure the anchor and pivot are set to the center of the container for the “Buttons” object, and give it a little space on Top in the Rect Transform so that the buttons don’t overlap with the “Paused” text.

The last step is adding a logo or other game text above the menu, which is just a text UI object with its anchor set to the top middle of the screen. If you’re using text and it vanishes when you try to make it larger, either increase the width and height of the text’s Rect Transform, or set Horizontal and Vertical overflows to “Overflow” in the text component’s Paragraph section.

The Situation so Far
The situation so far

In the next post, we’ll work on the animation that we’ll use for the pause transition.

Implementation Notes

The font I used was Bungee Regular, which is available under the SIL Open Font License.

If you need help with a color palette, searching “material design color palette” online can give some great examples to get you started. In particular, I like to use the colors provided by clrs.cc while prototyping.

Leave a Reply