Designing a Boss: Bonus — Creating a Health Bar

Every Boss needs a Health Bar. A controversial stance, I know, but the effect that a Boss Health Bar can have is immeasurable. Ironic… cause a health bar… is literally a measure of… never mind.

The introduction of a Health Bar when there was none previously automatically tells the Player they are dealing with something different and new. Different and new can be scary, especially with video games. If you’ve made the game challenging so far and then introduce a Health Bar with a name, there will likely be an expletive from some Players.

The Health Bar isn’t just there to scare Players. It’s also there to inform the Player of their progress in defeating the Boss. It gives them hope. If a Player fights the Boss and takes out some of the Health Bar but fails to beat him, the Player may say: “But I got him down this far.” And they may try again and again, hopefully doing better and better each time.

So, how do we build one? A Health Bar is a simple component that can have many variations but for the most part, just needs a few pieces. A Fill and a Slider component are realistically all that is needed to make a Health Bar. We’ll also add a background though.

To get started, we add an image.

Then an Empty Object.

Make it the same size as the Health Bar will be.

The Empty Object will act as our container for our Health Bar.

Now, we add another Image for the Fill.

With it as a Child of the Health Bar object. Click on the Anchor Presets in the Rect Transform of the Fill Image and while pressing the Alt Key, Click the Stretch option. This also sets the Position of the Image.

Now, we add the Slider Component to the Health Bar. Disable most of the Slider’s options and then add our Fill into the Slider’s Fill Slot.

Now we can adjust the Fill with the Slider Component.

The coding portion is fairly straightforward. We want variables that keep track of current and max health and a reference to our Slider Component. We start by setting our values and some methods to add a subtract from currentHealth, setting the Slider Value in the process.

We assign our Slider and give the Max Health a value…

And we have a simple but working Health Bar.

I decided to add mine directly to the Boss so that when the Boss enters the game so does the Health Bar. There are several bells and whistles that you can add like a delay so that you can see how much damage you did this time or a display that tells you exactly how much damage you did. Figuring out how to do those features is a lot of fun too.

Thanks!