In this tutorial we’ll create a Combatant type HUD to display the player’s shortcut slots using the Unity UI system.

Shortcut slots allow the player to store abilities, items, equipment or other inventory content and actions into slots. They can be used via control maps, in menus or, like in this tutorial, displayed in HUDs.

This tutorial is based on the ORK 4 Unity Quickstart 3D tutorials, but can be used in any project. Your project’s UI system should already be set to Unity UI. If not, check the initial setup tutorial for Unity UI.

As with all content when using Unity UI, we’ll set up prefabs. It’s best to do this in the UI Environment Scene, so open it.

Shortcut UI #

A shortcut slot uses the Shortcut UI of the content it contains to display it.

If you haven’t done so, please follow this tutorial to set up shortcut UI. We’ll use the general use and empty slot setups of the tutorial.

Shortcut Slot Prefab #

Next, we’ll set up a prefab handling a shortcut slot – this’ll show the shortcut UI prefab.

Create a ready-to-use shortcut slot setup either using the scene hierarchy’s context menu (ORK Framework > HUD > Shortcut > Prefab: Shortcut Slot Content) or the ORK toolbar (search for: Shortcut Slot Prefab).

Rect Transform #

We’ll control the size of our shortcut slot on the Shortcut Slot Content object.

HUD Shortcut Slot Content #

The HUD Shortcut Slot Content handles the shortcut slot, which shortcut UI will be used and how the slot can be used, assigned and how it’s highlighted.

Slot Input Settings #

These settings handle how the shortcut slot can be used or assigned. We’ll mainly use the shortcuts as display in this tutorial, but we’ll enable using the shortcuts by clicking on them.

State Changes #

You can show the different states of a shortcut by either using a color or enabling/disabling an object (e.g. using a different background image on the slot). Each state also has a setup for normal and highlighted state – highlighted is when the cursor is above the shortcut slot.

We’ll set up color changes.

Empty State

This state is used by empty slots.

Active State

This state is used when a shortcut is active, e.g. while using an ability or selecting a target for an item, etc.

Useable State

This state is used when the shortcut can be used.

Inactive State

This state is used when the shortcut can’t be used.

In case you also use passive abilities that can be toggled on/off, you can use the Passive Ability states to highlight them.

Image #

Add an Image component to the object using the component menu.

We’ll use it to show a background image for the slot.

UI Color Changer #

Add an UI Color Changer component to the object using the component menu.

The color changer is used to change the highlight colors – it can also change the color of the displayed shortcut, but we’ll disable this and only change the background.

Create Prefab #

The finished object will look like this:

Create a prefab out of our Shortcut Slot Content object (without the Canvas). E.g. name the prefab Shortcut Slot.

You can now remove the object from the scene.

HUD Prefab Setup #

We’ll continue with setting up the prefab of the actual HUD.

Create a HUD with horizontal layout either using the scene hierarchy’s context menu (ORK Framework > HUD > HUD (Horizontal Layout)) or ORK toolbar (search for: HUD Horizontal).

Rect Transform #

I’ll show my HUD at the bottom center of the screen, and it’ll show 9 slots, use a padding and spacing of 10 – so in total, it’ll have a size of 1000×120.

Horizontal Layout Group #

We’ll adjust the horizontal layout, using a padding/spacing of 10 and also prevent it from changing the shortcut slot’s size.

Image #

Add an Image component to the object using the component menu.

We’ll use it to show a background image for the HUD.

HUD List Content #

Add a HUD List Content component to the object using the component menu.

This’ll list our shortcut slots using the shortcut slot prefab we set up.

Prefab Settings #

List Settings #

Create Prefab #

The finished HUD should look like this:

And that’s it for the HUD prefab – create a prefab out of our HUD object (without the Canvas). Name the prefab Shortcut HUD.

You can now remove the object from the scene.

HUD Setup #

Open the ORK editor, navigate to UI > HUDs and add a new HUD.

HUD Settings #

Combatant Settings #

We’ll only display the shortcuts for the actual player combatant, not for each group member.

Display Conditions #

You can use these settings to only show the HUD based on conditions. E.g. only during battles, etc.

We’ll ignore this for now.

Unity UI #

Schematics #

You can optionally use schematics to animate opening and closing the HUD, e.g. fading it in/out. You can also set up default schematics for all HUDs.

See this tutorial for details.

Shortcut Assignments #

Let’s set up automatic shortcut assignments, i.e. the shortcut slots will automatically be filled with content.

We’ll set slot 1 to use the base attack of the combatant, slot 2-5 will get active abilities and slot 6-9 useable items.

Navigate to Gameplay > Shortcut Settings and change the following settings.

Default Shortcut Assignment #

We’ll start with adding the base attack. This is done as a fixed assignment because the base attack isn’t something the combatant learns or gets at some point, it’s always available.

Default Auto Add Slots #

Abilities or items are received by the combatant at some time in the game, at which point we’ll automatically fill a free slot with their content.

Save Settings #

And that’s it.

Click on Save Settings at the bottom of the editor to save the changes.

Testing #

Hit play and test your HUD!

You can level up your player to get more abilities by using the combatant’s inspector. Select the Fighter (or whatever your player’s object is named) and use the Status Value foldout in the Combatant Component in the inspector. You can add experience to cause level ups.

Tip: Control Maps #

You can use control maps to bind actions to input keys – e.g. a shortcut slot.

Control maps are set up in Controls > Control Maps. You can learn more about them in this documentation.

E.g. to use the 1st slot of the HUD via an input key: