Using simple numbers to show health is great for prototypes. It is quick to create when you are testing gameplay.
You'll want more polished elements as you advance to the next stages of development.
That's where health bars come in. They are the next level of polish above just numbers. An animated health bar is another level above that.
In this article, we will look at creating an animated health bar that is made up of 3 image segments for your Phaser 3 game.
Project Set Up
We'll be using the UI Pack: Space Expansion assets by Kenney.
The horizontal bar assets are composed of 3 parts: left end, middle, and right end.
There's also a set of shadow assets that will be used to show the full size of the bar as it drains or fills.
The example code assumes a project using the phaser3-parcel-template that places static assets in a
This information should help you adapt the examples to your game.
Drop your email into the box below to get this free 60+ page book and join our newsletter.
Load Bar Assets
We are using the green bar segments as well as the corresponding shadow segments.
The shadow segments will be placed under the green bar so that we can visually tell
We key the individual segments based on their position: left, middle, or right. Then the corresponding shadow segments have a
Create Shadow Bar
The shadow bar will be created first so that it will be rendered behind the health bar.
We will also need to specify a width size that represents the bar at 100% filled. It will be set as a class property in
You are free to use any number you want. We are using
300 in this example.
Now, let's create the shadow bar:
Notice that we set the origin to
(0, 0.5) for all the segments. This makes it easier to calculate where each segment should go relative to each other.
The origin we've selected is the middle left of the segment. This lets us use the
x position and
width of one segment as the position of the next segment.
The middle segment needs to sit next to the left segment and the right segment needs to sit next to the middle segment.
Because the middle segment will be variable width depending on the health value, we are using
displayWidth on line 14 when specifying where the right segment should be placed.
The starting width of the middle segment is set on line 12 to be
Create Health Bar
The health bar is almost identical to the shadow bar that we just created.
The key difference is that we want the segments to be stored as class properties. This will allow us to animate it later.
Creating the actual health bar should be familiar. It uses the same origin and calculations as the shadow bar above.
setMeterPercentage(percent = 1) method that calculates the expected width of the meter based on the
We get the resulting
width on line 20 by multiplying
this.fullWidth with the given
Then we set that value to
this.middle.displayWidth and move the right segment based on this new width.
Try it out and you should see the bar change size depending on the value given as
percent. If your character health is using values from
100 then you'll need to divide by
100 to provide a proper percentage.
Animating the Health Bar
Now that the basics are done, we can get to the sexy stuff!
We'll use a tween to animate the health bar from its current value to the desired new value.
This can seem like a lot if you are not familiar with tweens.
First, we created a new method with a similar signature to
setMeterPercentage(percent = 1) from earlier. You can have both for simplicity or try to merge them into a single method.
We added an extra
duration parameter to define how long it should take the bar to animate.
The desired width is calculated in the same way we've done before on line 3.
Then we create a tween with
this.add.tween() and pass in a configuration.
targets property is set to
this.middle because that is the image we want to make bigger or smaller.
displayWidth property is what we want to change on
this.middle so we set it to the desired width. Then we give the
duration and an
onUpdate callback is used to move the right segment as the middle segment changes in size. Notice that we also adjust the visibility of the segments on lines 13 - 15 to ensure nothing is shown if the
displayWidth is 0.
Give it a test by calling
You should get something that looks like this:
You can play around with different easing options to get a different feel.
If you need to move the health bar with a character or enemy then consider creating it in a
Be sure to sign up for our newsletter so you don't miss any future Phaser 3 game development tips and techniques!
Drop your email into the box below.
Don't miss any Phaser 3 game development content
Subscribers get exclusive tips & techniques not found on the blog!
Join our newsletter. It's free. We don't spam. Spamming is for jerks.