We all know them – menus to manage our items, abilities and other things. In ORK Framework they’re created using Menu Screens.

A menu screen consists of one or more parts (e.g. a list of items, a description box, etc.) – multiple menu screens can be bound together using an overview menu screen to create a complex menu system.

We’ll create the following menus:

  • Overview
    Displaying a list of our other menus, some status information of the player group and game information (e.g. time, area, money).
  • Inventory
    Displaying all our items.
  • Equipment
    Displaying the equipment parts and allows changing the equipment.
  • Ability
    Displaying the abilities of the player.
  • Status
    Displaying detailed status of a member of the player group.

In this tutorial we’ll add some new GUI Boxes and other settings, and the first two of our menu screens.

New GUI boxes

Open the ORK Framework editor and navigate to Menus > GUI Boxes. We’ll need three new ones.

6: Menu Small

Copy Top Info and change the following settings.

  • Name
    Set to Menu Small.
  • Height Adjustment
    Select Scroll.

Content Box Settings

  • Bounds
    Set to X=0, Y=50, W=400, H=325.
  • Text Alignment
    Select Left.

Open Box Behaviour > Fade Settings

  • Use Fade
    Enable this setting.

Close Box Behaviour > Fade Settings

  • Use Fade
    Enable this setting.

That’s it for this GUI box.

7: Menu Big

Copy Menu Small and change the following settings.

  • Name
    Set to Menu Big.

Content Box Settings

  • Bounds
    Set to X=400, Y=50, W=880, H=750.

That’s it for this GUI box.

8: Menu Info

Copy Menu Small and change the following settings.

  • Name
    Set to Menu Info.

Content Box Settings

  • Bounds
    Set to X=0, Y=375, W=400, H=325.

That’s it for the GUI boxes.

Adding a call requirement

Calling a menu screen via input keys (i.e. opening it by pressing an assigned key) can be bound to certain requirements. We only want the menu to be accessible while the player is in control (i.e. outside of events, battles, etc.). Navigate to Game > Requirements and add a new requirement to the list (don’t change the already existing one). Change the following settings.

  • Name
    Set to Menu Call.
  • In Control, Menu Screen
    Select Ignore.
  • Shop, In Event, Changing Scene, Game Paused, In Battle
    Select No.

That’s it for the requirement.

EXP bar settings

Since we’re going to display the experience (EXP) status value of our player, we need to set up the settings for it’s value bar display. Navigate to Status > Status Values and select EXP. Change the following settings in the Default Value Bar.

  • Color
    Select Yellow.
  • Use Empty Bar
    Enable this setting.
  • Color (Empty Bar)
    Select Default Shadow.

That’s it for the bar settings.

The inactive colors

When displaying menus consisting of multiple controlable parts (e.g. the inventory menu will display a box for the item types and another for the item list), we need to tint the inactive parts in a different color to let the user know which box he is actually controlling. That’s done using the Inactive Color settings. The default settings are made in Menus > Menu Settings.

  • Set Background Color
    Enable this setting.
  • Background Color
    Set to R=0.5, G=0.5, B=0.5, A=1.
  • Set Content Color
    Enable this setting.
  • Content Color
    Set to R=0.5, G=0.5, B=0.5, A=1.

That’s it for the inactive colors.

Tip: You can override the default inactive colors in each GUI box individually.

Overview menu

The overview menu will display a list of buttons to change other menus, game information (time, area, money) and the status of the player group. Navigate to Menus > Menu Screens and change the following settings in the default menu.

  • Name
    Set to Overview.
  • Block Controls
    Enable this setting.
    This menu screen will disable the player control while it’s opened.
  • Single Screen
    Enable this setting.
    This menu screen will be displayed alone – no other menu screen can be displayed while it’s opened.
    When not using Single Screen, you can open multiple menu screens at the same time.
  • 2nd Call Closes
    Enable this setting.
    Calling this menu screen a while it’s already opened (e.g. by pressing an assigned key) will close the menu screen.
  • Use Call Key
    Enable this setting.
    We want to call this menu screen by pressing an input key.
  • Input Key
    Select Menu.
  • Use Requirement
    Enable this setting.
    We want to only allow opening this menu via input key when a requirement is valid.
  • Requirement
    Select Menu Call.

