Daily Progression: Main Menu Layout!

Objective: Create a Main Menu Scene!

What is the first thing you see when you start a game? The Main Menu. In this tutorial we are going to create a main menu Scene for the mobile game we’ve been making.

To begin, select File > New Scene. (CTRL + N)

To stay organized rename the new scene. Save the scene and name it “Main_Menu”

A main menu is typically made up of a series of UI elements, similar to how we created the shop keeper menu. That being said we need to create a UI image.

This is going to be the background image. Select canvas, we will want to be sure this image will fit everyone’s screen size. Set the render mode to Screen Space Overlay.

Set UI scale mode to scale with screen size and the reference resolution = 1920 x 1080

The image is going to be our background image so label it as such.

Here is where you will select your image you are using for your background and set it to the source image.

With BG selected adjust the rect transform. The anchor needs to be set to scale all sizes and zero out the transform.

Next we are going to create a title. Duplicate the BG (CTRL + D) and rename it “Title”

Set the image you are using for a title to the source image.

Set the anchor to center.

Adjust the width and height to the size of the image.

position your image.

Now we are going to create a symbol image. Duplicate the title image and rename “symbol”

Set the source image to your sprite.

Anchor to center, Set the width and height to the image size, and position the image.

I want my symbol to be behind the title image to do that move the symbol behind the title in the hierarchy.

Now I change the color and lower the alpha to give it a darker aesthetic.

Time to move on to the buttons. We need a button a start button, menu, and quit. Right click canvas > UI > Button.

Label as “Start_Button” Set your source image and the width and height just as we have been.

Clear the text field under the button.

Position the button.

Duplicate the start button and rename “Menu_Button” and set the source image. Drag the menu button to position.

Duplicate the menu button, rename “Quit_Button” Set the source image and position the new button.

This completes our layout for the Main Menu. In the next tutorial we are going to set the functionality for this and add this scene to our game. Don’t be afraid to experiment with your layout and I’ll see you in the next tutorial!