 This video was brought to you by my patrons, a special thanks to God of Grants, Kishu, Kyle, Mike King, Shayla, and Tic Biscuit. Thank you so much for your support. If you want to support me and the work I do, you can also become my patron. All the links will be in the description. This is a bonus video on the series of health bars in Godot Engine. In the previous videos we saw how we can break the responsibility of managing the health data and displaying it as a progress bar for the player. We also saw how to implement the health bar in various situations, including handling it in 3D space. In this video we'll see how we can improve the feel of the health bar by animating it. We'll also see how we can use a gradient to change the health bar's color depending on its current value. So let's get started. So let's start by juicing up the health bar to animate it a bit and provide a better visual feedback for the players. The first thing that I will do is that I will go to the interface, the health bar, to the health bar scene and I will create a new inherited scene from this one. So scene, new inherited scene, and I will choose the health bar, this one. And I will rename this to juicing health bar. Let's add a twin as its child and also an animation player. So I will make a very simple animation to make the health bar twinkle a bit. So I will create a new animation here, new twinkle. And let's decrease this snapping resolution here to 0.05 and I will increase the zoom. Let's go to the health bar, to the process bar here. Right at the bottom we have the visibility category. And I will insert a key for the self-modulate property. So here at the timeline I will create a new animation right about here, I guess. We can tweak this later. And I will select this key and duplicate it. And I will change this value and I will toggle raw. And we set this to be 1.5, 1.5, 1.5. So it will be a very brighter color rather than just being modulated as white, pure white. So I will increase the modulation to make it be brighter, like this. So now we can basically just copy and duplicate these keys a few times. I think that will decrease this to make, let's see, yeah, it's not as fast as I want. It's more like a glowing now. So I want this to twinkle. And let's set the duration to 0.30 seconds. So this. Yeah, this is what we want. So with that I will save this scene, GCF bar, OK, and let's attach a script to it. Create GCF bar, OK, create. Very simply what we will do is that we will create references for the twin and for the animation player. And what we will do here is I will open the documentation for progress bar range. If we go to the set value, if you go to the value property, we'll see that we have the set value method as a setter for this property, right? And this is what we were using in the previous health bars. We were accessing this as a callback for the health when the health changed. And this will set the value to mimic the value of the health node. But the thing is with good engine, we cannot override setters and getters, building setters and getters. So we cannot do proper polymorphism in some way. So we cannot, for instance, we cannot do something like this function set value and call the make a super call for the parent set value method. So we cannot do that. Because this is not exposed to us for overriding. So but since we are going to set the value using this function anyway, we can quite of override it because it will override the method, but we cannot provide a super call for it because it's not accessible to us from the user side. It's only accessible through C++ and stuff like this. So low level stuff like this. So the first thing that we'll do is go to the animator and play the animation, twinkle. We will set the duration of this twinning because here we will twin the value to set it to be the new value here. So what we'll do is that we will set the duration of this twinning to be the duration of the current animation, current animation length. To do that, we can go to the twin and twin this, interpolate this property of the self. The node path is value. The initial value will be the current value and the final value will be the new value that we just received from calling this function, right? I will skip a line here and we'll use the duration for God's sake, come on here. We will use the duration and we will use a twin elastic to make a disinfect that it will bounce a little bit and we will use it only when the animation finished. With that, we can start the twin and that's it. If we open our test scene, so game, I will take rid of this enemy here and we will take rid of this previous health bar and we will instantiate this new JC health bar as a child of the interface instance and let's maintain its name so we don't break anything. Since both maintain the same interface, so the JC health bar maintains the health bar interface, we won't run into any problems. This is because we use polymorphism to set this method. So you can watch a video that I made about polymorphism. If you want, I will put the link in the top right corner. But without further ado, let's test this out, test scene. So yeah, there we have it. Now let's do something that Brackets also did. We will use a gradient to tint the health bar according to its current value. So again, I will go to the health bar and create a new inherited scene from here. And I will call this one tinted health bar. And I will close this, this, and this. And I will save it already, tinted health bar, okay. But for this one, we'll make something quite different. The first thing that we do is that I will change the type of the topmost node, the root node, and we use a texture progress instead. So let's set up the textures here. I've prepared some textures for this one. We have the over texture, that is the texture that will be drawn above everything else. We have the under, that is the bottom one. And we have the progress texture that we will use for displaying the progress of this progress bar. So this is what we have. And I will set this to 50. The reason why we change to a texture progress is because texture progress provides us a way to tint all of these textures. So for instance, we can tint the progress texture this way. And this is what we use to set the color depending on the value of this texture of this progress bar. So I will reset this. And let's attach a script to this, tint health bar, okay. The first thing that I will do is that I will export a gradient. And let's call this just graded. Next, let's create a callback for the value change signal. So font on value changed a new value. And what we'll do here in this method is that we will simply set the tint progress property to be the color that the gradient will return based on the value that we will provide. So we can provide a value in percentage or a normalized value actually. We can call the interpolate interpolate method. And we can pass the property that the range class has and range is the parent class of progress bar, which is the parent class of the texture progress. So we can use it here. So right here. And this will basically take the maximum value and divide it by the current value or the other way around to provide a ratio between the two. And this is basically it is as simple as that. So going back to the scene, we will connect the value changed signal to this on value changed method. And let's create a gradient here. So new gradient. And I will use the pure 36 padded to set up this gradient. So right at the beginning, we use this green color here. At the middle, we'll use a yellow color. So let me call it pick this yellow. And at the end, we will try to get I think that this reddish color here. So let me call it pick this. And I think that we'll move it right about here just so we get into this reddish color faster. So with that, if we go back to our testing and do the same, I will delete this one, delete it. Okay. And let's add the tinted health bar instead. Oops, let me take rid of the reference padded here. And let's rename this to just health bar. So we don't break anything. I will move it here. And if we test this, you can see that we already have the green color set. And as we take damage, it will move towards the reddish color. So that's it. It's working. So that's it. These are some nice improvements you can add to your health bar. You can even combine both to make it even more juicy. But for this video, that's it. Leave any questions, suggestions for more videos or any feedback in general in the comments. Don't forget to subscribe to the channel if you are not subscribed yet. And that's it. Support me on Patreon to support more of this content. Thank you so much for watching. Keep developing and until the next time.