Jump to a section

• Summary
• Design
• Technical
• Testing

The Health Bar feature of the game allows you to see the health of characters, buildings and other game aspects with a health stat.

The goal is to use the component system already present in the game to be able to attach a HealthBarComponent to any entity with CombatStatsComponent. The HealthBarComponent is a renderable component that will show up in the game above characters centered. As shown below:

The entities' health is constantly updated and the health bar moves along with the entity.

While designing the health bar component there were a few technical challenges. The one that persisted the longest was the fact that the renderer wasn't operating in pixels but in units. Through some research it was realised how to render in pixels, leading to the creation of RenderUtil. This is a set of utilities created to help one render in pixels. For more information on how to use RenderUtil see Javadoc. A second utility class, DrawableUtil, was also created to help with the creation of a pixmap to use for the actual display of the health.

The technical implementation followed the architecture that was already given, creating loosely coupled components that can be attached to the entities. The HealthBarComponent implements Renderable and hence overrides draw(SpriteBatch). When called, it correctly reflects the health of the character and renders it on the screen. The health is retrieve from the sister component CombatStatsComponent

Please note that the health bar's constructor must be called with two arguments. width and height both of which are in pixels. It should also be noted that CombatStatsCompnent must be added to the entity first before adding HealthBarComponent otherwise the behaviour is undefined.

The health bar can be attached to an entity the same way as any other component by following the below method:

entityName.addComponent(new HealthBarComponent(width, height));

For example:

ghostKing
     .addComponent(new CombatStatsComponent(config.health, config.baseAttack))
     .addComponent(animator)
     .addComponent(new HealthBarComponent(100, 10))
     .addComponent(new GhostAnimationController());

It uses a runnable callback for you to put in all your draws that should be rendered in pixels. It will switch back to units when it's done.

/* We need to temporarily render in pixels */
RenderUtil.renderInPixels(batch, () -> {
    this.progressBar.draw(batch, 1);
});

Testing was conducted in Studio with paired teams.

• Get Feedback from team members
• Does the HealthBar adjust correctly as damage is taken (test on player)
• Does HealthBar correctly stand on top of other entities
• Do users understand when the health is low

• Add a number to indicate how much health remains
• HealthBars might clutter up the screen. Allow them to show up on hover
• Try and match the game aesthetic of pixel art