My journey becoming a Unity game developer: Main Menu: Create and Animate the Main Menu

Objective: Create a Main Menu with a Start and Quit buttons. Also, add animations for the fade in effect to lead into the menu, and for the title of the game to appear onscreen.

To begin creating a Main Menu, let’s create a new scene with File->New Scene. Select Basic which gives you the Main Camera and Directional Light by default.

New scene created for the Main Menu.

Next, create an Image for the background using the Create arrow and UI->Image. Name the image as Background, drag the Main Menu BG image into the Source Image slot under the Image component. Select the Anchor Presets, then select the Stretch preset and Alt-left click to set its Rect Transform positions to zero which will make the Main Menu image fill up the entire screen.

Background image created with the Main Menu BG image added.

Also under the Image component, please make sure to turn on the Preserve Aspect ratio setting to keep the image from being stretched too much as it fills up the entire screen and looking distorted.

Preserve Aspect turned on to keep the image from being to stretched and blurred.

Create another image by right-clicking on the Canvas object and name it Title Img for the game’s name title image. Drag the Title image into the Source Image slot under Image as well. Turn on Preserve Aspect and set the Anchor Presets to Stretch with the Rect Transform positions to zero as well.

Title image created with the game title added.

Now create the Start button by right-clicking on the Canvas object and name it Start. Move the button down below the Title’s name, and set the Anchor Preset to the lower-right corner. Then change the button’s background color to a color of your preference which in our case was yellow.

Click the arrow next to Start and select the Text object. In the Text field, type START to show the word inside the button. Change the Font Size to around 30 pixels which will fill the button from top to bottom. Under the Paragraph setting, change the Horizontal and Vertical Overflow to Overflow so the text in the button fills in properly. Change the Color of the text to a color of your liking which in this case was blue.

Start button created with text and color adjusted.

Another way to setup the Start button is to select the Start game object, and go to the Color setting. Change the Alpha setting to zero as this will make the image of the button disappear. Then in the Text object, change the Color of the text to a color you would like standing out on its own which in this case we used black.

Start button created with the alpha turned down.

To create the Quit button, just duplicate the Start button and drag the button to your right of the Start button. In the Text field change the name from Start to Quit.

Start button duplicated to create the Quit button.

To create a fade in effect to the Main Menu, right-click on the Canvas object and create another new Image name Fade. Set its Anchor Preset to Stretch and Rect Transform positions to zero so the image takes up the entire screen. Change the image Color to black so the entire screen is now blacked out.

Fade image created for fading in an out of the Main Menu.

To create the animation for the fade in effect, select the Canvas game object. Open the Timeline editor using Window->Timeline, and create a new timeline name Main Menu Timeline inside the Timeline folder.

Main Menu Timeline created for the fade effects.

Create a new Animation Track and drag the Canvas object into its slot. Click the REC button and click on the Fade game object. To create the 1st keyframe, go into the Color setting and move the Alpha slider to the 255 value mark which will set it to black. The 2nd keyframe will be created at the one second mark by moving the Alpha slider to the zero value mark.

To animate the Title, go back to the beginning of the timeline and click on the Title Img object. Set the Left Rect Transform to 245 as this will move the title to the right position onscreen from the title’s original position. Also, change the Alpha in the Color setting to zero to make the title start from a fade out effect. Go to the 3-second mark, change the Left Rect Transform back to zero which will move the title back to its original position, and change the Alpha to 255 to make the title fade in completely.

Fade out and in effects created with the Title image animation included.

The fade in effect and title animation is working, but the animation is moving rather quickly into its position. Go to the Samples setting, and change the frame rate to a value which animates the effects onscreen to something suitable to your preference which in this case was a value of 30 for us.

Title animation adjusted to move slower across the screen.

One other thing is if you would like to have the title animate from small to full size, go back to the Timeline editor and double-click on the Canvas timeline to open the Animation Tab. At the beginning of the timeline, select the Title Img Scale, and change the transforms to zero. This will make the Title Img animate starting from nothing on the screen.

Adjusted the scale of the Title to animate from nothing on the screen in the beginning.

Next time we will add some background music to play with the Main Menu.