My journey becoming a Unity game developer: Main Menu: Main Menu Music and Start button activated

Objective: Use music to play in the background while the Main Menu screen is displayed. Also, setup the Start button to start a new game when the user clicks on the button.

Main Menu with background music playing and the Start button activating a new game.

Begin with the Canvas game object selected, and add the Audio Source component to it. Drag the Main Menu Music audio clip into the Audio Clip setting’s slot. Make sure the Play on Awake and Loop is turned on so the music plays as soon as the menu appears onscreen and repeatedly. Adjust the Volume to a level that you find comfortable to listen to which was .7 in our case.

Audio source component created with the Main Menu Music audio clip added to the Canvas object.

As we play the game, we will hear the Main Menu Music audio clip playing right as the fade in leads into the Main Menu screen.

Main Menu Music playing in the background as the menu appears onscreen.

Next, create a script folder inside of the Scripts folder itself to organize the scripts that will be used for the Main Menu directly name Menu. Create a new C# script name Main Menu inside the Menu folder that we will use to activate the Start and Quit buttons.

Menu folder created with a new script name Main Menu inside of it.

Add the Main Menu script to the Canvas object so we can now control the menu through code.

Inside the Main Menu script, we need to add the Unity Engine Scene Management namespace to the script as we will need access to the Scene Manager to load the main game scene.

Create a new method name StartGame(), and inside this method use the SceneManager.LoadScene() method. The parameter that will be passed to the LoadScene() method name is “Main” which is the game’s scene name.

Create another method name QuitGame(), and inside this method use Application.Quit() method to quit the game.

In the Hierarchy select the Start game object under the Canvas object. Come down to the On Click() event function setting, and drag the Canvas object into the Game Object’s slot. Click the function drop-down list, place the mouse pointer over the word Main Menu, and select the StartGame() method.

Go to the Quit game object, and follow the same steps as we did with the Start button game object. The only difference is that we will select the QuitGame() method to use when we click on the Quit button.

When we go to the Main Menu and click on the Start button, we will see that it doesn’t work.

The reason the Start button isn’t working is because the Fade game object has Raycast Target enabled. Unity considers the image a target for raycasting which is not what we want the Fade image to be. We just want the image to be a simple animated image. Turn off the Raycast Target to make sure the image isn’t being used as a raycast target.

Now play the game and click on the Start button. We will see the Intro Cutscene start playing after several seconds.

Clicked on the Start button to start playing the game.

We can also change the highlight color of the button when we place the mouse pointer over the button. With the Start game object selected, go to the Button component and change the Highlighted Color to the color of your choice. There are other settings located in the Button component that will allow us to manipulate the color of the button according to which action is being done on the button.

Start button highlighted color is changed.

Next time we will work on a Loading Bar because we will notice that it takes around 10 or more seconds for the game to load after clicking on the Start button as this 3D game has a large amount of assets that need to load. Therefore instead of waiting at the Main Menu screen for the game to load, we will use a Loading Bar screen to give the user an impression that the game is loading while on this screen.