My journey becoming a Unity game developer: Create a Main Menu

Objective: Create a Main Menu that will have the Title of the game, and a Start Game button. This button will allow the player to start a new game, plus show the different activities performed on this button through color.

Main Menu with Start Game button used to start the game.

To create a Main Menu for the game, create a new Scene (File->New Scene) name Main Menu, and save it in the Scenes folder.

New scene for the Game Menu created.

To create the Main Menu screen, select Create->UI->Image and name it Main_Menu_img which will also create a new Canvas to use the UI elements on. On the Main_Menu_img object, drag the game title’s image into the Source Image slot under the Image component to show. Check to make sure the image fills out the area properly by setting the Width and Height in the Rect Transform to the image’s width and height. Also, turn on the Preserve Aspect to ensure the image retains its existing dimensions. Make sure to set the UI Scale Mode to Scale with Screen Size under the Canvas Scalar component.

To change the background color, go to the Main Camera and under the Camera component change Clear Flags to Solid Color. Then, change the Backgrond to a Black color which will give the menu a dark background. If you want to add a background image, create an Empty game object name SpaceBG_Overlay. Reset the Transform’s positions, then add the SpaceBG_Overlay image into the Sprite slot under the Sprite Renderer component. Use the Rect Tool to make the overlay image fill out the entire screen.

Main Menu title screen created.

Next, add a new Button (UI->Button-TextMeshPro) that will be used to start a new game name New_Game_button. Position the button on the screen wherever you like the player to see it. Also, you can adjust the size of the button using the Rect Transform as well.

If you want the player to notice the activity status of the button, go down to the Button component. Inside this component, you can change the color of the button when you hover over it, click on it, and after the button has been pressed.

New button created to be used for starting a new game with different colors showing activity.

Now we need to create a new script name MainMenu, and attach it to the Canvas. Inside the MainMenu script, we need to create a new method name LoadScene(). Plus, we need to remove the Start() and Update() functions as we don’t them at this time.

Inside the LoadScene() method, we’re simply going to use the SceneManager to get Unity’s LoadScene() method to load the scene inside the Build Settings at Element(1) which will represent the game itself. To use the SceneManager we must add the namespace of using UnityEngine.SceneManagement to access the Scene Management’s library.

In the GameManager script, change the element number to (1) inside the SceneManager.LoadScene() method as this will reload the game for the player to restart playing.

Loading the Game scene through the Main Menu and Game Manger scripts.

With the New_Game_button selected, we need to use the LoadScene() method created in the GameMenu script. To do this, go to OnClick() which is a Unity Event that Unity invokes when a user clicks the button and releases it under the Button component. Drag the Canvas object into its slot, and in the Function slot go to MainMenu->LoadScene() to use the method.

We need to change the order of the scenes inside the Build Settings under Scenes in Builds with the Game Menu as Element(0) and the Game as Element(1) to work correctly within the LoadScene() method.

LoadScene() method added to New Game button, and Scenes in Builds order changed with Main Menu 1st.

Click on the Start Game button, notice the color changes according to the button activity at the moment, and get ready to start playing the game immediately.

Game scene loads after clicking on the New Game button.

If we want to have our name onscreen as part of the credits, create a new UI->Text-TextMeshPro object name Credits_text. Type in the Text field whatever credits you want the player to see which in our case was the creator of the game. Position the text wherever you like onscreen, adjust the Font Size, adjust the text’s Alignment within the text field, and select the Color the text will be. If you’re using Imported Fonts like we are but want to use regular fonts for the Credits part, change the Font Asset setting back to the original Font Asset which was LiberationSans SDF-Fallback for us.

Credits text object created to show who made the game on the title screen.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store