Originally, the health bar was a placeholder for quite some time, a green block on top of a gray block. However, that was too boring and, as someone pointed out, didn’t fit with the rest of the game’s aesthetic.
So I started designing a health bar in watercolor. The following article is a look at it.
Creating with Watercolor
First, I created the outline of the life bar with microns, which is the dragon in the center. I also created two watercolor fields to fill the life bar. The effects in the fields are created like this: First, you create a flat base of the paint and let it dry. Then, you crumple up some aluminum foil and prepare it. Now, you apply a second layer of the same color of watercolor. While the base is still wet, you place the aluminum foil on top and let it dry. You may need to place something heavy on top to hold the foil down.
The linework is cut out in an image editing program and used as a “shape” to cut the shape of the health bar from the color fields.
Several versions are saved: a full and an empty health bar. Now it would be possible to easily change the color of the health bar using color correction, but I went to the extra effort of creating a second color pool and using it to create the underlying health bar.
The Integration
There were some minor issues integrating the health bar into the game.
I use the ProgressBar, not the TextureProgressBar, and configure it under Style so that it behaves correctly. It’s important with this approach to correctly place the images in the style. The respective images must be inserted into a StyleBoxTexture in Background and Fill under Styles.
It’s important to set all values in Content Margins to 0 so that the health bar behaves correctly as the number decreases. Except for the bottom of the background, otherwise the image disappears. For Fill, Axis Stretch > Vertical must be set to Tile, then the health bar is ready.
Taja’s life bar was created with watercolors and bubble wrap, including a red gradient to indicate danger.
Conclusion
I used the same concept to create personalized health bars for Taja. The health bar has a silhouette and tail, and the uses of personalized health bars are getting interesting!
I’ll have to improve the readability a bit, but the current state of the health bar is definitely a huge improvement over the placeholders that previously showed the creatures’ vitality.
Thanks for reading, and have a nice day! 🙂
Here is some more about the combat scene