Part 0: Button List

Now it’s time to add some parts to the menu screen. Click on Add Menu Part and than on Button List.

A button list part will display, well, a list of buttons – each button can be set to do different things, like calling another menu screen. Change the following settings.

  • GUI Box
    Select Menu Small.

That’s it for the button list part for now – we’ll add the buttons later, after we’ve added the other menu screens.

Part 1: Description

Click on Add Menu Part and than on Description to add a description part. This part is used to display the description of selected choices – change the following settings.

  • GUI Box
    Select Top Info.
  • Always Visible
    Enable this setting.
    The description box will be displayed even if no description is available.

Part 2: Information

Click on Add Menu Part and than on Information. The information part can use HUD elements to display game information – change the following settings.

  • GUI Box
    Select Menu Info.

You can either use an already existing HUD as a template, or add HUD elements directly to this part. We’ll add them directly.

  • Auto Update
    Enable this setting.
    The displayed information will be updated over time.
  • Update Interval (s)
    Set to 1.
    The update will happen once per second.

Element 0

Now, click on Add Information Element to add a HUD element.

  • Text
    Set to
    Time:
    Area:
    #currency.name0#:
  • Text Alignment
    Select Left.
  • Position
    Set to X=0, Y=0.
  • Anchor
    Select Upper Left.
  • Relative To
    Select Upper Left.
  • Use Last Element
    Disable this setting.
  • Width
    Set to 100.
  • Is Percent (Width)
    Enable this setting.
  • Adjust Width
    Enable this setting.
  • Height
    Set to 100.
  • Is Percent (Height)
    Enable this setting.
  • Adjust Height
    Enable this setting.

Element 1

Copy the HUD element and change the following settings.

  • Text
    Set to
    #time
    #area.current
    #currency.inventory0#
  • Text Alignment
    Select Right.

That’s it for the information part.

Part 3: Combatant

Finally, we’ll add the status information for the player group – click on Add Menu Part and than on Combatant. This part also uses HUD elements to display information.

  • GUI Box
    Select Menu Big.
  • Combatant Scope
    Select Battle.
    The scope defines the combatants that will be displayed.

Now it’s time to add the HUD elements – we want to display the combatant’s name, level, HP/MP, EXP and status effects.

Element 0

Click on Add Status Element and change the following settings.

  • Type
    Select Information.
  • Text
    Set to %n, Lvl %.
  • Text Alignment
    Select Left.
  • Text Color
    Select Yellow.
  • Position
    Set to X=0, Y=0.
  • Anchor
    Select Upper Left.
  • Relative To
    Select Upper Left.
  • Use Last Element
    Disable this setting.
  • Width
    Set to 400.
  • Is Percent (Width)
    Disable this setting.
  • Adjust Width
    Enable this setting.
  • Height
    Set to 50.
  • Is Percent (Height)
    Disable this setting.
  • Adjust Height
    Enable this setting.

Element 1

Now it’s time for HP and MP. Click on Add Status Element and change the following settings.

  • Type
    Select Status Value.
  • List Status Values
    Select Status Value Type.
  • Status Value Type
    Select Consumable.
  • Offset
    Set to X=0, Y=30.
  • Use Bar
    Enable this setting.
  • Position
    Set to X=0, Y=50.
  • Anchor
    Select Upper Left.
  • Relative To
    Select Upper Left.
  • Use Last Element
    Disable this setting.
  • Width
    Set to 400.
  • Is Percent (Width)
    Disable this setting.
  • Adjust Width
    Enable this setting.
  • Height
    Set to 5.
  • Is Percent (Height)
    Disable this setting.
  • Adjust Height
    Enable this setting.

Element 2

Copy the last element and change the following settings.

  • Use Bar
    Disable this setting.
  • Text
    Set to %n.
  • Text Alignment
    Select Left.
  • Position
    Set to X=0, Y=30.
  • Height
    Set to 60.

Element 3

Copy the last element and change the following settings.

  • Text
    Set to % / %n.
  • Text Alignment
    Select Right.

