---
title: "Unity UI: Shortcut UI Setup"
url: "https://orkframework.com/guide/ork4/ork4-tutorials/ork4-ui-tutorials/ork4-unity-ui-shortcut-ui-setup/"
updated: "2026-08-29"
category: UI Tutorials
---

# Unity UI: Shortcut UI Setup

In this tutorial we’ll set up shortcut UI using the *Unity UI*system.

A shortcut is an instance of an ability, item, equipment, currency, AI ruleset, special command (defend, etc.) or grid action (grid move, etc.).

Shortcut UI is used to display a [shortcut](https://orkframework.com/guide/ork4/ork4-documentation/section-gameplay/shortcut-slots-and-settings/) in a HUD or UI box (e.g. in menus). You can set up different variations by using *UI Keys*, e.g. a [shortcut HUD](https://orkframework.com/guide/ork4/ork4-tutorials/ork4-ui-tutorials/ork4-unity-ui-shortcut-hud/) displaying a version with reuse time and shortcut slot index while an inventory container menu can use a version with only an icon and quantity.

We’ll set up 3 variants in this tutorial:

- for inventory display: icon and info (e.g. quantity, use cost, etc.)
- for general use: icon, info, slot index (only used when displayed in a shortcut slot) and reuse time value bar (using the icon)
- for shortcut slots: empty shortcut with shortcut slot index

This tutorial is based on the [ORK 4 Unity Quickstart 3D tutorials](https://orkframework.com/guide/ork4/ork4-tutorials/ork4-unity-quickstart-tutorials-3d/ork-4-unity-quickstart-3d/), 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](https://orkframework.com/guide/ork4/ork4-tutorials/ork4-ui-tutorials/ork4-unity-ui-initial-setup/).

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.

# Inventory Prefab

We’ll start with the simple variant that only displays an icon and an information (e.g. quantity).

We can create a ready-to-use setup using the scene hierarchy’s context menu (**ORK Framework > HUD > Shortcut > Prefab: Shortcut Content+Info**) or the [ORK toolbar](https://orkframework.com/guide/ork4/ork4-documentation/ork4-editor/unity-overlay-toolbar/) (search for: **Shortcut Prefab** and select the variant with **Content+Info**).

## Rect Transform

We’ll change the size of the *Shortcut Content* object.

- **Width**
   Set to: *100*
- **Height**
   Set to: *100*

## Remove Name

The created setup also displays the name of the shortcut – we don’t want that.

Remove the *Shortcut Content > Content > Text* child object.

## 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 *HUD Text Content* component handles the content that’ll be displayed. It already is set up as we need it, using the *Shortcut* content 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 equipment (*Equipment* type) or items (*Item* type) and set up their own shortcut UI prefabs.

### TextMeshPro – Text (UI)

We can adjust this in the TMP component.

- **Font Size**
   Set to: *16*
- **Vertex Color**
   Select a red color.
- **Alignment**
   Set to: *Right*and *Top*
   This’ll place the text at the upper right corner of the icon.
- **Text Wrapping Mode**
   Select: *No Wrap*
   This prevents a longer text from being wrapped when exceeding the available space.

## Create Prefab

The finished UI should look like this:

[![](https://orkframework.com/wp-content/uploads/ork4_unity_UI__shortcut_ui_inventory.png)](https://orkframework.com/wp-content/uploads/ork4_unity_UI__shortcut_ui_inventory.png)

Create a prefab out of the *Shortcut Content* object by dragging it on the project view. Rename the prefab to *Shortcut UI Inventory*.

Remove the object from the canvas.

# General Use Prefab

Next, we’ll set up the variant with icon, info, slot index and reuse time. The slot index is only displayed if the shortcut is displayed by a shortcut slot. The reuse time will use a value bar to fill the icon radially based on the reuse time.

Instead of setting up a new variant from scratch, we’ll duplicate the *Shortcut UI Inventory* prefab we created and add a value bar to it.

So, duplicate the prefab and rename the new copy to: *Shortcut UI Reuse Time*

Open the prefab for editing.

## Info Text

We’ll adjust the text position to display at the upper center.

### TextMeshPro – Text (UI)

- **Alignment**
   Set to: *Center* and *Top*.

## Slot Index Text

Select the root *Shortcut UI Reuse Time* object and add a text content using either the scene hierarchy’s context menu (**ORK Framework > HUD > Content > HUD: Text Content**) or the ORK toolbar (search for: **HUD Text Content**).

Change the following components.

### Rect Transform

Select a *stretch stretch* anchor preset.

- **Left, Top, Right, Bottom**
   Set to: *0*

### HUD Text Content

We want to display information of a shortcut slot.

- **Content Type**
   Select: *Shortcut Slot*
- **Default Content**
   Set to: *<slotindex>*
   You can also use *<slotname>* to show the name of a slot instead – the slot names are set up in the [shortcut settings](https://orkframework.com/guide/ork4/ork4-documentation/section-gameplay/shortcut-slots-and-settings/).

### TextMeshPro – Text (UI)

- **Font Size**
   Set to: *16*
- **Vertex Color**
   Select a blue color.
- **Alignment**
   Set to: *Center*and *Bottom*.
- **Text Wrapping Mode**
   Select: *No Wrap*

## Reuse Time Value Bar

We’ll use a value bar to fill the shortcut’s icon based on the reuse time.

Select the *Shortcut Content > Content* child object and add a value bar using either the scene hierarchy’s context menu (**ORK Framework > HUD > Content > HUD: Value Bar (Sprite)**) or the ORK toolbar (search for: **Value Bar Sprite**).

Remove the *Empty Sprite* and *Value Sprite* child objects of the value bar.

Select the value bar and change the following component settings.

### Rect Transform

- **Left, Top, Right, Bottom**
   Set to: *0*

### HUD Value Bar Content

We want to display the reuse time of a shortcut.

- **Value Type**
   Select: *Reuse Time*
- **Invert Time**
   *Enable*We want the icon to fill from nothing to fully filled to show the shortcut being available again.
- **Unused Filling**
   Select: *Full*
   If no reuse time is used by a shortcut, the value bar will display as fully filled.

### HUD Value Bar (Sprite)

- **Value Image**
   Select: *Image***This is the *Image* component from the *Shortcut Content > Content > Image* child object, i.e. the icon of the shortcut.

## Icon

And finally, we need to adjust the filling of the icon.

Select the *Shortcut Content > Content > Image* child object and select any icon sprite in the *Image* component’s *Source Image* setting.

We need to have a sprite selected in order to see the *Image Type* settings of the component.

- **Image Type**
   Select: *Filled*
- **Fill Method**
   Select: *Radial*
- **Fill Origin**
   Select: *Bottom*

Changing the *Fill Amount* setting allows you to preview how the radial filling will look.

Remove the sprite from the *Source Image* setting again.

## Save Changes

The finished UI should look like this:

[![](https://orkframework.com/wp-content/uploads/ork4_unity_UI__shortcut_ui_reuse_time.png)](https://orkframework.com/wp-content/uploads/ork4_unity_UI__shortcut_ui_reuse_time.png)

And that’s it – save the changes you’ve made to the prefab.

# Empty Slot Prefab

The last variant is used by empty shortcut slots, only displaying the slot index. We can build upon the previous setup again.

Duplicate the *Shortcut UI Reuse Time* prefab and rename the new copy to: *Shortcut UI Empty Slot*

Open the prefab for editing.

Remove the *Shortcut UI Empty Slot > Content* child object (i.e. the icon and bar included).

Remove the *Shortcut UI Empty Slot > I**nfo Text* child object.

And our empty shortcut is finished.

## Save Changes

The finished UI should look like this:

[![](https://orkframework.com/wp-content/uploads/ork4_unity_UI__shortcut_ui_empty_slot.png)](https://orkframework.com/wp-content/uploads/ork4_unity_UI__shortcut_ui_empty_slot.png)

And that’s it – save the changes you’ve made to the prefab.

# Shortcut UI Setup

With our prefabs ready for use, we can set up the shortcut UI to be used in HUDs and other UI.

Open the ORK editor and navigate to **Gameplay > Shortcut Settings**.

## Default UI Settings

We’ll set up the default shortcut UI used by all shortcuts (e.g. items, abilities, equipment, etc.). You can also define separate setups for abilities or even individual items in case you need special handling of some shortcuts.

### Default Empty UI

This is the shortcut UI used by empty shortcut slots.

- **UI Prefab**
   Select: *Shortcut UI Empty Slot*

### Default Shortcut UI

This is the default shortcut UI used by all shortcuts, unless they have their own setup.

We’ll set up the base UI and a UI key setup.

- **UI Prefab**
   Select: *Shortcut UI Reuse Time*

Click on *Add Key Setup*.

- **Key**
   Set to: *inventory*
- **UI Prefab**Select: *Shortcut UI Inventory*

# Using Shortcut UI

Shortcut UI is mainly used by HUDs, but can also be displayed in content layout settings (e.g. in menu screens) that offer *HUD Type* settings to add HUD content.

## HUD List Content

A HUD uses shortcut UI to list shortcuts in a *HUD List Content* component.

Many list types are using shortcut UI, either directly (e.g. *Ability*, *Equipment* or *Inventory*) or indirectly (e.g. *Shortcut Slot*, which lists shortcut slots which each use a shortcut UI).

## Content Layout

Content layout settings in menus and other UI setup often have a *HUD Type* setting available to add HUD elements to the UI (e.g. to a button).

If the displayed content is any kind of shortcut (e.g. an item in an *Inventory* menu screen part), you can use the *UI Key* type to define the UI key of the shortcut UI you want to use.