2D Galaxy Shooter — Main Menu with a “New Game” Button

Hello all!

Today, I will go over how to make a Main Menu with a working button that will start the game!

Make the Main_Menu Scene

Just like the Starting_Scene from my last article.

1. Make a new scene in the Scenes folder.
2. Rename it “MainMenu”.
3. Select the Camera and look at the Camera component.
4. Change the flags to Solid Color, and Background to black.
5. Get the picture you used for the background and drag it into the scene.
6. Save the scene, then head back to the game scene.
7. Select the Background there, and head to the Transform component.
8. At the “3 dot” drop down menu, click “Copy component”.
9. Head back to the MainMenu.
10. Select the Background there, then hit the same 3 dot menu, and select the “Paste Component values”. This should make the background look exactly like the one in the Game scene.

Title Screen Display

1. Find a good .PNG or make a Title Screen with your own sprite with your chosen sprites so things look uniform.
2. Create a UI element “Image” under Canvas, and name it “Title_Screen_img”.
3. Drag the title screen sprite you found/made to where it says Source Image under the Image component, then click Preserve Aspect.
4. Position and size it to where you want it, then anchor it to the closest place you can.

Adding Buttons to the UI

1. Create a UI element “Button” under Canvas, and name it “New_Game_button”.
2. Position and size it to where you want it, then anchor it to the closest place you can.
3. Under the Button component, there are several features you can add to the button, like when you hover over the button, it changes color.
4. The Button has a text element as a child, select the text element.
5. Under the Text component, set the Text to “New Game”.
6. Press the play button and test it out, it won’t do anything but you can see it press down when you click it!

Build Settings - Part 2

When you are looking at the window, you are able to drag and drop the scenes from the Assets folder onto the screen. Delete what is already there, then add them in order: 0 = MainMenu, 1 = Starting_Scene, and 2 = Game.

When you build the game, it will start the game on whatever scene is first. So if the Game scene = 0, then the end-user won’t start on the MainMenu scene, they will just be thrown into the game.

Go through the GameManager and Starting_Game_UI scripts and change the string “Game” to 2. Using the number instead of the string uses less resources anyway.

MainMenu Behavior

1. Create a new folder in the Scripts folder called Main_Menu.
2. In the new folder, make a script called MainMenu.
3. Link the script to Canvas.
4. Open the script and enter the code above. You don’t need Start or Update.
   - Remember to add the SceneManagement library to load scenes.

• As you can see in my comment beside LoadScene(1);, 1 = Starting_Scene.
  This will help developers later if they want to add mods to the game and change things up their way.
• This method will be called when we press the “New Game” button after we reference it.

Press Button, then Start Game!

Time to link the script to the button.

1. Select the Button, then look in the inspector.
2. Under the Button component, find where it says “On Click()”.
3. Where it says “None (Object)”, drag in Canvas. This will act like “GetComponent<>”.
4. Where it says “No Function”, follow the image above. This will call the LoadGame() method when the button is clicked, then will start the Starting_Scene, then countdown to the Game scene!

That’s how to make a pretty sweet UI! You can create your credits by making a UI text element and making it how you want!

Next, I will get into Visual Effects (VFX) for enemies and the Player!

Thank you for your time!