In this tutorial we’ll begin the setup for our game’s menus.
We’ll start with some general settings:
- menu background prefab
- exit game question
- save game settings
- combatant selection
- start menu
Let’s get to it!
UI Background Prefab #
First, we’ll create another UI prefab – this time a background for our menus. Open the UI Environment Scene to create the prefab.
As usual, we can easily set this up using the scene hierarchy context menu: Makinom > UI > Background (Sprite)
This’ll create a UI background a bit larger than the canvas, we just need to adjust the Image component.
Image #
- Source Image
Select the White_16x16 sprite.
You can find it in Assets/Tutorial Assets/Images/UI/. - Color
Select a black color with about 4/5 filled alpha value (e.g. A=0.8 or A=200, depending on the color picker).
Create Prefab #
Create a prefab out of the Background game object by dragging it into the project view, e.g. name it Menu Background.
Don’t forget to remove the game object from the canvas.
UI Settings #
First, we’ll set up a dialogue that’s used when the player wants to exit the game.
Open the Makinom editor and navigate to UI > UI Settings.
Exit Game Question #
This dialogue can be shown when offering the player to exit the game, e.g. in menu screens.
- UI Box
Select Blue Center. - Text (Message Content)
Set to: Exit to the start menu?
Question dialogues can either use the accept/cancel keys (or buttons added to the UI box prefab), or offer choice buttons.
- Use Choice
Enable this setting.
The Yes Button and No Button texts are already set up as we need them (Yes and No).
Save Games #
Navigate to UI > Save Game Settings, we’ll take a look at the save games and set up the save menus.
Save Game Settings #
These settings handle the number of available save slots (and auto save slots) as well as where the save games are saved.
We’ll stick with the default setup:
- Save Slots
Set to 3.
Save File Settings #
These settings handle where the save game is stored – we stick with the default setup.
- Save File Type
Select Persistent Data Path.
Save Data Settings #
These settings define which game data will be part of the save game.
We’ll stick with the default setup, which will save most of the data.
File Settings #
Define the name of save files and content included in the file’s information (e.g. game time, area).
We’ll adjust the File Info to include some information about the saved game, the rest will be kept at the default setup.
File Info #
- Name
Set to: <filename> (<time>)
<playername>, Lvl <playerlevel>
UI Backgrounds #
We’ll use the Menu Background prefab we just set up to display a background in save menus.
Click on Add General UI Background.
- UI Layer
Select Background. - Prefab
Select the Menu Background prefab. - Before Open Schematic
Select the UIFadeIn schematic. - Wait
Enable this setting. - Before Close Schematic
Select the UIFadeOut schematic. - Wait
Enable this setting.
Pause Settings #
You can optionally pause the game while displaying save game menus, we’ll do that.
- Pause Game
Enable this setting. - Freeze Pause
Enable this setting.
This’ll set the time scale to 0, halting all animations, movement, etc.
Save Game Menu #
These settings handle the menu for saving the game.
- UI Box
Select Blue Center. - Add Cancel Button
Select Last. - Text (Message Content)
Set to: Select save slot:
Load Game Menu #
These settings handle the menu for loading a saved game.
- UI Box
Select Blue Center. - Add Cancel Button
Select Last. - Text (Message Content)
Set to: Select load slot:
Save Point Settings #
We don’t use save points (we can save at any time using the in-game menu), but we’ll set it up anyway.
- Show Choice
Enable this setting. - UI Box
Select Blue Center.
The default Save Button and Load Button setup is already what we need, but we’ll add a cancel button.
Cancel Button #
- Add Cancel Button
Select Last.
Combatant Selection #
Combatant selections can be used to select targets for abilities and items in menu screens – we’ll e.g. use this in ability and inventory menus.
Navigate to UI > Combatant Selections, we’ll change the Default combatant selection.
Base Settings #
- UI Box
Select Blue Center. - Only Battle Group
Disable this setting. - Battle Sorted
Enable this setting. - Remember Selection
Enable this setting. - Add Back Button
Select Last.
Start Menu #
The start menu is used to start a new game, load a saved game, exit the application and more. Learn more about the start menu in this documentation.
Navigate to UI > Start Menu.
Start Menu Settings #
- Start Menu Scene
Set to: Start Menu
This is the scene we want our start menu to show automatically (and return to on game over). - Auto Call
Enable this setting.
The start menu is automatically displayed in this scene.
New Game Settings #
- New Game Scene
Set to: Town
This is the scene that’ll be loaded when starting a new game (via the start menu).
We should already have our StartGame schematic set up as the Start Schematic.
Menu Options #
- UI Box
Select Blue Center.
A new project already has 3 options added to the start menu:
- New Game
Starts a new game. - Load Game
Opens the load game menu to load a save game. - Exit
Closes the application.
We’ll add another option to Continue the game from the last save game.
Click on Add Option.
- Option Type
Select Continue. - Hide Inactive
Enable this setting.
The button is not displayed if no save game to continue is available. - Auto Select
Enable this setting.
The button is automatically selected if a save game to continue is available. - Text (Menu Button)
Set to: Continue
Click on Move Up to move the Continue option up, until it’s the first option (Option 0) of the start menu.
Save Changes #
And that’s it!
Don’t forget to save your changes by clicking on Save Settings at the bottom of the editor.
Auto Saves (Optional) #
Let’s add auto save games – the game should save to the Auto Save slot each time after changing a scene. I.e. after entering a scene changer and a new scene was loaded, or after a battle was finished.
For this, we simply add a Save Point component in each scene that saves to the Auto Save slot instead of displaying a save point.
Creating a Save Point #
Open the Town scene and create a new, empty game object using the scene hierarchy’s context menu: Create Empty
Rename the game object to Auto Save and move it somewhere out of the way.
Add a Save Point component to the game object using the component menu.
Save Point Settings #
- Save Point Type
Select Auto Save.
Start Settings #
Click on Autostart to set it up to automatically start after loading the scene.
Save the changes you’ve made to the scene.
Other Scenes #
Copy the Auto Save game object in the scene hierarchy.
Open the Forest scene and paste the copied game object into the scene. Save the changes.
Open the Deep Forest scene and paste the copied game object into the scene. Save the changes.
And where’ done – the game will now automatically save to the Auto Save slot after loading into a scene. It doesn’t matter if we went through a Scene Changer or came from a finished battle.
Testing #
Hit play in the Start Menu scene.
You can now start the game from the start menu.
Next, we’ll add the in-game menus using menu screens.