 This video is brought to you by my patrons, a special thanks to God of Grants, Kishu, Kyle, MyKing, Shayla and TicBiscuit. Thank you so much for your support. If you also like to support the work I do, you can join us at Patreon. The links will be in the description. This is the second video of the health bars in Godot Engine mini series. If you didn't watch the first yet, please pause and watch. The link will be in the description and if you are on YouTube, it will also be in the card at the top right. In this video, we will see how to implement the health bar node and the health bar using three different approaches. As a simple hood element, as a 2D actor element, and as a 3D actor element. So this is the most common setup for a game in Godot Engine. We have the topmost game node, which is basically what will manage all the high level logic. Then we have two layers. One for the game world, which I call level layer. And then another one for the interface. And this is the one that we will use to add our health bar. So I reorganize our project here. So now we have the interface folder and the health bar is inside of it. And I will instantiate it as a child of the interface. And I will move it right about here. Let me turn on the helpers again. I'll move it right about here. And I have a setup for a very simple game. This will be available in the link in the description, I'll put everything there. If we play it now, nothing happens, right? So the character will take damage, it will soon disappear, it will die. And the health bar isn't hooked to the layer yet. And here we have our first problem. In this scenario, how we will connect the health bar, which is in this hierarchy, to the player's health that is inside the test level, then inside the player. And here we have our health. How we will connect this to this. So since Godot Engine uses a composition design pattern, in this kind of design we try to get the most common ancestor between two entities of this context. So the common ancestor between the health bar and the health would be the game, the game node, because since the player is inside the test level and the test level is inside the layer level and the layer level is inside the game, the game will be the most common ancestor between all of these hierarchies. So here is where we will attach a new script. So let's attach a new script to the game and we'll quite simply just connect the health signals to the health bar methods, just like we did in the previous video. But now we'll use code because this way will be less spaghettified, let's say this way. So I will, inside the ready method, the ready callback, we'll try to find our player health that will be inside the level layer, test level, player health, this is what we want. And we will also want to find the health bar. So let's store a reference to it, it's inside the interface layer, interface health bar, health bar dot connect changed to help, let me just rename this. Let's connect this signal to the health bar, and then to the set value method. And let's also do the same for the set maximum or maximum change to the health bar. Set max method. So between the two videos, if you remember well, the initialized method in the previous video was a private method. But now I made it public so other notes can initialize this health. So when we initialize it will emit the two signals. So we start syncing it with whatever is connected to. So let's call the initialize method, player dot initialize, save it. And if we test this, if you move to the spike, the spike will deal some damage to the player. And you can see that the player's health is already connected to the health bar. So we already did what we wanted. Now to hook the health bar to a 2D actor, so a in-game actor, we can pretty much do the same thing. So let me show you what I mean by that. I will open this enemy scene, open, and the enemy scene is composed by this health node, which we saw in the previous video. And then this kinematic body, which will move the physical body of this enemy. And then right at the sprite, we have the health bar. So what I did was pretty much the same thing as we did in the game, the game script. So in the enemy script, we have reference to the health, to the health bar. And at the ready method, we will connect the health changed to the health bar set value, the health max changed to the health bar set max. And then we will initialize the health. Another thing that I did is that when the character takes some damage, so when a body entered in the hurt box area, it will show up the health bar and start a height timer. So when this height timer times out, it will hide the bar again. And if the health is depleted, it will kill free the enemy scene. And you can see that the basic logic of hooking the health to the health bar is pretty much the same. So let's test this out. I will go to the game scene and add an enemy as a child of the test level. I'll move it here and I will hide the health bar by default. And if we test this, it will take some damage. The health bar will appear and disappear after some time. And when the health is depleted, the character will disappear just as we wanted. So as you can see with a 2D element, it's pretty simple. It's very straightforward to connect the health to the health bar. But now let's see how we can do that in 3D. So this is the basic 3D scene that I've set up for this test. And we have here some 3D player characters. So let's open this and here is where we have our health. And now we will see how we can add the health bar in 3D. So let's create a new scene, which will be a special scene. So a 3D scene. And I will call this health bar 3D. So what we will have in this health bar 3D? The first thing is that we will also have a health bar. So interface health bar and I will create an instance for that. Instance. Now, the second thing that we need is something, a 3D element, a mesh that we can handle this health bar as a material. So let's create a sprite 3D. Let's add a sprite 3D as a child of this health bar 3D. And now here comes the trick. So let's go to the health bar and I will move it right about here, just to make it easier. And I will measure the size of this health bar in pixels. So 64 by, let's say, 344. And the reason why we made that is because we will create a new node called Viewport. As the size of the viewport, we use the measures that we just collected. So in the x-axis, 344 and the y-axis, 64. And we will add this health bar as a child of this viewport. Remove the sprite 3D to the bottom. Now we can see anything, not even in 2D. This is because this viewport is a dedicated node and everything that is being rendered there is not being rendered in the editor viewport. OK, so what we will do now is that the sprite 3D must be a child of the health bar, actually. And what we'll do is that we will create a new texture here and it will be a new viewport texture. And we'll have to select a viewport, which will be this viewport here. And now you can see that the health bar is being rendered, but it's not quite what we want, right? So let's go to the viewport and we will set up some properties here. The first thing is that I want the background to be transparent. So we can take rid of this blueish background that we had previously. And you can see that the health bar is flipped in the vertical axis, right? So in the rendered target category, we have the V flipped, which means vertical flip. So let's toggle this. And now we have our health bar being rendered in this sprite 3D. So now let's save this health bar 3D in the interface. And I will just save it right inside the health bar folder as well. Save it. And let's add it as a child of our player. So player health bar 3D instance. And I will move it right about here above the player. And from here is pretty much the same thing. So if we open the player script, you can see that we have a reference for the health and for the health bar. And in the radical back, we are connecting the health to the health bar. So if we save it and test the game 3D and test the scene. And the first thing that you can notice is that as the camera rotates around the characters, the health bar isn't facing the camera. And this might be something that we want, right? So I will close this and let's go back to the health bar 3D scene. In this sprite 3D, right at the flags category, we have this billboard option, this billboard property. So let's enable the billboard. And you can already see that now the sprite is always facing the camera. So if we save this and go to the game scene again and test the scene. Now all the health bars are facing the camera. And this is pretty much what we want, right? So this is how you can render a 2D element in 3D. So that's it. But I think I'll make a bonus video in this mini series so we can just set up this health bar. Just to make some animations when the values change. And we can also see how we can do the gradient thing that brackets did in the video, changing the health bar color, depending on the health value. But for this video, that's it. Leave any comments or questions in the comment section and don't forget to subscribe to get more of this kind of content. And if you want to sponsor more of these videos, please consider become one of my patrons. That said, thank you so much for watching. Keep developing and until the next time.