Making an RPG HUD

rpg_hud

This image above shows the RPG HUD that I made, it’s not perfect and doesn’t fully work, but there’s enough to write about which was the main reason for creating it.

Basic Structure

The structure of the hud is made up of 5 main panels:

  • Health and armour
  • Hunger
  • Player doll
  • Two more panels which combine all the elements together.

Health, Armour and Hunger

The health, armour and hunger bars are hardcoded to be rendered a specific way, they have one image for a full icon, an image for half an icon and a background image. They are also made to decrease in a specific direction, as well as having hardcoded animations to them.

The player’s hearts will move up and down slightly when the player is low on health, also there is a wave animation that happens when the player is being healed via regeneration.
The food icons on the hunger bar will move up and down slightly as well.

What I have done is replace these icons with a plain colour and a plain background, I then place two images over the top of them, the bars to separate the full bar into each half heart/food/armour, as well as another image to apply a ‘highlight’ to these individual segments.

health_bar

The reason the overlay and the highlights are separate images is due to how gui textures are handled, they support transparency but only support translucency through a json variable, meaning the highlights would have to be fully opaque and then wouldn’t work properly, so the highlights are put into another image then this image has it’s alpha changed within the json itself.

The bar overlay will overlap some pixels on the edge of the health/armour/hunger bar, this helps to ‘remove’ the animations that happen, as you can no longer see the bar moving up and down slightly behind the image.

The final small change I made to the bars is to use two renders instead of one, with one bar rendered slightly lower than the other. This is because the bars have a fixed size, by having two renders, with one lower than the other, the bar is taller than it would normally be, which looks a lot nicer when the bars are styled to look like this.

{
“heart_rend_1@heart_renderer”: {
“offset”: [2, 17],
“controls”: [ … bar overlay images … ],
“bindings”: [ … ]
}
},
{
“heart_rend_2@heart_renderer”: {
“offset”: [2, 23],
“bindings”: [ … ]
}
}

Player Doll

The player doll is the small player render that can be seen in the top left corner of the screen. The player doll is kept in it’s own panel as you can turn it on and off in the video settings, and we want to be able to hide the player doll, including the background, without affecting the other hud elements.

The player doll combines three parts, the dirt background, the dark overlay (to create a light border around the edge), and the player render itself.
The dark square in the centre is a black teture resized, with it’s alpha changed within the json itself, while the dirt background is simply pulled from the actual dirt block texture.

“player_doll_background”: {
“type”: “image”,
“texture”: “textures/blocks/dirt”,
“size”: [50, 50]
},

“player_doll_background_overlay”: {
“type”: “image”,
“texture”: “textures/ui/black”,
“size”: [46, 46],
“alpha”: 0.7
}

This means we don’t have to supply a new dirt texture with a darkened centre, and so the dirt background will actually change depending on other resource packs enabled.

dirt_block
PureBDcraft textures enabled

Combining it all

There are two main panels that combine all the elements together, both of them are stack panels.
Stack panels are similar to normal panels, but they combine their elements into either a row or a column depending on the ‘orientation’, this can either be ‘horizontal’ or ‘vertical’.

{
“type”: “stack_panel”,
“orientation”: “vertical”,
“controls”: [ … ]
}

Stack panels will automatically resize themselves depending on the elements that are visible, this means if an element is no longer visible all the elements to the right, or below, will move accordingly.

Certain elements on our hud will not be visible under certain circumstances, by using a stack panel this means we can easily move elements to fit the screen appropriately.

Hiding Elements

Certain elements on the hud are designed to hide themselves under certain circumstances, as we’ve added in new elements, the dirt background, the bar overlays, they need to be made to hide themselves under specific situations, this is done with a binding override.

We make the panels that contain the elements become invisible by overriding their ‘#visible’ binding with another binding depending on when we want the elements to be removed.

These bindings include:

  • #paper_doll_visible
  • #hud_visible
  • #is_armor_visible
  • #is_not_creative_mode / #is_creative_mode

You can override the binding through the bindings array, within an element. When you override the ‘#visible’ binding of an element the visibility of that element is tied to the statement that you override it with, ie when the statement is true, the element becomes visible and vice versa.

{

“bindings”: [
{
“binding_name”: “#paper_doll_visible”,
“binding_name_override”: “#visible”
}
]
}

This binding override will hide the element whenever the paper doll is not visible, ie it has been turned off in the settings menu.

Bindings are hard coded, and you can’t create new bindings, you have to use existing bindings, but you can also use simple logic statements for certain conditions.
When writing a logic statement it must be contained within parentheses ( … ), you can use the keywords: ‘not’, ‘or’, and ‘and’.

“binding_name”: “(not #paper_doll_visible)”

This will be true when the paper doll is not visible.
If you override the ‘#visible’ binding with this statement then the element will be visible only when the paper doll is not visible.

These are used in the hud to remove the extra images, when in creative mode, and panels we created to move the elements easily.
This also shows and removes padding panels, blank panels that contain no elements but have a fixed size, these will be shown under certain circumstances to move elements into correct positions when other elements are hidden or shown. These are used for several things in the RPG hud, incuding pushing the hunger bar along when the paper doll is removed, and moving the chat up and down, depending on the visibility of the paper doll.


Download the mcpack, to view the entire json for yourself.

< See all bedrock json GUI tutorials