Create a simple HUD displaying the player’s currency using the Unity UI module.

In this tutorial we’ll create a Combatant type HUD to display the icon and quantity of the player’s currency.

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.

HUD Prefab Setup #

HUDs use prefabs to create their content when using the Unity UI module.

Use the scene hierarchy’s context menu to create the base HUD: Makinom > HUD > HUD

We’ll create a HUD without any layout.

Rect Transform #

Let’s display the HUD in the lower left corner of the screen.

Change the settings in the following order.

For your own HUD, you can naturally use the placement and size that best matches your project and UI.

Currency #

Add an empty game object to the HUD game object and name it Currency.

Rect Transform #

HUD Combatant Item #

Add a HUD Combatant Item component to the Currency child object using the component menu.

This component uses a defined item, currency, equipment, etc. as the content for other HUD components – we’ll use it to select the currency we want to display. Any components we add to this game object or it’s child objects will automatically select it as it’s content provider, i.e. use the defined currency for content display.

The component itself will (in our setup) use the HUD’s combatant to get the item.

HUD Tooltip (Optional) #

If you want to display a Tooltip HUD when the cursor is over the currency HUD, add a HUD Tooltip component to the Currency child object using the component menu.

The Content Provider will automatically use the HUD Combatant Item component as it’s content provider, displaying the tooltip for the selected currency.

Currency Content #

Use the scene hierarchy context menu on the Currency child object to add a text and icon content: ORK Framework > HUD > Content > Status Text+Icon Content

Rect Transform #

Select the Status Content child object that was created, we’ll adjust it’s positioning to match it’s parent.

ORK HUD Status Text Content #

This component defines the content that’s displayed.

We want to display currency content, while there is no specific status type for currency available, you can display all of the currencies information using the Shortcut status type.

When displaying an item instead of currency, you can e.g. use the Item status type to show item specific information.

Image #

The Status Content > Image child object will display the icon of the currency.

If you want to adjust the size of the icon, you can e.g. use a Layout Element component and set a preferred width/height for the image.

Text #

The Status Content > Text child object will display the text, i.e. the quantity.

You can adjust the font, color and other settings in the TextMeshPro – Text (UI) component – let’s adjust it a bit.

The finished HUD will now look something like this.

Create Prefab #

Create a prefab out of the HUD, e.g. save it as Currency HUD.

We’re done with the prefab setup, you can now remove the canvas.

HUD Setup #

Navigate to UI > HUDs and add a new HUD.

HUD Settings #

Combatant Settings #

We only display this HUD for the player combatant, i.e. the leader of the player group.

Display Conditions #

You can use these settings to only show the HUD based on conditions. E.g. only when the player controls are active, 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 Changes #

And that’s it for the HUD setup.

Don’t forget to save your changes by clicking on Save Settings at the bottom of the editor.

Testing #

Hit play and test your HUD – naturally, you need some of that currency, or it’ll just display with 0.

The in-game HUD will display the currency’s icon and current quantity in the player’s inventory.

Tip: Other items #

You can use a similar setup to display other items, equipment or abilities (via the HUD Combatant Ability component instead of the HUD Combatant Item component).

This can also include additional information, e.g. reuse times, equipment durability and more.

See this tutorial from the 3D Action RPG series, which uses a similar set up display the potions and grenades of the player.

Tip: Use as a template #

You can use such a setup as a template, e.g. to use it in menu screens.

For this, disable the Auto Display settinf or the HUD (i.e. it’ll not be displayed as a regular HUD, but you can also keep it on in case you still want to display it regularly).

In your menu screen, add a Combatant menu part.

Combatant (Part) #

Entry Page 0 #

The already added Entry Page will define the content that’s displayed. We add our HUD template here.

Don’t forget to save your changes by clicking on Save Settings at the bottom of the editor.