February
16
2015

Add a Skillbar and Hotkeys to your game using the Shortcut Slot System.

In this tutorial, we’ll create a small skillbar consisting of 4 slots and bind the slots to Input Keys (1-4).

You can learn more about the Shortcut Slot System in this how-to.

Adding new Input Keys

We need new input keys for our hotkeys to call the shortcuts. Open the ORK Framework and navigate to Base/Control > Input Keys, add four new input keys and change the following settings.

Input Key: Hotkey 1

  • Name
    Set to Hotkey 1.
  • Input Origin
    Select Key Code.
  • Positive Key
    Select Alpha 1.
  • Input Handling
    Select Down.

Input Key: Hotkey 2

  • Name
    Set to Hotkey 2.
  • Input Origin
    Select Key Code.
  • Positive Key
    Select Alpha 2.
  • Input Handling
    Select Down.

Input Key: Hotkey 3

  • Name
    Set to Hotkey 3.
  • Input Origin
    Select Key Code.
  • Positive Key
    Select Alpha 3.
  • Input Handling
    Select Down.

Input Key: Hotkey 4

  • Name
    Set to Hotkey 4.
  • Input Origin
    Select Key Code.
  • Positive Key
    Select Alpha 4.
  • Input Handling
    Select Down.

That’s it for the input keys.

Setting up hotkeys with Control Maps

Binding input keys to shortcut slots is done with Control Maps. We’ll create a new control map for the shortcut hotkeys, so we’ll also need to add it to the player’s combatant afterwards. Navigate to Base/Control > Control Maps, add a new control map and change the following settings.

  • Name
    Set to Shortcut Hotkeys.
  • Useable In
    Enable Field and Real Time.
    While you can also use hotkeys in other battle types (e.g. turn based), it doesn’t really suit the ORK demo’s gameplay.

Click on Add Control Key to add the first key.

  • Input Key (Input Settings)
    Select Hotkey 1.
  • Type (Action Settings)
    Select Shortcut.
  • Slot Index
    Set to 1.
  • Use Auto Target
    Enable this setting.

Copy the first control key and change the following settings.

  • Input Key
    Select Hotkey 2.
  • Slot Index
    Set to 2.

Again, copy the last control key and change the following settings.

  • Input Key
    Select Hotkey 3.
  • Slot Index
    Set to 3.

One last time, copy the last control key and change the following settings.

  • Input Key
    Select Hotkey 4.
  • Slot Index
    Set to 4.

That’s it for the control map.

Updating the player combatant

Now it’s time to update our player’s combatant – we’ll add the new control map and some default shortcut assignments. Navigate to Combatants > Combatants, select Brown Pants (the player) and change the following settings.

Control Settings

Click on Add Control Map to add the control map we just created.

  • Control Map
    Select Shortcut Hotkeys.

Shortcut Settings

The Shortcut Settings can be found in the Battle Settings of the combatant.

  • Use Class Shortcuts
    Disable this setting.
    If enabled, the combatant would use the shortcut settings defind in it’s current class – this allows having different shortcuts for each class.
  • Shortcut List Count
    Set to 1.
    For our example we only need one set of shortcuts for our combatant.
    You can have as many shortcut lists as you need, but only the currently active list can be used at a time.

Click on Add Shortcut in Default Shortcuts to add a default shortcut assignment.

  • List Index
    Set to 0.
    This will add the default shortcut assignment to the first shortcut list (indexes start at 0).
  • Slot Index
    Set to 1.
    We’ll skip index 0 for cosmetic reasons, we want to bind input key 1 to slot index 1, key 2 to slot 2, etc.
  • Shortcut Type
    Select Item.
  • Item
    Select Potion.

Click on Add Shortcut to add another default shortcut assignment.

  • List Index
    Set to 0.
  • Slot Index
    Set to 2.
  • Shortcut Type
    Select Ability.
  • Item
    Select Fire.
  • Level
    Set to 1.

That’s it for the combatant – we’ll only assign 2 of the 4 slots we want to display to have some free slots for the player to assign. Of course, the player could also assign new shortcuts on already assigned slots.

Adding a new GUI Box

We’ll create a new GUI box to display the skillbar at the bottom center of the screen. The skillbar will be created using a HUD, which should also be dispalyed in menu screens where we can assign shortcuts using drag+drop. To make sure the HUD is displayed above the menu, we’ll add a new GUI Layer the GUI box will be displayed at. Navigate to Menus > GUI Layers, add a new GUI layer and change the following settings.

  • Name
    Set to HUD above Menu.

GUI layers are displayed above each other – i.e. layer 0 will be displayed below layer 1.

Now, navigate to Menus > GUI Boxes, add a new GUI box and change the following settings.

  • Name
    Set to Skillbar.
  • GUI Layer
    Select HUD above Menu.
  • Height Adjustment
    Set to Auto.

