Daily Progress: Creating the Main Menu
Making a main menu is really easy! You’re just making a dedicated canvas in its own file, so let’s start, this is from a course called 2D Mobile Adventure Game from GameDevHQ so I’ll be using their courses main menu as an example. While the elements here are specific, they are general enough to transfer the knowledge you glean here to your project.
Create a new scene and call it Main_Menu
We have a background image we’ll need to use in a canvas. While you can create a canvas and then an image under it, you can just create the image first and Unity will create the canvas for it eliminating a step!
Select the canvas and change the render mode to Screen Size Overlay. In Canvas Scaler, change to Scale with Screen Size and set the resolution to 1920 x 1080.
Time to make the background! rename the Image to BG, and drag the BG image into the source slot, press the alt key and select the anchor in the lower right to Set All Sizes as well as centering it automatically.
Duplicate the BG image and rename it to Title, drag the title image into the source. tick the ‘Preserve Aspect’ and hit the native size button to automatically resize the image. Then place it to the right of the scene.
Next is the background Symbol. Duplicate the text image, rename it Symbol, and do everything we did with the title. if the symbol appears above the title, drag the symbol up in the heirarchy, so the list appears as:
BG
Symbol
Title
The symbol is a bit overpowering, so let’s tone it down by choosing color, and bringing down the alpha to around 70–80 percent, and we’ll tint it a little red as well. It’s all subjective so change settings to what you feel is right.
Next it’s time to create the buttons: select the canvas and create button, we’ll call it Start_Button and change the image source to the Start Button Image. Set to native size and preserve aspect. We can also disable or delete the text element. I’ll just disable it. Also anchor it to the center and then place it in the left lower circle of the image.
Duplicate the Start button and call it Menu, swap graphics and place it next to the start button.
Repeat for the Quit button.
And our menu is now created! Save the scene now, it’s time to create the MainMenu script and we’ll attach it to the Canvas.
We’ll want to create functions for the Start and Quit Buttons, the Start button will load the Game, and the Quit button will..well…quit the game.
Let’s start with the quit button since this is the easiest challenge to solve. Unity has a function just for this:
The Start button requires a bit of preparation since we’ll be using Unitys SceneManager. In order for the SceneManager to work correctly, all scenes need to be placed in the games build space. Let’s make sure that’s the case:
Open File/Build Settings
It appears neither the game or Main Menu is in the build! Drag the Main Menu and Game into the build window. While it’s important to do this in order, you can rearrange the items later if you make a mistake.
When you place the scenes in the build, you’ll notice there’s a number assigned to them. The main menu is 0, and the game is 1. This can actually simplify things for when we code our start button. Usually when using the scenemanager, you type in the name of the scene, but if you know it’s number, you can just use that instead. We’ll do that for our case.
Before we do anything, let’s make sure we’re using the SceneManagement namespace:
now in the Start Button routine, we know that our game scene is scene 1, so:
Finally, let’s attach the functions to the buttons, select both and add an OnClick event, then drag the Canvas into the source slot since that holds our MainMenu script.
Selecting the start button individually now, select MainMenu/StartButton, and select the appropriate fucnction for the quit. Unfortunately, my screen capture couldn’t capture the window but you’ll know what to choose when you see it.
save the scene and test it! The quit button won’t work in Unitys editor because it will only work in an executable, but just know it’ll quit the game. We can check the start button, however:
Magnificent! Tomorrow we’ll talk about publishing to the google play store!
