Fast World Space Health Bars Without A Canvas

Goal: Quickly create a working healthbar without using a canvas

It’s been a while since I did a programming tip so here’s a quick and easy way to set up World Space health bars using Sprites instead of the canvas. Here’s how it looks:

As per usual, let’s breakdown the behaviour of our bar and then translate that into code:

1. Have the sprite face the camera
2. Change the scale of the X axis to match the missing percentage of the character’s health

Step 1: Face the Camera

This can be done simply with one line of code like this:

Camera.main refers to the camera in your scene that’s tagged as “Main”. The second is asking for which way it Up in your world so that it knows which way to orient itself.

Step 2: Finding the Ratio

All it takes for this is some really quick math. Who here remembers how to calculate percentages and ratios? It is simply division. In our case, we want the ratio of our X scale to our character’s health. That way we can multiply our health by that ratio to get the proportional X scale for our health bar. Like so:

Here’s the code example for the player taking damage and setting the health bar’s X scale accordingly:

What’s dynamic damage used for? It’s a technique I found used by Square Enix in Final Fantasy XII in order to make the damage a little bit variable so that the exact same numbers don’t pop up every time you deal damage. It’s mainly a Game Feel detail. The Final Fantasy XII wiki is a great resource for formulas and other RPG math implementations and I would highly recommend checking out some of the pages.

Why are we clamping the newScaleX this is very small detail that many players wouldn’t notice unless it’s not there. This is to prevent the health bar rolling over backwards and going the wrong way. It’s a small detail of polish that’s will prevent your game from looking amateurish.

And that’s done!

Hope that helps! ^_^b