Content Box Settings

  • Bounds
    Set to X=640, Y=800, W=250, H=70.
  • Anchor
    Select Lower Center.

Open Box Behaviour: Move Settings

  • Move In
    Enable this setting.
  • Time (s)
    Set to 0.3.
  • Start Position
    Set to X=640, Y=870.
  • Interpolation
    Select Ease Out Quad.

Close Box Behaviour: Move Settings

  • Move Out
    Enable this setting.
  • Time (s)
    Set to 0.3.
  • End Position
    Set to X=640, Y=870.
  • Interpolation
    Select Ease In Quad.

And that’s it for the GUI box.

Creating a skillbar using a HUD

Finally, we’ll create the HUD to display our shortcut slots. Navigate to Menus > HUDs, add a new HUD and change the following settings.

HUD Settings

  • Name
    Set to Skillbar.
  • GUI Box
    Select Skillbar.
  • HUD Type
    Select Combatant.

Combatant Settings

  • Enable Drop
    Enable this setting.
    To allow the HUD receiving drag+drop input, we need to enable this setting.
  • Combatant Type
    Select Group.
  • Only Leaders
    Enable this setting.
  • Displayed Groups
    Enable Player, disable Ally and Enemy.

Display Conditions

  • In Control, In Battle, Menu Screens, Target Selection, Performing Actions
    Select Ignore.
  • Shop, In Event, Changing Scene, Game Paused
    Select No.

HUD Elements

Click on Add Status Element to add a new HUD element.

  • Type
    Select Shortcut.
  • Slot Start Index
    Set to 1.
  • Enable Dragging
    Enable this setting.
  • Enable Double Click
    Enable this setting.
  • Inner Assign
    Select Swap.
    This will swap slot assignments when assigning shortcuts from with in the HUD.
  • Cell Mode
    Select List.
  • Rows
    Set to 1.
  • Columns
    Set to 4.
  • Column Fill
    Select Horizontal.
  • Spacing
    Set to X=10, Y=10.
  • Set Cell Size
    Enable this setting.
  • Cell Size
    Set to X=50, Y=50.

Empty Slot Display

The Empty Slot Display settings are used for not assigned shortcut slots.

  • Use Background
    Enable this setting.
  • Color
    Select Default Shadow.

Click on Add Content Text to add a text label to the empty slot display. We’ll use it to display the slot index, which is also the hotkey.

  • Position
    Set to X=0, Y=5.
  • Anchor
    Select Lower Center.
  • Relative To
    Select Lower Center.
  • Text
    Set to %s.
  • Text Color
    Select Yellow.
  • Font Size
    Set to 12.

The slot index will be displayed at the lower center of the slot.

Assigned Slot Display

The Assigned Slot Display settings are used for assigned shortcut slots and can display information about the assigned action, e.g. use costs, icon, name, etc.

  • Use Background
    Enable this setting.
  • Color
    Select Blue.

We’ll use 4 labels to display the assigned slots, one for the icon, one for the name, one for the use costs/quantity and one for the slot index. The higher indexed labels will be displayed above the lower indexed ones. Click on Add Content Text to add the first label for the icon.

  • Position
    Set to X=0, Y=0.
  • Anchor
    Select Middle Center.
  • Relative To
    Select Middle Center.
  • Text
    Set to %i.

Copy the icon label and change the following settings to display the name.

  • Text
    Set to %n.
  • Text Size
    Set to 15.

Click on Add Content Text to add the info label (use costs, quantity).

  • Position
    Set to X=0, Y=-5.
  • Anchor
    Select Upper Right.
  • Relative To
    Select Upper Right.
  • Text
    Set to %.
  • Text Color
    Select Yellow.
  • Font Size
    Set to 12.

Copy the info label and change the following settings to display the slot index (like in the empty slot).

  • Position
    Set to X=0, Y=5.
  • Anchor
    Select Lower Center.
  • Relative To
    Select Lower Center.
  • Text
    Set to %s.

That’s all for the slot displays. Finally we’ll set the Element Bounds.

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

And that’s it for the HUD.

Drag+drop from menu screens

In order to assign shortcut slots using drag+drop from menu screens, you need to enable this also in the different menu screens. Navigate to Menus > Menu Screens, select Inventory and change the following settings.

Item Box Settings

  • Enable Dragging
    Enable this setting.
  • Enable Double Click
    Enable this setting.
  • Drag Inactive
    Enable this setting.

That’s it for the inventory menu screen.

Select the Abilities menu screen and change the following settings.

Ability Box Settings

  • Enable Dragging
    Enable this setting.
  • Enable Double Click
    Enable this setting.
  • Drag Inactive
    Enable this setting.

And that’s it – click on Save Settings to save the changes.

gameplay_11_skillbar_and_hotkeys1

Now you’ll see a skillbar at the bottom of the screen, assigning slots can be done using drag+drop, using slots can be done using the hotkeys or also using drag+drop.