14 Item HUD

In this tutorial we’ll set up a HUD to show the player’s items.

We’ll show the quantity and running reuse time of the potion and grenade items in a HUD.

We’ll set up:

  • the HUD’s prefab
  • the HUD (in the editor)

Let’s get to it!

HUD Prefab Setup #

The HUD will be displayed in the lower right corner of the screen, each item will be displayed on a background item and show their icon (also used as a value bar for the reuse time), the quantity in inventory and the reuse time (when it’s running).

HUD Base #

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 #

Change the settings in the following order.

Select the bottom right anchor preset.

  • Pivot
    Set to X=1, Y=0.
  • Pox X
    Set to -50.
  • Pos Y
    Set to 50.
  • Width
    Set to 200.
  • Height
    Set to 150.

Potion #

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

Rect Transform #

Change the settings in the following order.

Select the bottom left anchor preset.

  • Pivot
    Set to X=0, Y=0.
  • Pox X
    Set to 0.
  • Pos Y
    Set to 0.
  • Width
    Set to 100.
  • Height
    Set to 100.

Image #

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

  • Source Image
    Select ItemRound.

HUD Combatant Item #

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

This component uses a defined item as the content for other HUD components – 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 item for content display.

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

  • Type
    Select Item.
  • Item
    Select Potion.
  • Show Empty
    Enable this setting.
    If the combatant doesn’t have any of the defined item, it’ll be displayed with a quantity of 0.
    Otherwise the game object would be disabled.

Potion Icon #

Use the scene hierarchy context menu on the Potion child object to add an icon content: ORK Framework > HUD > Content > Status Icon Content

Rect Transform #

Select the stretch stretch anchor preset.

  • Left
    Set to 15.
  • Top
    Set to 15.
  • Right
    Set to 15.
  • Bottom
    Set to 15.

ORK HUD Status Text Content #

This component is used to define which status will be displayed.

We’ll use it to show the item’s icon – since we only have an Image component and no text attached, we can ignore the text.

  • Status Type
    Select Item.
  • Use Content Icon
    Enable this setting.

Image #

Select any sprite as a dummy content in the Source Image setting to be able to set up the icon filling settings.

  • Source Image
    E.g. select icons_54 to show how the potion’s icon is displayed.
  • Image Type
    Select Filled.
  • Fill Method
    Select Vertical.
  • Fill Origin
    Select Bottom.

You can now remove the dummy sprite again (or keep it, it’ll automatically be replaced by the item’s content anyway). This’ll hide the settings we made, but the setup will still remain as we set it up.

Potion Value Bar #

Use the scene hierarchy context menu on the Potion child object to add a value bar: ORK Framework > HUD > Content > Value Bar (Sprite)

However, we don’t need the sprite child objects, so remove the following game objects:

  • Value Bar > Empty Sprite
  • Value Bar > Value Sprite

We’ll instead use the icon we added as the value bar.

Rect Transform #

  • Left
    Set to 0.
  • Top
    Set to 0.
  • Right
    Set to 0.
  • Bottom
    Set to 0.

ORK HUD Value Bar Content #

We’ll use the value bar to display the reuse time, filling the item’s icon.

  • Value Type
    Select Reuse Time.
  • Invert Time
    Enable this setting.

HUD Value Bar #

We’ll use the icon’s Image component as the value sprite.

  • Value Image
    Select the Image component from the Status Icon Content child object.
    E.g. just drag the child object on the field.

Potion Reuse Time Text #

Use the scene hierarchy context menu on the Potion child object to add a text content: ORK Framework > HUD > Content > Status Text Content

Rename the created game object to Reuse Time.

Rect Transform #

Select the stretch stretch anchor preset.

  • Left
    Set to 0.
  • Top
    Set to 0.
  • Right
    Set to 0.
  • Bottom
    Set to 0.

ORK HUD Status Text Content #

  • Status Type
    Select Reuse Time.
  • Default Content (Text)
    Set to: <time>

TextMeshPro – Text (UI) #

This component handles displaying the text.

  • Font Size
    Set to 20.
  • Vertex Color
    Select a white color with full alpha.
    E.g. I’m using this hexadecimal color code: FFFFFF
  • Alignment
    Set to Center and Middle.
  • Wrapping
    Select Disabled.

Potion Quantity Text #

Duplicate the Reuse Time game object and rename the copy to Quantity.

ORK HUD Status Text Content #

  • Status Type
    Select Item.
  • Default Content (Text)
    Set to: <quantity>

TextMeshPro – Text (UI) #

This component handles displaying the text.

  • Font Size
    Set to 30.
  • Vertex Color
    Select a yellow color with full alpha.
    E.g. I’m using this hexadecimal color code: FFFF00
  • Alignment
    Set to Right and Bottom.

That’s it for the potion – the hard part is over.

Grenade #

Duplicate the Potion child object and rename the copy to Grenade.

Select the top right anchor preset.

  • Pivot
    Set to X=1, Y=1.
  • Pox X
    Set to 0.
  • Pos Y
    Set to 0.
  • Width
    Set to 100.
  • Height
    Set to 100.

HUD Combatant Item #

  • Item
    Select Grenade.

And that’s it – the finished HUD should look like this (with the dummy icons):

Don’t forget to remove the dummy icons before creating a prefab out of it!

Create Prefab #

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

We’re done with the prefab setup, you can now remove the canvas (if you’ve worked in the Scene scene).

HUD Setup #

Navigate to UI > HUDs and copy the Player Health HUD.

HUD Settings #

  • Name
    Set to Items.

Unity UI #

  • HUD Prefab
    Select the Items HUD prefab.

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 (in the Scene scene) and you’ll see your items in the bottom right corner of the screen.

It works and displays our icons and quantities.

Using items reduces the quantities and displays the reuse time (and fills the icons).

 

Next, we’ll add the final enemy – the grenadier.