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