Challenge: redesigning the battler’s HUD

In this challenge, you will redesign the battler’s HUD.

Currently, it works with a bar for life and discrete points for energy. Imagine that you realize you don’t want bars during development. Instead, you want to display the numbers for both health and energy, as in Final Fantasy games. Your task is to do that.

Requirements:

1. Your code changes should only affect the life bar and the energy bar scenes,
2. You can remove code you don’t need from UIBattlerHUD.gd, or rename variables, but you can’t add new code.
3. Using a label, display health with the form “HP: 10/20” and energy with the form “EP: 10/20”. HP stands for Health Points and EP for Energy Points.
4. Animate value changes using the scenes’ tween node.

Once you turn the health and mana points into text, they can share code. You can create a single base scene and script that you will instantiate twice, once for the life bar and once for the energy bar.

To do so, you may want to rename the UIEnergyBar.value into target_value so both the health and energy counters work the same way.

This challenge illustrates that you can code your UI so it’s not time-consuming to redesign or even replace entirely. Splitting UI into multiple scenes that encapsulate a widget allows you to completely change the way one component works without any other breaking.

The requirement and constraint to not add code to the UIBattlerHUD forces you to respect the existing nodes’ properties and methods.

I recommend you to create a copy of your project before doing this challenge so you don’t lose any of your progress in this series.