Creating the Main Menu
As an extend of Loading Scenes in Unity, in this Article I add a Main Menu, a crucial element figuratively serving as a ‘main artery’ throughout the project.
Often if not any Game or Application have a certain starting place, intended chiefly to greet clients and provide a primary list of options available to the user.
Branched into a row of key options, the Main Menu is usually the first menu that appears when the application is opened, and is intricately related to the majority of a program’s essential functions.
Main Menu’s come in many forms and shapes but generally share the same purpose, in this article I documented how I went about to create the Main Menu for the Galaxy Fighter project. I hope it may help you create your own program Menu’s.
Visual Layout
To get started I made a prototype for the Main Menu, one of the benefits of doing this is to get an idea of how it is going to look like in the end. It is basically a rough sketch, helping me to shape the Main Menu.
Creating the Main Menu Scene
To create the Main Menu prototype, I made a separate Scene called ‘MainMenu’ and added it to the Player Build Settings so we can load it through scripting later.
Then I created a new Canvas GameObject, renamed it to ‘MainMenu’ and set the Render Mode to Screen Space - Overlay, and UI Scale Mode to Scale With Screen Size.
The Background that I’ve added, a child of ‘MainMenu’, is nothing more than a greyish coloured placeholder for the background Image that I can replace later.
Creating the Game Titles
To correctly anchor the Game and Sub - Title Text fields which each have a different size, I created a GameTitlePanel that serves as an Anchor Parent.
It also makes it easier to make adjustments later on while keeping their relative position safely anchored to their own parent.
Another advantage is that if we were to make a prefab of this Panel, we can easily re-use it anywhere.
Creating the Button Panel
To display the primary list of options available to the user, I make use of a Vertical Button Row, later we just have to assign a OnClick Event to them.
To achieve this we first have to create a Parent Panel for the buttons, to this Panel we add a ‘Vertical Layout Group’ and specify its settings as following;
Now when we add another UI Element as a child, in our case a Button, some Rect Transform values will be driven by the VerticalLayoutGroup.
The first Button we add has its height set to 90 and the other Buttons are just copies of this Button with their Name and Text Label changed. You’ll notice that the duplicated Buttons are nicely arranged in a vertical fashion.
I removed the Buttons Source Images and greyed out the Load Game Button as we’ll tackle Loading and Saving Games in another Article.
Adding some Extra’s
To display some news or important updates I made a text field as wide as the screen, with underneath a darker coloured image making sure the letters are readable.
Later I’ll animate this text field so that it vertically scrolls from one side to the other.
I’ve also added a small Text Label in the left corner, indicating the current Game Version.
Functionality
Having our draft in place we can now get started with the Main Menu’s core mechanics. To the MainMenu Canvas, I added a new script called MainMenu.cs.
The MainMenu.cs works in a similar way as the UIManager.cs that we’ve been working with previously, so we also need to add the UnityEngine.UI namespace.
We are also going to need the SceneLoadingManager that we used in last article, so I created a new GameObject for this, and attached the SceneLoadingManager.cs to it.
The same goes for the GameManager.
In the MainMenu.cs, first I created a draft for all the functions that we need on the Main Menu, and grab a reference to both the SceneLoadingManager and GameManager, it looks like this;
Linking the Buttons
For the time being we’ll create a function for the New Game and Exit Buttons, the most important ones.
For the ‘NewGame’ Button, all we have to do is create a public method in which we access the SceneLoadingManager and load the first scene.
We just need to assign it in the OnClick function in the Inspector;
For the ‘Exit Button’ I first updated the GameManager.cs so that we have a public method to Quit the Game.
The script behaviour for quitting the game in the Player Build is different from the script behaviour in the Editor. That is because each built-in system requires its own internal code in order to be triggered correctly.
Going back to the MainMenu.cs we can now access the GameManager and run the Quit Game Logic in public void Exit().
Don’t forget to assign the Exit() function in the OnClick Event in the Inspector.
In this article we’ve learnt about the importance of a main menu, and how you can start building them in your own Projects, a draft really helps with the development process.
Without further ado, we can now continue to work on other parts of the Galaxy Fighter project.
← Previous | Next →
