Adding Health Bar and Stamina Bar
Adding Health Bar and Stamina Bar
Embedded Files
HEALTH BAR
HEALTH BAR
In the Player scene
In the Player scene
Add a new CanvasLayer node as a child of Player
Add a new CanvasLayer node as a child of Player
Rename it to UI
Rename it to UI
Add a new ColorRect node as a child of UI
Add a new ColorRect node as a child of UI
Rename the ColorRect to HealthBar
Rename the ColorRect to HealthBar
Add another ColorRect as a child of HealthBar
Add another ColorRect as a child of HealthBar
Rename it to Value
Rename it to Value
Select the HealthBar node
Select the HealthBar node
Set the color to dark grey
Set the color to dark grey
The exact hex code is: 3a39356a
The exact hex code is: 3a39356a
For the HealthBar
For the HealthBar
In the Layout Section
In the Layout Section
Set the Anchors Preset to Bottom Left
Set the Anchors Preset to Bottom Left
In the Transform Section
In the Transform Section
Set the size to 100 x 10
Set the size to 100 x 10
Set the position to 5, 155
Set the position to 5, 155
Select the Value label node
Select the Value label node
Set the color to green
Set the color to green
The exact hex code is: a4de79
The exact hex code is: a4de79
For the Value Label
For the Value Label
In the Layout Section
In the Layout Section
Set the Anchors Preset to Center
Set the Anchors Preset to Center
In the Transform Section
In the Transform Section
Set the size to 98 x 8
Set the size to 98 x 8
Set the position to 1 , 1
Set the position to 1 , 1
Select the HealthBar node
Select the HealthBar node
Attach a new script to it
Attach a new script to it
Create a ready variable to reference the value node
Create a ready variable to reference the value node
Create a function to update the the health bar
Create a function to update the the health bar
It receives two parameters
It receives two parameters
health which is the current health
health which is the current health
max_health which is the maximum value
max_health which is the maximum value
finally fill the value bar with green color
finally fill the value bar with green color
based on the percentage health available
based on the percentage health available
98 is the full width of the bar
98 is the full width of the bar
health / max_health gives a number between 0 and 1
health / max_health gives a number between 0 and 1
So if health is 50 and max_health is 100
So if health is 50 and max_health is 100
98 * (50/100) = 98 * 0.5 = 49
98 * (50/100) = 98 * 0.5 = 49
The bar will be 49 pixels of green
The bar will be 49 pixels of green
STAMINA BAR
STAMINA BAR
Duplicate the HealthBar node
Duplicate the HealthBar node
Rename it to StaminaBar
Rename it to StaminaBar
Select the StaminaBar
Select the StaminaBar
Increase the Y position
Increase the Y position
To move it below the HealthBar
To move it below the HealthBar
Select the Value Label
Select the Value Label
Change the color to blue
Change the color to blue
The exact Hex value is: 377c9e
The exact Hex value is: 377c9e
For the Value Label
For the Value Label
In the Layout Section
In the Layout Section
Set the Anchors Preset to Center
Set the Anchors Preset to Center
In the Transform Section
In the Transform Section
Set the size to 98 x 8
Set the size to 98 x 8
Set the position to 1 , 1
Set the position to 1 , 1
Select the StaminaBar node
Select the StaminaBar node
Attach a new script to it
Attach a new script to it
Create a ready variable to reference the value node
Create a ready variable to reference the value node
Create a function to update the the stamina bar
Create a function to update the the stamina bar
It receives two parameters
It receives two parameters
stamina which is the current stamina
stamina which is the current stamina
max_stamina which is the maximum value
max_stamina which is the maximum value
finally fill the value bar with blue color
finally fill the value bar with blue color
based on the percentage stamina available
based on the percentage stamina available
98 is the full width of the bar
98 is the full width of the bar
stamina / max_stamina gives a number between 0 and 1
stamina / max_stamina gives a number between 0 and 1
So if stamina is 50 and max_stamina is 100
So if stamina is 50 and max_stamina is 100
98 * (50/100) = 98 * 0.5 = 49
98 * (50/100) = 98 * 0.5 = 49
The bar will be 49 pixels of blue
The bar will be 49 pixels of blue
ITEM AMOUNTS
ITEM AMOUNTS
Select the UI node
Select the UI node
Add another ColorRect as a child
Add another ColorRect as a child
Rename it to AmmoAmount
Rename it to AmmoAmount
Add a Sprite2D as a child
Add a Sprite2D as a child
Rename it to Icon
Rename it to Icon
Add a Label as a child
Add a Label as a child
Rename it to Value
Rename it to Value
Select the AmmoAmount node
Select the AmmoAmount node
To create a transparent grey box
To create a transparent grey box
Set the color value to 3a39356a
Set the color value to 3a39356a
Set the size to x: 40, y: 20
Set the size to x: 40, y: 20
Set the position to x: 5, y: 8
Set the position to x: 5, y: 8
Select the Icon node
Select the Icon node
For the texture navigate to
For the texture navigate to
assets --> Icons --> shard_01i.png
assets --> Icons --> shard_01i.png
Set the Icon position to x: 10, y: 10
Set the Icon position to x: 10, y: 10
Select the Value node
Select the Value node
Set the text property to 0
Set the text property to 0
Set horizontal and vertical alignment to center
Set horizontal and vertical alignment to center
Set the anchor to center right
Set the anchor to center right
Set size to x: 19, y: 26
Set size to x: 19, y: 26
Set position to x: 21, y: -3
Set position to x: 21, y: -3
Change the font by choosing Theme Overrides
Change the font by choosing Theme Overrides
Then choose Fonts
Then choose Fonts
Then choose Quick Load
Then choose Quick Load
Select ARCADE CLASSIC
Select ARCADE CLASSIC
Set the Font Size to 20px
Set the Font Size to 20px
The finished element
The finished element
is shown
is shown
Duplicate the AmmoAmount Node
Duplicate the AmmoAmount Node
Twice!
Twice!
Rename the first duplicate to
Rename the first duplicate to
HealthAmount
HealthAmount
Rename the second to
Rename the second to
StaminaAmount
StaminaAmount
Set the position of HealthAmount to x: 50, y: 8
Set the position of HealthAmount to x: 50, y: 8
Set the position of StaminaAmount to x: 95, y: 8
Set the position of StaminaAmount to x: 95, y: 8
Change the HealthAmount Icon to potion_02c.png
Change the HealthAmount Icon to potion_02c.png
Change the StaminaAmountIcon to potion_02b.png
Change the StaminaAmountIcon to potion_02b.png
XP AND LEVEL INFO HUD
XP AND LEVEL INFO HUD
Add another ColorRect
Add another ColorRect
Rename it XP
Rename it XP
Add two Labels as Children
Add two Labels as Children
Rename the second Label Value
Rename the second Label Value
Set the XP node color to 3a39356a
Set the XP node color to 3a39356a
Set the size and position as shown
Set the size and position as shown
Change the font of both labels
Change the font of both labels
to ARCADECLASSIC
to ARCADECLASSIC
Set the font size to 15
Set the font size to 15
Change the Text of the Label to
Change the Text of the Label to
XP:
XP:
Change the Text of Value to
Change the Text of Value to
100 / 100
100 / 100
Change the anchor of the Label
Change the anchor of the Label
to centre left
to centre left
Set Horizontal alignment to Right
Set Horizontal alignment to Right
Set Vertical alignment to Center
Set Vertical alignment to Center
Change the anchor of the Value label
Change the anchor of the Value label
to centre right
to centre right
Duplicate the XP node
Duplicate the XP node
Rename it to Level
Rename it to Level
Change the Level position
Change the Level position
y: 160
y: 160
Change the Text of Label to
Change the Text of Label to
Level
Level
Change the Text of the Value to
Change the Text of the Value to
1
1
The final game GUI is now shown
The final game GUI is now shown
Page updated
Google Sites
Report abuse