Element 4

Now the EXP. Click on Add Status Element and change the following settings.

  • Type
    Select Status Value.
  • Status Value
    Select EXP.
  • Use Bar
    Enable this setting.
  • Position
    Set to X=0, Y=110.
  • Anchor
    Select Upper Left.
  • Relative To
    Select Upper Left.
  • Use Last Element
    Disable this setting.
  • Width
    Set to 400.
  • Is Percent (Width)
    Disable this setting.
  • Adjust Width
    Enable this setting.
  • Height
    Set to 5.
  • Is Percent (Height)
    Disable this setting.
  • Adjust Height
    Enable this setting.

Element 5

Copy the last element and change the following settings.

  • Use Bar
    Disable this setting.
  • Text
    Set to %n.
  • Text Alignment
    Select Left.
  • Position
    Set to X=0, Y=90.
  • Height
    Set to 30.

Element 6

Copy the last element and change the following settings.

  • Text
    Set to % / %n.
  • Text Alignment
    Select Right.

Element 7

Finally, the status effects. Click on Add Status Element and change the following settings.

  • Type
    Select Status Effect.
  • Rows
    Set to 4.
  • Columns
    Set to 1.
  • Spacing
    Set to X=0, Y=0.
  • Set Cell Size
    Enable this setting.
  • Cell Size
    Set to X=400, Y=30.

Click on Add Content Text to add a text that will be displayed for each status effect.

  • Text
    Set to %n.
  • Position
    Set to X=460, Y=0.
  • Anchor
    Select Upper Left.
  • Relative To
    Select Upper Left.
  • Use Last Element
    Disable this setting.
  • Width
    Set to 400.
  • Is Percent (Width)
    Disable this setting.
  • Adjust Width
    Enable this setting.
  • Height
    Set to 120.
  • Is Percent (Height)
    Disable this setting.
  • Adjust Height
    Enable this setting.

And that’s it for this menu screen for now. We’ll return to it later when it’s time to add the other menu screens as buttons.

Inventory menu

The inventory menu will list all the items in the player’s inventory. We’ll also separate them by type. Add a new menu screen and change the following settings.

  • Name
    Set to Inventory.
  • Block Controls
    Enable this setting.
  • Single Screen
    Enable this setting.
  • 2nd Call Closes
    Enable this setting.

Part 0: Inventory

Now, click on Add Menu Part and than on Inventory to add an inventory part. This part handles everything related to displaying items – change the following settings.

  • Default Action
    Select Use.
    The default action allows what’ll happen when an item is selected.
  • All Item Types
    Enable this setting.

Type Box Settings

  • Type Display
    Select GUI Box.
    The item types will be displayed in their own GUI box.
  • Show Empty Types
    Disable this setting.
    If we don’t have an item of a type, we don’t need to display it.
  • Box Display
    Select Multi.
    The box display setting defines how the item type and item list will be displayed – the Multi setting will display them at the same time using different GUI boxes.
  • Type Box
    Select Menu Small.

Item Box Settings

  • Item Box
    Select Menu Big.
  • Add Money
    Disable this setting.
    We don’t want to add the money as an item.
  • Add Items
    Enable this setting.
  • Add Weapons, Add Armors
    Disable this settings.
    We’ll display the equipment in the equipment menu, no need to display them here as well.

Part 1: Description

Click on Add Menu Part and than on Description to add a description part. Change the following settings.

  • GUI Box
    Select Top Info.
  • Always Visible
    Enable this setting.

And that’s it for this menu screen.

Back to the Overview menu

Now, let’s add our first menu to the overview menu. In the Button List part, click on Add Menu Item and change the following settings.

  • Type
    Select Menu Screen.
  • Menu Screen
    Select Inventory.
  • Name
    Set to Inventory.
  • Description
    Set to Show all the stuff..

And that’s it – click on Save Settings and close the ORK Framework editor.

Testing the first two menu screens

Open the main menu scene (0 Main Menu) and hit play.

gametutorial_35_menu_screens1

If you now press the Menu key (Escape), the menu will open and you’ll be able to select the inventory menu.

And that’s it for now – the next lesson will continue with menu screens.