Health Bar
Introduction
Introduction
Health bars are common UI elements in games. A similar element to health bars are progress bars. Even though the two are used in different situations, the layout for these two is the same.
Creating the Component
First we'll define the component:
Open Gum
Open or create a new Gum project
Right-click on the Components folder
Name the component HealthBar
Resize the HealthBar component so it is wider than it is tall. For example, assign a Width of 200 and Height 32.
Adding a Background
Next we'll add a background to our HealthBar Component
Select the newly-created ColoredRectangleInstance
Select the Alignment tab
Click the Fill Dock button
Change the ColoredRectangleInstance color to black
Now we have a black background to our HealthBar
Creating an Inner Container
The HealthBar displays its current health with another rectangle. This second rectangle will be contained inside a container, which will provide a boundary. To add an inner container:
Drag+drop a Container onto the HealthBar
Select the Alignment tab
Click the Fill Dock button
Change Width and Height to -8 to provide a 4 pixel margin on each side.
Adding the Foreground Rectangle
Finally we'll add the foreground rectangle which displays the health:
Drag+drop another ColoredRectangle onto the ContainerInstance
Click the Alignment tab
Click the Fill Dock button
Change the following values:
X Units to Pixels from Left
X Origin to Left
Width to Percentage of Container
Width to 100
Now, the Width value can change between 0 and 100 to indicate the health percentage.
Exposing the Width of the inner rectangle may be needed to change instances of each HealthBar.
Last updated