Create a shortcut HUD using the Unity UI module.

In this tutorial we’ll create a Combatant type HUD to display the player’s shortcut slots. Learn more about shortcut slots in this documentation. or using the Unity UI for displaying shortcuts in this documentation.

Your project’s UI system should already be set to use the Unity UI module. If not, check the initial setup tutorial for the Unity UI module.

You can download the completed HUD setup here:

Download HUD

This contains the shortcut HUD, shortcut slot prefab, default and empty shortcut UI prefabs as well as the used images and font. You still need to use those prefabs for the Shortcut UI and HUD setup in the Makinom editor (see below).

Shortcut UI #

First, we’ll set up the default Shortcut UI for our our shortcuts. The Unity UI module uses a prefab for this – the HUD will use the prefab to create the individual shortcuts.

We’ll create a UI that shows the icon, information (use costs or item quantity) and slot index of the shortcut. Additionally, we’ll use the icon as a value bar to show reuse times.

Create a ready-to-use shortcut setup using the scene hierarchy’s context menu: ORK Framework > HUD > Shortcut > Shortcut Content+Info+Index (for prefabs)

There are different variants available to create a shortcut setup with other content setup, e.g. only showing the name/icon.

The game object that’s created for us has the following structure:

Content > Image handles the icon, spread out to be used as a background for the shortcut.

Content > Text handles the name, we’ll remove that one since we only show the icon (but you can keep it if you want to show the name).

Info Text handles the information, e.g. use cost or item quantity.

Index Text handles the slot’s index.

Rect Transform #

We’ll control the size of our shortcut on the Shortcut Content game object. I’ll use a size of 80×80.

Remove the name #

Delete the Shortcut Content > Content > Text child object, as we don’t display the shortcut’s name.

Icon #

Select the Shortcut Content > Content > Image child object, this is where the shortcut’s icon will be displayed.

Since there’s currently no sprite selected, it’ll show as a white square, not really helpful, as it also blocks the white text from being seen. Let’s select a dummy icon for now.

Image #

Value Bar #

We want to use the icon as a value bar to show the reuse time.

First, we’ll add an empty game object to the Shortcut Content > Content child object, which will manage the bar. We’ll use an empty game object for this, as the bar’s game object can be disabled if the bar isn’t used, hiding all content, e.g. by a shortcut without a reuse time or when the time isn’t running.

Add a HUD Value Bar (Sprite) component to the empty game object and change the following settings.

Next, add an ORK HUD Value Bar Content component to the empty game object and change the following settings.

The value bar content automatically select’s the root’s HUD content provider and the sprite value bar we just added.

Info Text #

Select the Shortcut Content > Info Text child object, it handles displaying the shortcut’s information, e.g. the use costs of an ability or quantity of an item.

The ORK HUD Status Text Content component handles the content that’ll be displayed. It already is set up as we need it, using the Shortcut type and the <info> text code to display the information of the shortcut. You can use other types in case you need specialized text codes for abilities (Ability type) or items (Item type) and set up their own shortcut UI prefabs.

The TextMeshPro – Text (UI) component handles how the text is displayed. If you want to change the font, font size, color, etc., this is where you can do it. I’ll adjust the following settings.

Index Text #

Select the Shortcut Content > Index Text child object, it handles displaying the shortcut’s slot index when it’s displayed as part of a shortcut slot.

The ORK HUD Status Text Content component handles the content that’ll be displayed. It already is set up as we need it, using the Shortcut Slot type and the <slotindex> text code to display the information of the shortcut.

The TextMeshPro – Text (UI) component handles how the text is displayed. If you want to change the font, font size, color, etc., this is where you can do it. I’ll adjust the following settings.

The finished game object (with the dummy icon) will look something like this:

Don’t forget to remove the dummy icon in the Shortcut Content > Content > Image component.

Create Prefab #

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

You can now remove the game object from the scene.

Empty Shortcut UI #

We’ll also set up a shortcut for an empty shortcut slot, i.e. just displaying slot’s index.

For this, we’ll just duplicate our prefab and remove the things we don’t need. Duplicate the prefab, rename it to Shortcut Empty and open it for editing.

Remove the Content child object (i.e. the icon and bar included).

Remove the Info Text child object.

And our empty shortcut is finished.

Save the changes to the prefab and exit the prefab editing.

We’ll handle setting up the shortcut UI in the editor later.

Shortcut Slot Prefab #

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

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

Rect Transform #

Like before, we’ll control the size of our shortcut slot on the Shortcut Slot Content game object. I’ll use a size of 80×80.

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 a game 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 game 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 game 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 teh background.

The finished game object will look like this:

Create Prefab #

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

You can now remove the game object from the scene.

HUD Prefab Setup #

As our last prefab, we’ll set up the actual HUD.

Create a HUD with horizontal layout using the scene hierarchy’s context menu: Makinom > HUD > HUD (Horizontal Layout)

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 820×100.

Horizontal Layout Group #

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

Image #

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

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

HUD Shortcut Slot List #

Add a HUD Shortcut Slot List component to the game object using the component menu.

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

The finished game object looks like this:

Create Prefab #

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

You can now remove the canvas from the scene.

Shortcut UI Setup #

Now, we’ll set up the Shortcut UI for the empty and default shortcuts.

Open the Makinom editor, navigate to UI > Shortcut Settings.

Default UI Settings #

These settings handle the default shortcut UI for all shortcuts, as well as optional default shortcuts for individual shortcut types (e.g. items or abilities).

Default Empty UI #

These settings are used for empty shortcut slots. We’ll set up the empty shortcut UI using the Shortcut Empty prefab we set up.

Alternatively, you can also define a Key Shortcut UI instead of setting the default UI. In this case, make sure to later also use the same UI key in the HUD Shortcut Slot Content component setup (Empty UI Key setting).

Default Shortcut UI #

These settings are used for all shortcuts. We’ll set up the shortcut UI using the Shortcut Default prefab we set up.

Alternatively, you can also define a Key Shortcut UI instead of setting the default UI. In this case, make sure to later also use the same UI key in the HUD Shortcut Slot Content component setup (Assigned UI Key setting).

HUD Setup #

Next, we’ll set up the HUD. Navigate to UI > HUDs, add a new HUD and change the following settings.

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.

Save Settings #

That’s it for the setup.

Don’t forget to save the changes you did in the Makinom editor via the Save Settings button at the bottom.

Testing #

Hit play and test your HUD! Naturally, you need a combatant with shortcuts set up as your player.

Shortcuts that can’t be used are displayed in a red color-tinted box (yellow tint is where the cursor currently is over).

Useable shortcuts are kept in the regular color – green tint when a shortcut is active (e.g. during target selection or using the action).

Tip: Assigning Shortcuts #

You can set up default shortcut assignments and automatically add shortcuts to slots in UI > Shortcut Settings, as well as have individual combatants override them these settings.

Default Shortcut Assignments #

Define a fix shortcut to a defined shortcut slot, e.g. to assign the base attack to the 1st shortcut slot of the HUD:

Default Auto Add Slots #

Automatically fill empty slots with shortcuts from defined types, e.g. active abilities or useable items – optionally limited by ability/item type, etc.

E.g. to automatically fill slots 2-6 with active abilities when they’re learned:

Or, to automatically fill slots 7-9 with useable items of the Potion item type:

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 Base/Control > 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: