Creating a Simple Main Menu
This is the result.
- Before you start, you need to make sure you have designed the main menu screen. In this tutorial, I have designed the main menu on Adobe Illustrator.
I designed the main menu to have three buttons.
Play = Will start playing the game
Load = Open load screen
Info = Open Credits page
If you do not have Adobe Illustrator, you can use Inkscape. Unlike Illustrator, it is a free program. If you prefer working with raster images, you can use Photoshop or any drawing program that is available for you.
- Anyway, after designing, open your project and upload all your assets in the Library.
Make sure you do not accidentally export your image as one single image and properly separates them. For example, this is my background image which I will upload as an Image asset. It does not have buttons on it.
Meanwhile, these three are the buttons I will be working on in the Main Menu. I will be uploading as the Button asset.
Please be noted that a button has three different states known as Normal, Hovered and Clicked therefore, I have prepared three different images to indicate these three different states.
If you use different images for each state, make sure all the images are in the same sizes and carefully input the image in the right field.
- Once you have uploaded all of your assets, go to the scene and create a new scene. For the sake of simplicity, I will name it as the Main Menu.
- Set the Main Menu scene as the first scene. This will ensure this will be the first scene to play.
- Open the scene and add a new page.
- Click the Edit Page button and scroll down to enable [Stop page from automatically going to next page]. This will stop the page and will enable us to use the button.
- Add all related assets and enter the page timeline.
- Select Global.
- Choose Hide Textbox, Hide Text, and Hide Options.
- Open the image you will use as the background image and choose Show Image. This will make sure your image is showing.
- Next, open the Play button and choose Show Button animation command. Adjust the position of your button according to your design. Then, click Save Changes.
If you cannot see your button, you may have accidentally added buttons before the background image. To fix this, drag your background image all the way to the bottom.
- Repeat Step 8 to the rest of the buttons.
- Now, we will be adding action to the Play button to play the game.
First, save all your progress and go back to the scene map. Click on the Main Menu scene and right-click to add a branch. Then, connect the branch to your next scene.
Once you are done, open the Main Menu scene again and enter the page timeline.
Open the Play button and add the Action command.
Assign the button to go to the next scene you have just connected with a branch just now.
- Next, we will be adding action to the Load button.
Save all the progress and go to Screen.
Add a new screen and we will name it Load screen.
Click on the Load screen and set it as Load screen.
Go back to the Main Menu scene and enter the timeline.
Open the Load button and add an action command.
Assign the Load button to open the Load screen.
- Finally, we will add action to the Info button and make it show the credits page.
Add a new page and enable the [Stop page from automatically going to the next page].
Enter the Page 1 timeline, add credits image (if you haven't) and select the Credits image. Make sure the Credits image is above all current assets.
Choose Show Image and adjust the position if needed.
Add a Close button to the page and Show the button. Adjust the position of the button as much as you need.
Then, add action to the Close button to go to Page 0.
Go back to Page 0 and select the Info button.
Add the Action command to the Info button and assign it to go to Page 1 where the credits image is shown.
- This is the last step, select the Credits image while still in Page 0 timeline and choose Hide Image. Then, select the Close button and hide the button as well.
This will close the credits page.
- You are done. Feel free to add background music or soundtrack if you feel the Main Menu is a bit too silent. Do not forget to save changes
This is the result.