In this tutorial we’ll set up the overview menu and some menu related settings.
This tutorial continues the sub-series for setting up menu screens.
With our UI boxes and template HUDs finished, we’re finally ready to start setting up our menu screens. We’ll set up:
- an overview menu
- inventory
- equipment
- abilities
- group management
However, in this tutorial, we’ll only handle the actual setup of the Overview menu and add the others to be able to use them in it. We’ll also set up some other menu related settings.
Learn more about menu screens in this documentation.
Menu Related Settings #
First, we’ll set up some menu related things – the exit game question, a new UI layer for our background, default combatant selection. and default combatant choice layout.
Exit Game Question #
The exit game question can be displayed when exiting the game, e.g. via our Overview menu.
Navigate to UI > UI Settings and change the following settings.
Exit Game Question #
- UI Box
Select Blue Center Fit. - Text (Message Content)
Set to: Exit to the start menu? - Use Choice
Enable this setting.
This’ll show input buttons instead of using the ok/cancel buttons of the UI box.
We can keep the default yes/no button setup, i.e. yes button showing Yes and no button showing No.
While we’re in the UI settings, let’s check some of the default buttons.
Default Buttons #
These settings are a bit above the exit game question and handle Makinom’s default buttons.
This is where you can define the content of the default cancel button that can be added to some menus.
ORK UI Settings > Default Buttons #
These settings handle ORK’s default buttons.
This is where you can define the content of the default back, use or unequip buttons (and more).
Background UI Layer #
We’ll add a new UI layer to display our background above the flying texts, but below the UI boxes of layer 1.
Navigate to UI > UI Layers and add a new layer.
- Name
Set to Background.
Move the layer between 0: Flying Texts and 1: Layer 1.
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 Menu Center Scroll. - Only Battle Group
Disable this setting. - Battle Sorted
Enable this setting. - Remember Selection
Enable this setting. - Add Back Button
Select Last.
This’ll add a back button as the last input.
Combatant Choice Layout #
The combatant choice layout defines how input buttons to select combatants are styled – e.g. when used in a combatant selection or battle menu.
Navigate to UI > Text Display Settings, we’ll define the default layout here. Other menus can optionally override the default layout.
Combatant Texts > Default Combatant Choice Layout #
- Custom Input Prefab
Select the Empty Button prefab we created. - Content Type
Select None.
We’ll use a HUD instead. - HUD Type
Select HUD. - HUD
Select Combatant Information.
Now, our combatant selection and target selection (battle menu) will use our HUD template to show information about the combatant.
We’ll set up using the bestiary in a later tutorial – this’ll obscure enemy information (e.g. not showing HP/MP values) unless we learned that information using the ranger’s Study ability. For now, you’ll see this information about the enemies.
Menu Screen Setup #
We’ll set up our menu background (using the prefab we created earlier) and add all menu screens we’ll use before doing their actual setup.
This way we can already use them in our Overview menu to open the individual menus from it.
Menu Screen General Settings #
Navigate to UI > Menu Screens > General Settings.
General Backgrounds #
General backgrounds are displayed in all menu screens (unless they’re disabled by them). Unlike the Default Backgrounds (or individual backgrounds of menu screens), the general backgrounds will also stay on screen when transitioning between menus, as the other backgrounds are opened and closed with each menu screen.
Click on Add General Background.
- UI Layer
Select Background. - Prefab
Select the Menu Background prefab we just created.
Backgrounds can also use schematics to animate opening/closing them, just like UI boxes, HUDs or flying texts.
I’m using the simple fade in and fade out schematics from the UI animations schematics to animate this UI box.
- Before Open Schematic
Select the UIFadeIn schematic. - Wait
Enable this setting. - Before Close Schematic
Select the UIFadeOut schematic. - Wait
Enable this setting.
0: Overview #
Navigate to UI > Menu Screens, we’ll change the Default menu screen and add additional menu screens.
We’ll also set up the default settings for our menu screens – the others will just be copies adjusting the name.
- Name
Set to Overview.
Settings #
- Remember Selection
Enable this setting. - Single Screen
Enable this setting.
The menu screen can only be displayed alone instead of combined with other screens.
This is the default setup for new menu screens.
We’ll set up our menus to block showing notifications or flying texts, e.g. using an item or healing magic in the menu will not show flying texts.
- Pause Notifications
Enable this setting.
Already displayed notifications will be paused and hidden. - Block Notifications
Enable this setting. - Block Flying Texts
Enable this setting.
We’ll also pause the game.
- Pause Game
Enable this setting. - Freeze Pause
Enable this setting.
This’ll set the time scale to 0, halting all animation and other time-related functionality.
1: Inventory #
Copy the Overview menu and change the name.
- Name
Set to Inventory.
2: Equipment #
Copy the Inventory menu and change the name.
- Name
Set to Equipment.
3: Abilities #
Copy the Equipment menu and change the name.
- Name
Set to Abilities.
4: Group #
Copy the Abilities menu and change the name.
- Name
Set to Group.
With that we’re ready for the actual setup of the mens.
0: Overview #
Select the Overview menu again, we’ll set up an input key to open the menu and add some menu parts.
Menu parts are the individual parts that’ll display your menu’s content, each part handling a certain functionality, e.g. the Inventory part displaying item types and items in your inventory.
Menu Screen Settings > Settings > Call Screen Key #
- Use Call Key
Enable this setting. - Input Key
Select Menu.
You can optionally use a Menu Requirement to limit the menu call to certain conditions. However, menu screens can only be called when the player can be controlled, so that’s enough for our game.
Button List Part #
The Button List part is used to display multiple buttons, each having different functionality – e.g. we’ll add buttons to close the menu, open other menu screens or exit the game.
Scroll down to the bottom of the settings to see the Add Menu Part button.
Click on the Add Menu Part button and select Button List.
- UI Box
Select Blue Top Right Fit.
Click on Add Menu Item to add a button to the part.
- Type
Select Close. - Text (Button Content)
Set to Close.
Click on Add Menu Item to add another button to the part.
- Type
Select Menu Screen. - Menu Screen
Select Inventory. - Text (Button Content)
Set to Inventory.
Copy the Menu Item 1 instead of adding a new button.
- Menu Screen
Select Equipment. - Select Combatant
Enable this setting.
We’ll select the combatant that’ll be the user of the new menu. - Use Combatant Part
Enable this setting.
This’ll use a Combatant menu part that’s part of the same menu screen to select the new menu’s user. - Text (Button Content)
Set to Equipment.
Copy the Menu Item 2 instead of adding a new button.
- Menu Screen
Select Abilities. - Text (Button Content)
Set to Abilities.
Click on Add Menu Item to add another button to the part.
- Type
Select Menu Screen. - Menu Screen
Select Group. - Text (Button Content)
Set to Change Group.
Click on Add Menu Item to add another button to the part.
- Type
Select Exit Game. - Show Exit Question
Enable this setting. - Text (Button Content)
Set to Exit Game.
Combatant Part #
The Combatant part is used to display information of one or multiple combatants. When displaying multiple, each combatant will be displayed using an input.
Scroll down to the bottom of the settings to see the Add Menu Part button.
Click on the Add Menu Part button and select Combatant.
- UI Box
Select Blue Menu Center Scroll. - Combatant Scope
Select Group Battle Sorted. - Custom Input Prefab
Select the Empty Button prefab we created.
Entry Page 0 #
The Combatant part can show multiple pages of information, e.g. to create a status information menu, cycling through various content.
We’ll just use one page, so change the settings of the already added Entry Page 0.
- Add HUD
Enable this setting. - HUD
Select Combatant Information EXP.
Information Part #
The Information part is used to display any kind of information. We’ll use it to show the current area, gold and game time.
Scroll down to the bottom of the settings to see the Add Menu Part button.
Click on the Add Menu Part button and select Information.
- UI Box
Select Blue Bottom Left Fit. - Auto Update
Enable this setting.
We’ll display the game time, this’ll periodically update the text for us. - Update Every
This controls how often the udpate happens.
You can leave it at 0.1.
Information Page 0 #
Like the Combatant part, the Information part can show multiple pages of information.
We’ll just use one page, so change the settings of the already added Information Page 0.
- Text (Message Content)
Set to: <area.current.name><currency.inventory=2f15e4fb-ec14-4ce4-aecc-e99d6d6149c4> <currency.name=2f15e4fb-ec14-4ce4-aecc-e99d6d6149c4><time>
Please note that the GUID of your currency might vary, so please use the buttons above the text editor to add that information. Click on the More button while editing the text to show more text code options.
Add the In Inventory and Name text codes for the Gold currency.
Tip!
You can also change the GUIDs of your data by using the edit button beside the GUID information at the top of their settings.
And with that, our first menu screen is completed.
Save Changes #
And that’s it!
Don’t forget to save your changes by clicking on Save Settings at the bottom of the editor.
Testing #
Hit play and use the F1 key to call the overview menu. Don’t try to open any of the other menus, we haven’t set them up yet, so you’ll get stuck on an empty menu.
The overview menu works greath, though.
Selecting Equipment or Abilities will also allow you to select the user using the Combatant part, though accepting a combatant will still get you stuck.
Next, we’ll set up the remaining menu screens.
