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!
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:
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:
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!
Now with everything in place our Main_Menu Scene should look like this:
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:
Attached as a Child of our Button is the Text being displayed on Button. We’ll change this to read “New Game”.
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:
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:
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.
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).
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!
And just like that, our Main Menu can now start our Game!
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.
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!
