Creating a Main Menu

Well, we’ve started into Scene Management now, previously learning how to Restart our Scene and reload our Game. So this is the perfect place to add a Main Menu to the game.

We’ll be doing this by creating a new scene, integrating UI buttons, and updating our Build Settings so our Scene Manager can interact with the new Main Menu in code!

Fancy Main Menu… with a Button!

Create the Main Menu Scene

First thing’s first, we need a new Scene to have our Main Menu on. You could have a Main Menu overlay like we did with the Game Over screen in the Game Scene, but for the sake of cleanliness we’ll create a brand new Scene:

Create a new Scene in our Scenes folder in the Project Window

Name it Main_Menu and once it’s created, double-click on the Scene to enter into it.

If you’re prompted with a Save your Game Scene message, then do so.

Next we’ll add a background, and create a Canvas for our Menu. Within this Canvas we’ll also add an Image.

The Hierarchy should look something like this now:

Main_Menu Hierarchy

With our Image that was provided, it’s a little too big for screen size at the moment. When you normally click and drag a bottom corner, there is no consistent scaling which could result in a skewed resizing.

ProTip: holding Shift when scaling in the Rect Tool will preserve the HxW ratio, giving you a consistent scaling option!

Hold Shift for consistent scaling

Now with everything in place our Main_Menu Scene should look like this:

Main_Menu

Creating a UI Button

Now we’ll need something clickable to Start our New Game from within the Main Menu. This is where UI Buttons shine!

Creating a Button is easy — right-click on the Canvas, down to UI, and select Button:

Creating a UI Button

Attached as a Child of our Button is the Text being displayed on Button. We’ll change this to read “New Game”.

Some new Text for our Button

Button Highlights:

UI Buttons can be pretty powerful for such a simple thing. One feature I really like that requires no extra coding is the ability to change the Buttons highlight when you scroll over it with a mouse!

There is also a bunch of other settings you can tweak and play around with, but for the purpose of our Main Menu, a simple Highlight will do the trick:

Buttons Highlights! Better than the 90's!

Interacting with the Button in Code

We’ve got the foundation set up, now it’s time for the inner workings — the code!

We’ll first create a MainMenu script and attach it to our Main Menu Canvas:

MainMenu script created

Then we’ll go into our Build Settings and add our Open Scene and rearrange it so that our Main Menu is the first Scene in the order. This ensures that our Menu will be the first Scene loaded when starting the Game.

Updating our Build Settings

Now we’re ready to update our code!

Inside the MainMenu script we’ll create a public function called StartGame(). The logic inside this function will Load our Game, now updated to be Scene Index 1 (since our Menu is now 0).

MainMenu code

Next we’ll utilize our Button’s OnClick() function.

Select the Button in the Hierarchy, then we’ll drag our Canvas down to the On Click() section of the button.

This will enable us to select any Public function from any attached script. We’ll be using our StartGame() function we just created!

Connecting functionality to our Button

And just like that, our Main Menu can now start our Game!

Working Main Menu!

But before we move on, we need to update our GameManager script too! Since our Main Menu is now Scene Index 0, we need to update our Restart Game logic.

**If you had chosen the String reference method earlier, this doesn’t apply.

Updating our GameManager script

It’s really starting to feel like a full fledged game now! In the next articles we’ll be working on some VFX for the Enemies, Player, and a new way to start our Game!

Audio Engineer turned Unity Game Dev. Will be combining both my skillsets when appropriate, and will be documenting my Unity Dev growth in these Medium Articles

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