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.
