In this tutorial we’ll set up status value UI using the Unity UI system.

Status value UI is used to display a status value in a HUD or UI box (e.g. in menus). You can set up different variations by using UI Keys, e.g. a HUD displaying health and manage can use a version with a value bar while a status overview display can use a version with only name and values.

We’ll set up 4 variants in this tutorial:

• name and value
• name, value and value bar
• name, value and preview changes (i.e. displaying positive and negative changes from status previews)
• name, value, value bar and preview changes

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.

Name and Value Prefab #

We’ll start with the simple variant that only displays name and value of a status value. This’ll be the default status value UI and is used as fallback if no UI is found for a provided key.

We can create a ready-to-use setup using the scene hierarchy’s context menu (ORK Framework > HUD > Status Value > Prefab: Status Value – Name+Value) or the ORK toolbar (search for: Status Value Prefab and select the variant with Name+Value).

Rect Transform #

We’ll change the size of the Status Value object.

Layout Element #

We’ll usually display status values in a horizontal or vertical list and want them to stick to the size we defined, so we need to make sure by using a Layout Element component.

Add a Layout Element component using the component menu.

Name #

The Status Value > Name child object contains the setup to display the name on the left side. This is handled by the HUD Text Content component, which is the component for all HUD text displays.

The actual display of the content is handled by Image and TextMeshPro – Text (UI) components, i.e. similar to the UI boxes and input prefabs.

Value #

The Status Value > Value child object contains the setup to display the value on the right side. It works the same way as the Name.

Create Prefab #

The finished status value UI should look like this:

Create a prefab out of the Status Value object by dragging it on the project view. Rename the prefab to Status Value UI Default.

Name, Value and Preview Prefab #

We continue working on the setup we just created and add status preview changes. Positive changes will show in green text, negative changes in red text.

We’ll create a new prefab out of the object at the end.

Name: HUD Text Content #

Select the Status Value > Name child object, we’ll change the setup of the HUD Text Content component.

We’ll change the origin of the displayed values to use preview values. Additionally, we’ll use preview blinking, i.e. the value will change between the current and the preview value.

Positive Preview Text #

We’ll show the name in a green color.

Negative Preview Text #

We’ll show the name in a red color.

Value: HUD Text Content #

Select the Status Value > Value child object, we’ll change the setup of the HUD Text Content component.

We’ll keep it simple and just show the value in green or red color based on the change. If you want, you can also add the change value (<change>) to the texts.

Positive Preview Text #

Negative Preview Text #

Create Prefab #

Create a prefab out of the Status Value object by dragging it on the project view (create an original prefab). Rename the prefab to Status Value UI Preview.

Remove the object from the canvas.

Name, Value and Value Bar Prefab #

We’ll continue with setting up a variant including a value bar. This is mostly used to display Consumable type status values like health and mana, or to show Experience type status values.

Create a new setup using the scene hierarchy’s context menu (ORK Framework > HUD > Status Value > Prefab: Status Value – Name+Value+Bar) or the ORK toolbar (search for: Status Value Prefab and select the variant with Name+Value+Bar).

Rect Transform #

Layout Element #

Add a Layout Element component using the component menu.

Value Bar #

We’ll adjust the value bar to only be displayed at the bottom of the status value UI.

Select the Status Value > Value Bar child object.

Rect Transform #

The value bar uses a stretch stretch anchor preset, i.e. it’ll stretch to the width/height of the parent object.

We’ll add a padding to the top, to have the bar only at the bottom.

HUD Value Bar Content #

This component handles what’s displayed by the value bar.

HUD Value Bar (Sprite) #

This component handles actually displaying the value bar via multiple Image components (on child objects).

We need to set the sprite used by those components.

Empty Sprite #

Select the Status Value > Value Bar > Empty Sprite child object.

This is used to display the empty part of the value bar.

Value Sprite #

Select the Status Value > Value Bar > Value Sprite child object.

This is used to display the filled part of the value bar.

The Value Sprite‘s image type should be set to Filled, this enables the value display to fill the sprite according to the value that’s displayed.

Create Prefab #

The finished status value UI should look like this:

Create a prefab out of the Status Value object by dragging it on the project view. Rename the prefab to Status Value UI Bar.

Remove the object from the canvas.

Name, Value, Value Bar and Preview Prefab #

Instead of setting up a new variant from scratch, we’ll duplicate the Status Value UI Preview prefab we created and add a value bar with preview changes to it.

So, duplicate the prefab and rename the new copy to: Status Value UI Bar Preview

Open the prefab for editing.

Value Bar #

Select the root object (Status Value UI Bar Preview) and add a value bar using either the scene hierarchy’s context menu (ORK Framework > HUD > Content > HUD: Value Bar – Changes (Sprite)) or the ORK toolbar (search for: Value Bar Changes Sprite).

Rect Transform #

The value bar uses a stretch stretch anchor preset, we’ll adjust the padding.

HUD Value Bar Content #

We need to set the content to display the value of a status value.

HUD Value Bar (Sprite) #

This component now uses 4 sprites – empty, value and positive and negative change sprites.

Empty Sprite #

Select the Status Value > Value Bar > Empty Sprite child object.

Positive Change Sprite #

Select the Status Value > Value Bar > Positive Change Sprite child object.

Negative Change Sprite #

Select the Status Value > Value Bar > Negative Change Sprite child object.

Value Sprite #

Select the Status Value > Value Bar > Value Sprite child object.

Save Changes #

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

HUD Setup #

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

Open the ORK editor and navigate to UI > HUDs, select the General Settings.

Default Status Value UI #

Save Changes #

And that’s it.

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

Using Status Value UI #

Status value 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 status value UI to list status values in a HUD List Content component.

You can create ready-to-use setups in your HUDs using the scene hierarchy’s context menu (ORK Framework > HUD > Status Value > Status Value List) or the ORK toolbar (search for: Status Value List). There are 3 variants available: without layout, with vertical and with horizontal layout.

You can also manually add a HUD List Content component using the component menu and changing the settings:

Setup #

The most important settings are the List Status Values and the UI Key settings.

List Status Values defines which status values to use – e.g. displaying based on status value type (Consumable, Normal or Experience), content type or by defining individual status values. Based on this setting you’ll have different settings available to further define which status values to display.

The UI Key defines which status value UI variant to use. We’ve set up different variants using different keys, e.g. using the bar UI key will show the name, value and value bar variant we created.

Enabling Show Status Bonus will only show status value bonuses coming from e.g. an equipment or passive ability that’s displayed by the HUD. If disabled, only the actual status values of a combatant are displayed.

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 a status value (e.g. in a Status Value Upgrade menu part), you can use the UI Key type to define the UI key of the status value UI you want to use.