Feature Highlight: Create an Animated Main Menu in Unity

Our gameplay is just about wrapped up and we’re ready to implement our main menu. In this guide I’ll cover a couple cool features to add style to your menus.

Creating the Main Menu

Step 1 is to create a new scene for our main menu where we will add all of our menu assets. This game, The Great Fleece, comes packaged with a few assets for this menu so we will implement those here. Right click in the hierarchy and select UI -> Image to add a background image.

Drag your image into the Source Image field and check the “Preserve Aspect” box. Next update the Rect Transform to the blue bottom right anchor setting so that we will anchor the image edge to edge. Change all of the Left/Right/Top/Bottom/and ZPos margin values to zero and your background should now fully stretch across the screen.

We have a background! We also have a Title image asset here which we implement with the same exact process as the background image.

Back on the Canvas GameObject be sure to change the Canvas Scaler from Constant Pixel Size to Scale with Screen Size.

Now our Main Menu is set up to look proper on any screen size. We want two buttons here — Start and Quit — and we add those by right clicking in the Hierarchy and selecting UI -> Button. We drag the button into place, update the text, increase the font size, and darken the font color to a pure black. One tip is to also change both the Horizontal and Vertical Overflow settings to “Overflow” so that your text does not disappear if it grows larger than the button container.

Finally, because we want this button to be text only and we actually want to hide the white button background, we can click back to the Image component of the Button and change drag the Alpha Channel from 255 down to 0 which will effectively hide our background. Now we can duplicate this button and update the text to “Quit” and move it into place, and we have a pretty good looking menu!

Animating the Main Menu

The vision for this menu is that we first fade into it from black, then fade in the Start and Quit buttons, and bring our title in from the side getting bigger and bigger as it goes until we reach this final position.

To create a black fade to alpha we create a new UI image with a black color and stretch it the full width of the screen so our screen is blacked out. One more important step here — because this fade image will be animating on top of our game buttons we need to deselect “Raycast Target” on the black screen image component. Otherwise when our menu is complete, although the fade image will be hidden by a 0 alpha value the system will still consider it to be covering our buttons and it will not allow them to be clickable. Once this is set we can animate the Alpha channel to make our black screen disappear and have our menu appear behind it:

To begin animating this menu we need to create a timeline for our event sequencing. Select the Canvas then navigate to the Timeline window, click Create, and save a new timeline.

First, to animate the fade, we add a new Animation Track and drag in our Canvas, creating a new Animator component in the process. Press record and select the Black Screen Image and reset the alpha value to 255 at the first keyframe for 0:00. Move the marker 1 second and then drag the alpha down to 0 at that point.

Second, to animate our buttons, at the 1 second mark select the text components of the Start and Quit buttons and change the alpha to zero. Move the marker to the 3 second point and set those values back to 255.

Third, to animate the title, also at the 3 second mark and on the Title game object reset all of the Rect Transform position values to 0 (our final position). Now move the marker back to 0:00 and add 500 to the Left padding value which pushes our title to the far right.

Now we can stop recording and with that we have an animated main menu!

To add even more life to this screen we can also add background music by adding an Audio Source to the canvas. Make sure Play on Awake and Loop are turned on and you will get the behavior you are looking for when the menu loads up.

In the next guide I’ll cover adding a loading screen between our main menu and the playable game that has a loading progress bar to provide feedback to the player. See ya there!