6
Jan

How to Create a Health Bar in Godot 3.1


Learn how to create a health bar to visually
represent the health that a character has. You’ll also learn how to polish the health
bar so that it looks fantastic while maintaining consistency and accuracy. Howdy, welcome to Game Endeavor! Learn practical dev skills and improve the
quality of your games by subscribing and ding-a-linging that bell. You now have a health system in your game. But you may want to display the character’s
health, otherwise you will cause confusion about how much health the character actually
has. Let’s go ahead and get started. Luckily, Godot has a built in health bar of
sorts that we can take advantage of. It’s the TextureProgress control node, and
despite its name, it functions similar enough to a health bar, so we’ll be using that. I’ve created a scene with a control root
that will contain our health bar. With this progress bar, there are three graphics
we can set to establish how the health bar will look. The `Under` which is what will be displayed
beneath the health bar. The purpose of this is to show how much health
the character could have if they were at max health. This is usually dark in color, so as to not
grab a lot of attention. There’s an `Over` texture, which is what
is shown on top of the health bar. This is usually a border and is mostly transparent. Then there’s the `Progress` texture, which
is what visually displays the amount of health that the character has. For this I will be using a white texture. This is because we can also adjust the tint
of the health bars, which we’ll use to tell the player how dangerously low their health
is. Initially I will set it to a green color. This health bar can be instantiated on a character
so that it moves around with them, or on the HUD so that the player always sees it. You would typically do this for the player
character. Inside of the script, we can just create a
method that updates the value of the health bar, create a method for updating the maximum
health of the character, and voila, we have a health bar. But personally, I like for my games to have
a little more polish to them, and this is simply not enough. So how about we expand this a little bit. One of the easiest upgrades we can make is
rather than setting the value instantly, we can ease it down using a tween. So I’ll add a tween node, cache it in our
script, and use it to interpolate the value property of our health bar. The interpolation will start at the current
value of our health bar, and end at the value passed into the method. Give it whatever durations and easings you
would like. Then start the tween and you’ll see that
it’s a much smoother transition. However, as a game designer, this is not optimal. During the tweening, you’re not showing
an accurate representation of the player’s health. So during that time, they may think they have
more health than they actually do. Suspense is great in games, but this isn’t
the place for it. And with the easing, it’s not initially
clear how much health the character lost. You have to wait a little bit to know what
impact the damage had, and even in that fraction of a moment, the player may have forgotten
exactly how much health they had. So remove the easing, we’re not going to
use it. What was the point you ask? Am I so cruel that I enjoy teasing you with
the idea of using a tween, and then pulling the rug out from under you? Absolutely, but that’s not relevant here. Instead, we’re going to place another progress
bar behind our health bar, color it red, and ease it instead. What you end up with is a little red bar that
shows how much damage was dealt, and you have that nice easing effect we desire. You can also add a delay for a little more
impact. Make sure to remove the under texture from
the top health bar and add it to the 2nd health bar instead. Now we need to address the color of the health
bar. It’s.. Always green. Meaning that no matter how crippled your character
is, that happy little green bar is always going to be sunshine and rainbows. How about we rain on its parade. Before doing this, let’s pick the colors
for each of the states. I’m going to store these in export variables
so that we can adjust them externally. I will create a `healthy_color` export variable
to store what color the health bar should be when it has plenty of health. We’ll give it the color hint, so that you
can customize it in the inspector, and I will default to Color.green. A `caution_color` export variable for when
the player should be a little more concerned. It has the color hint as well and will default
to Color.yellow. And then we’ll create a `danger_color` export
variable, which as you guessed has the color hint and will default to Color.red. We also want to know when these different
colors take effect, so we’ll create an export variable with a float hint from 0 to 1 with
a step of 0.05. I’ll name this variable `caution_zone` and
default it to 0.5. This will determine at what percentage of
health is considered cautious and will turn the health bar yellow. We’ll then create another variable just
like this one , except it will be called `danger_zone` and default to 0.2. Now to keep things nice and tidy, I’m going
to create a function named `_assign_color()` and call it in our `_on_health_updated()`
method, passing to it the health variable. In this method, we’re going to check to
see what the health variable is, and decide what color our health bar should be. We will do this in reverse order, checking
if health is in the “Danger Zone!” by saying `if health

Tags: , , , , , , , , , , , , , , , , , , , , , , , , ,

18 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *