In this tutorial we’ll set up the in-game menus.
In-game menus are created using menu screens. We’ll set up the following menu screens:
- overview
- inventory
- equipment
- ability
Let’s get to it!
Menu Screens #
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 #
Open the ORK editor and navigate to Menus > Menu Screens and select the 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: Menu Background - Before Open Schematic
Select: UIFadeIn - Wait
Enable - Before Close Schematic
Select: UIFadeOut - Wait
Enable
0: Overview #
Select the Default menu screen.
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 - Single Screen
Enable
The menu screen can only be displayed alone instead of combined with other screens.
This is the default setup for new menu screens. - 2nd Call Closes
Enable
Calling the screen again (e.g. via an input key) will close it.
We’ll block controls and also block showing notifications or flying texts, e.g. using an item or healing magic in the menu will not show flying texts.
- Block Player Controls
Enable - Block Camera Controls
Enable - Block Control Maps
Enable
Control maps allow binding actions to input keys.
We don’t use them in this tutorial series, but you can learn more about them in this documentation. - Pause Notifications
Enable
Already displayed notifications will be paused and hidden. - Block Notifications
Enable - Block Flying Texts
Enable
We’ll also pause the game.
- Pause Game
Enable - Freeze Pause
Enable
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
With that we’re ready for the actual setup of the mens.
Overview Menu Screen #
Select the Overview menu again, we’ll set up an input key to open the menu and add a menu part.
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 content types and items in your inventory.
Base Settings > Settings > Call Screen Key #
- Use Call Key
Enable - Input Key
Select: Menu - Audio Type
Select: Custom
We’ll play an audio clip when opening the menu via the key. - Audio Clip
Select: chainmail1
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, call the save menu 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 Center
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.
- 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
We’ll select the combatant that’ll be the user of the menu we open. - 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: Skills & Magic
Click on Add Menu Item to add a new button.
- Type
Select: Save - Text (Button Content)
Set to: Save
Click on Add Menu Item to add a new button.
- Type
Select: Exit Game - Show Exit Question
Enable - Text (Button Content)
Set to: Exit Game
And with that, our first menu screen is completed.
Inventory Menu Screen #
The inventory menu will allow us to use items on our player group members.
Select the Inventory menu screen.
Inventory Part #
The Inventory part is used to display the contents of the player’s inventory.
Scroll down to the bottom of the settings to see the Add Menu Part button.
Click on the Add Menu Part button and select Inventory.
- Animate Use
Disable
Using items will only do their calculations, not use the battle animation schematics.
Default Action #
This defines what will happen when accepting an item – we’ll keep it at the default Use menu action, i.e. it’ll use the item.
Available Content Types #
- All Types
Enable
This’ll show all item content types. - Show Empty Types
Disable
Content types without any content in the inventory will not be displayed. - Sort By
Select: ID
This’ll sort the content types by their ID/index, i.e. as they’re listed in the editor.
Type Box Settings #
- Type Display
Select: UI Box
The content types will be displayed in a UI box as a selection menu. - Box Display Mode
Select: Multi
The content types and item list will be displayed at the same time. - Type Box
Select: Menu Small - Add Back Button
Select: Last
The Type Content Layout settings handle the content displayed in the content type buttons, we’ll keep it at the default setup, displaying text and icon.
Item Box Settings #
- Item Box
Select: Menu Big - Sort By
Select: ID - Add Currency
Enable - Add Items
Enable - Add Equipment
Enable - Add Back Button
Select: Last
Like in the battle menu, we’ll want to display the item quantity – this is handled by the Item Content Layout settings, which defaults to showing this information in the additional content info.
We’ll stick with the default setup, since our button prefab already is set up to show the additional content info.
Description Part #
The Description part is used to display the description of the currently selected input of the menu screen.
Scroll down to the bottom of the settings to see the Add Menu Part button.
Click on the Add Menu Part button and select Description.
- UI Box
Select: Menu Info - Always Visible
Enable
We can leave the rest with the default setup.
Equipment Menu Screen #
The equipment menu allows us to change a combatant’s equipment.
Select the Equipment menu screen.
Equipment Part #
The Equipment part is used to change the equipment of a combatant.
Scroll down to the bottom of the settings to see the Add Menu Part button.
Click on the Add Menu Part button and select Equipment.
Available Equipment Slots #
- All Equipment Slots
Enable - Sort By
Select: ID
Slot Box Settings #
- Equipment Slot Box
Select: Menu Small - Add Back Button
Select: Last
The Slot Content Layout settings handle the content of the equipment slot buttons. The default setup will display the content of the equipment slot as the button’s additional content title. We don’t use this and display the slot’s name and equipment in the button.
- Content Type (Main Content)
Select Custom. - Default Content
Set to: <slotname>: <name>
Remove the Additional Content Layout 0 settings.
We’ll display a different content for empty equipment slots using the Empty Content Layout settings.
- Use Empty Layout
Enable this setting. - Content Type (Main Content)
Select Custom. - Default Content
Set to: <slotname>: Empty
Equipment Box Settings #
- Show Equip Box
Enable
You can optionally disable showing an equipment box, e.g. combining the Equipment part (showing only equipment slots) with an Inventory part. - Display Slot>Equipment
Select: Multi - Equipment Box
Select: Menu Big - Add Equipped
Enable
This’ll also show the equipped equipment in the list. - Highlight Equipped Input
Enable
This’ll highlight the equipped equipment’s button with a defined color. - Color (Highlight)
Set to a pink color with full alpha. - Sort By
Select: ID - Add Back Button
Select: Last - Add Unequip Button
Select: First
Like in the inventory menu, we’ll want to display the equipment quantity – this is handled by the Equipment Content Layout settings, which defaults to showing this information in the additional content info. So, we can leave it as is.
Description Part #
Scroll down to the bottom of the settings to see the Add Menu Part button.
Click on the Add Menu Part button and select Description.
- UI Box
Select: Menu Info - Always Visible
Enable
Abilities Menu Screen #
The ability menu allows us to use a combatant’s abilities (if they’re useable in the field).
Select the Abilities menu screen.
Ability Part #
The Ability part is used to display and use the abilities of a combatant.
Scroll down to the bottom of the settings to see the Add Menu Part button.
Click on the Add Menu Part button and select Ability.
- Animate Use
Disable
Available Content Types #
- All Types
Enable - Sort By
Select: ID
Type Box Settings #
- Type Box
Select: Menu Small - Add Back Button
Select: Last
Ability Box Settings #
- Ability Box
Select: Menu Big - Sort By
Select: ID - Add Back Button
Select: Last
The Ability Content Layout settings handle the content of the ability buttons – like with the inventory part, we’ll display the use cost via the additional content info.
Description Part #
Scroll down to the bottom of the settings to see the Add Menu Part button.
Click on the Add Menu Part button and select Description.
- UI Box
Select: Menu Info - Always Visible
Enable
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 in one of the game’s scenes (e.g. World) and open the menu using the Menu input key (we’ve set it up using F1).
Great, all menus are working.
Next, we’ll add an interaction.