Adding Health Bar and Stamina Bar

HEALTH BAR

In the Player scene

Add a new CanvasLayer node as a child of Player

Rename it to UI

Add a new ColorRect node as a child of UI

Rename the ColorRect to HealthBar

Add another ColorRect as a child of HealthBar

Rename it to Value

Select the HealthBar node

Set the color to dark grey

The exact hex code is: 3a39356a

For the HealthBar

In the Layout Section

Set the Anchors Preset to Bottom Left

In the Transform Section

Set the size to 100 x 10

Set the position to 5, 155

Select the Value label node

Set the color to green

The exact hex code is: a4de79

For the Value Label

In the Layout Section

Set the Anchors Preset to Center

In the Transform Section

Set the size to 98 x 8

Set the position to 1 , 1

Select the HealthBar node

Attach a new script to it

Create a ready variable to reference the value node

Create a function to update the the health bar

It receives two parameters

health which is the current health

max_health which is the maximum value

finally fill the value bar with green color

based on the percentage health available

98 is the full width of the bar

health / max_health gives a number between 0 and 1

So if health is 50 and max_health is 100

98 * (50/100) = 98 * 0.5 = 49

The bar will be 49 pixels of green

STAMINA BAR

Duplicate the HealthBar node

Rename it to StaminaBar

Select the StaminaBar

Increase the Y position

To move it below the HealthBar

Select the Value Label

Change the color to blue

The exact Hex value is: 377c9e

Page updated

Google Sites

Report abuse