MENU 04 Menu Screens

In this tutorial we’ll set up the remaining menu screens.

This tutorial continues the sub-series for setting up menu screens.

We’ll finish the setup of our remaining menu screens:

  • inventory
  • equipment
  • abilities
  • group management

1: Inventory #

The inventory menu will allow us to use items on our player group members.

Navigate to UI > Menu Screens and 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 this setting.
    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 Item Types #

  • All Types
    Enable this setting.
    This’ll show all item types.
  • Show Empty Type
    Disable this setting.
    Item types without any content in the inventory will not be displayed.
  • Merge Sub Types
    Enable this setting.
    This’ll not show sub types, merging them all into their parent type.
    E.g. instead all weapons are under their parent Weapon type.
  • Sort By
    Select ID.
    This’ll sort the item types by their ID/index, i.e. as they’re listed in the editor.

Type Box Settings #

  • Type Display
    Select Tabs.
    The item types will be displayed as tab buttons in the UI box of the items.

The Type Content Layout settings handle the content displayed in the item type buttons, we’ll keep it at the default setup, displaying text and icon.

Item Box Settings #

  • Item Box
    Select Blue Menu Tab Center Scroll.
  • Sort By
    Select ID.
  • Add Currency
    Enable this setting.
  • Add Items
    Enable this setting.
  • Add Equipment
    Enable this setting.
  • 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, if you haven’t used a choice info button with the additional content set up as your default button prefab (UI > UI System), select one in the Custom Input Prefab setting.

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 Blue Top Left Fit.

We can leave the rest with the default setup.

2: Equipment #

The equipment menu allows us to change a combatant’s equipment.

Menu Screen Settings > Combatant Settings #

We’ll use the tab change keys to change the user of the menu screen.

  • Allow User Change
    Enable this setting.
  • Only Battle Group
    Disable this setting.
  • Change Battle Sorted
    Enable this setting.

Previous Key #

  • Input Key
    Select Previous.
  • Audio Type
    Select Tab Change.

Next Key #

  • Input Key
    Select Next.
  • Audio Type
    Select Tab Change.

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 this setting.
  • Sort By
    Select ID.

Slot Box Settings #

  • Equipment Slot Box
    Select Blue Menu Top Scroll.
  • 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.

The default Choice Title Button you can create using the scene hierarchy context menu has such a setup, I’d recommend creating a title button with fixed Width for the title. See the initial UI setup for more details.

  • Custom Input Prefab
    Select a Choice Title Button prefab.

Equipment Box Settings #

  • Show Equip Box
    Enable this setting.
    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.
    Both slot and equipment will be shown at the same time, updating equipment based on the selected slot.
  • Equipment Box
    Select Blue Menu Bottom Scroll.
  • Sort By
    Select ID.
  • Add Back Button
    Select Last.
  • Add Unequip Button
    Select First.

Combatant 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 Combatant.

  • UI Box
    Select Blue Bottom Left Fit.
  • Combatant Scope
    Select Current.
    This’ll display the menu’s user.

Entry Page 0 #

  • Add HUD
    Enable this setting.
  • HUD
    Select Status Value Preview.

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 Blue Top Left Fit.

3: Abilities #

The ability menu allows us to use a combatant’s abilities (if they’re useable in the field).

Menu Screen Settings > Combatant Settings #

We’ll use the tab change keys to change the user of the menu screen.

  • Allow User Change
    Enable this setting.
  • Only Battle Group
    Disable this setting.
  • Change Battle Sorted
    Enable this setting.

Previous Key #

  • Input Key
    Select Previous.
  • Audio Type
    Select Tab Change.

Next Key #

  • Input Key
    Select Next.
  • Audio Type
    Select Tab Change.

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 this setting.

Available Item Types #

  • All Types
    Enable this setting.
  • Sort By
    Select ID.

Type Box Settings #

This time we’ll display the types in a separate UI box.

  • Type Display
    Select UI Box.
  • Display Types>Abilities
    Select Multi.
  • Type Box
    Select Blue Top Right Fit.
  • Add Back Button
    Select Last.

Ability Box Settings #

  • Ability Box
    Select Blue Menu Center Scroll.
  • 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.

We’ll stick with the default setup, if you haven’t used a choice info button with the additional content set up as your default button prefab (UI > UI System), select one in the Custom Input Prefab setting.

Combatant 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 Combatant.

  • UI Box
    Select Blue Bottom Left Fit.
  • Combatant Scope
    Select Current.

Entry Page 0 #

  • Add HUD
    Enable this setting.
  • HUD
    Select Combatant Information.

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 Blue Top Left Fit.

4: Group #

The group menu allows us to change the player’s battle group (and other group management things). We’ll allow changing members and removing members from the battle group.

Group Part #

The Group part is used to manage the player’s group.

Scroll down to the bottom of the settings to see the Add Menu Part button.

Click on the Add Menu Part button and select Group.

Action Menu #

The action menu optionally display the available group actions (e.g. changing members).

  • Show Action Box
    Enable this setting.
  • Display Action>1st Group
    Select Multi.
  • Action Box
    Select Blue Top Right Fit.

There are already 2 menu items added.

Change Menu Item 0.

  • Menu Item
    Select Change.
  • Text
    Set to Change.

Now, change Menu Item 1.

  • Menu Item
    Select Remove.

Click on Add Menu Item.

  • Menu Item
    Select Back.

1st Group Box Settings #

Depending on the used action, this’ll display different groups – for our Change and Remove actions it’ll display the battle group members.

  • Display 1st Group>2nd Group
    Select Same.
    Both will be displayed in the same UI box (one after the other).
  • Add Back Button
    Select Last.

The Empty Slot settings define the content of empty group slots – it should default to show the text Empty. We’ll use that.

2nd Group Box Settings #

Depending on the used action, this’ll display different groups (or not display at all) – for our Change action it’ll display the group members not in the battle group.

  • 2nd Group Box
    Select Blue Menu Center Scroll.
  • Add Back Button
    Select Last.

The Empty Slot settings define the content of empty group slots – it should default to show the text Empty. We’ll use that.

Combatant Choice Layout #

We’ll override the default layout to show the experience version of our template HUD.

  • Own Layout
    Enable this setting.
  • Custom Input Prefab
    Select the Empty Button prefab.
  • Content Type
    Select None.
  • HUD Type
    Select HUD.
  • HUD
    Select Combatant Information EXP.

Group Combatant Part #

The Group Combatant part works similar to the Combatant part, but it’ll display the combatant currently selected in a Group part. We’ll use it to show the normal status values of the combatant (like we did in the equipment menu).

Scroll down to the bottom of the settings to see the Add Menu Part button.

Click on the Add Menu Part button and select Group Combatant.

  • UI Box
    Select Blue Bottom Left Fit.
  • Combatant Scope
    Select Both.
    This’ll show the combatant for battle and non-battle members.

Entry Page 0 #

  • Add HUD
    Enable this setting.
  • HUD
    Select Status Value Preview.
    Since we don’t have any previewable content here, this’ll just display the regular values.

Save Changes #

And that’s it for our menu screens!

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. Now you can open all menus!

Next, we’ll set up a shop.