Make a Tower Defense Game in Godot | Part 11 - Info Bar, Health, Money, Tweens

welcome to the 11th part in the goda tower defense series in this tutorial we'll have a look at how we can add an info bar on the top of the hud that tells the player how much money they've left and how much hp before they lose the game let's get started we'll start this tutorial off by creating the info bar in our ui we open up the game scene and under our ui canvas layer hud we'll add a new child node this child note is going to be of the type color rectangle this color rectangle is going to help us give a background color to our info bar so that all the elements that we add to it are very well distinguishable and readable with the color rectangle we can rename this to info bar and with the layout we'll set the layout to top wide that makes the width of this bar automatically equal to the size of the width of the screen all you have to do now is add some size in the height so we'll add a minimum size y of 60. and there is our bar next up of course we don't want this to be white that looks terrible so we're going to scroll down to the visibility settings here and we're going to set the self modulate make sure you set self-modulate and not modulate the difference being is that modulate is a setting that is going to be inherited by every single child that we put in this info bar while self-modulate only is to this particular node this color rectangle so we'll click into self modulate we'll set it to black and with our alpha channel to 120 we get this nice transparency to which we can add labels and if those labels have a white text then with this transparency this black transparency we're going to have a a very well readable text with the info bar talking about text we'll add our first element and that is going to be a label for our dollar symbol i'm going to make use of a simple dollar symbol for the currency if you have a particular texture in mind or texture available to you you want to use instead then use a texture rectangle instead of a label i'll zoom in a little bit with this label i'll rename it to symbol so we know what it is and i'll add the dollar sign right here now we want to set a couple of settings for this label first of all the align settings i want this to align to the right and i wanted to align to the center of the label now the label is a little bit on the small side right now so under rectangle settings i'll say that it needs to be 120 wide and can be the full 60 height of the info bar now of course this is way too small so we can set a custom font and of course we already have a custom font saved from when we made the main menu so we're going to be loading that custom font up we'll select load we'll go to our resources our fonts and we'll load our font size 40 outline one font in here now it might be that you want to change the size of this a little bit maybe size 50 is going to look a little bit better what you do not want to do is change the size setting now because that will change the size setting of this saved resource and therefore it will also change the size of this font in the main menu buttons and that's of course undesirable so when you want to make changes once you have loaded one of these dynamic phones up first thing you want to do is go to font settings and make it unique once you've made it unique you can go into settings you can pump this up to maybe a font size 50 and now we can save this in case we want to use this again we'll use the same name but of course this time we make our font code to 50 so we know that that size is 50 big now with that said we can also set the shade we've done that on the menu buttons as well i believe to a 180 transparency but if you want to be 100 sure you might want to have to look that up so here we go now we have our label for our currency all we got to do is add a currency for our money label we're going to be selecting symbol and control d for duplicate we'll simply duplicate that label so that all the settings are retained into a second label so that we can work from there now i've seen that i've forgot something because now we've got two labels stacked on top of each other and of course we want these to be horizontally ordered for that we're gonna right click info bar add a child node and of course we'll add an hbox container like we've done so often in this tutorial series already we'll rename this to h and with layout full rectangle we'll set the size of this hbar container to be equal to the info bar size we're going to select both symbol and symbol 2 we'll drag him into the h bar and we'll rename symbol 2 into money and that is of course going to display the number the amount of money that we have now we probably won't don't want this to be as big as this this dollar symbol is so i'm going to go down to the custom fonts i again i'm going to make it unique and once it is unique i'm going to go in settings and i'll set the size to 30 and i'll save this as well in case we want to use this again in the future now good thing is because we duplicated things like custom color are already set so we don't have to do that anymore as a test we can for example add five numbers that's probably going to be the maximum that's ever going to be in there and i think we can use this a little bit less size yeah that's going to be a little bit better that way once we only have um i say five but i actually typed four that is still looking pretty good maybe we'll make it 110 so it's just a little bit more padding there and maybe the default value will put at 100 so that looks fine this looks good time to add an hp bar now of course you already know how to make an hp bar from the tank so we're gonna go through this a little bit quicker we'll add a new child note that will be a texture progress bar we'll first set the size so we can actually see what we're doing i'm gonna go for 400 and width 30 in height now right now the hp bar takes the full 60 height because of the hbox container settings so in the size flags vertical i'm going to tell it to shrink to the center with that set i'll add a value of 50 so i can see the textures that we'll be adding and the color that we're going to be adding i'll turn nine patch stretch on so that our hp bar icon that we still have in our assets ui is going to be stretching to the full 400 by 30 and we'll drag that hb bar texture both to under and to progress and then we'll set the tint under to a gray so something like 55 55 55 and the progress texture will set to a nice bright green now i'll set the default value of the hbr container to 100 so that that's the hp bar value that we start out with now that looks pretty good now i want to know what this hp bar is for so we'll probably have to add a little icon for that icon i have chosen the home icon that you can find in the game icons back that we have downloaded from kenny so you should already have this icon make sure you copy that icon and i've put it in the icons folder right here under the assets now right click the hbar container we'll add another child note that will be a texture rectangle that texture rectangle i'm going to drag to in front of the the hp bar we'll turn x-band on and we'll set the rectangle probably to 60 by 60 because i believe this texture has a little bit of padding by itself with that done we'll drag the home texture to the texture field and there you go that looks pretty good there's enough padding to make sure that it stays within the bar now of course we want to make sure that the hp bar is on the right hand side and the money is on the left hand side so with the texture rectangle selected i'm going to go down to size flags and i'm going to tell this to horizontally shrink to the end but instead of fill i'm going to tell it to expand as much as possible that is going to make sure that this texture goes as far to the end as possible and will automatically push the hp bar with it but now the hp bar is right to the very end of the screen that's not gonna look nice either so we'll add a final note here to the hp bar that's just going to be a pure plain control note i'm not even going to rename it i'm going to set this rectangle probably to be the minimum size x of 70 that way we get a little bit of padding and now we got the same amount of padding about on the left and the right hand side and now we have a clear distinction between well left hand money right hand your base hp now of course we have to rename all these a little bit so we'll call this icon and i'm gonna call this hp all right now i'll add one more node and i'll add that on the hp i'll add another child node and i'll add a tween this tween is going to be a helper node that we're going to be calling in the code and we're going to use this tween to make the hp of this hp bar go down smoothly instead of choppy i have not chosen to add tweens to all the tanks because all the tanks hp bars are really small anyway so they're not that obvious when they're so choppy plus there are so many tanks we don't want all these smooth things and bells and whistles to go about when there's 300 of these on the map in case you have 300. however this hp bar of the player itself of the base when of course is going to be attacked by the enemies this one is 400 wide so that choppiness is going to be very obvious and therefore we want to smooth that down a little bit and that's where that twee note is for once we get to the code i'll show you how we're going to use it for the remainder of this tutorial we'll be focusing on health how to deduct health when a tank reaches the end and how to end the game when the player has no health left the currency part will leave for another tutorial where we'll fully integrate with purchasing turrets and getting currency when we destroy tanks so for health we're gonna start at the blue tank so i'm gonna find my blue tank script in our file manager i'll click into that and i've added two new elements at the top of the script here first of all i've created a custom signal that this tank will be able to emit in this case that's going to be base damage with a damage variable i've also added the amount of damage that this tank will do to the base of the player in this case i've chosen 21 because the base health is gonna be a hundred so with just five tanks i can demonstrate to you how this works of course change this value if you want this tank to do less damage to the player's base now of course we need to emit this signal with this damage the moment that the tank has reached the end of the path we do that in the physics process function well i'll add these three lines of code you already know the offset parameter of the path follow 2d this is the absolute value of how much pixels in the path has been traveled this would be usable if we only had one map but if you add multiple maps to the game with different path lengths then that offset value is not going to be very handy anymore the path follow to d also comes with the parameter unit offset the unit offset is going to be 0.0 at the start of the path and 1.0 at the end of the path and of course that is going to be super handy for us because now we can check if the unit offset is one means tank is at the end of the path then we'll emit the signal base damage or we'll pass along the base damage 21 here so this damage becomes 21. then we free the tank i mean the tank has started it had went over the path it has done damage to the base of the player it has served its purpose if we weren't quite free to tank right here all those tanks that are crossing the map are going to be clogging at the end of the path and all they do there is hug the memory of the player's device and well that that's no use so we creep-free the tank to get rid of it now of course we need to connect this signal to the game scene and then in the game scene we need to make sure that we do something with this base damage so let's first connect it i'm going to switch to the game scene and on the game scene we gotta find our spawn enemy function here we have our function spawn enemies here we have the enemy the tank that we're instancing with that instance we're gonna take new enemy and we're going to be connecting the signal base damage we'll connect that to cell to this script and we'll connect it to the function on base damage just like that we have connected that custom signal of the tank to this script so that when it's emitted this script will receive it and on base damage function will run the onbase damage function is what i've already added right here on the bottom before we go into it i have to show you two things i've added to this script the first one being the base health 100 as i said so that is going to keep track of how much health the base of the player has left and we have another custom signal called game finished but it's also going to be passing along a result in this tutorial we'll only have a look at the result when you've actually lost because the tanks have killed you but later on we'll also add victory conditions and then we can add the result true scrolling back down on base damage we're going to be deducting the damage from the base health then we'll check if the base health is smaller or equal to zero in other words the player has lost at which point we emit that signal game finished with the result false because your base health was zero or lower if that's not the case well in that case we have to ask the ui to update the health bar at which point we'll also pass along the new health value and that's of course where we're going to be programming our tweet to program the hp bar and the tween we of course have to switch to our ui script switching there first pay attention to the top new elements here the hp bar and hp bar tween which are an easy node reference to the texture progress bar and the tween that we have added underneath the texture progress bar scrolling down i'll paste in the code that we need of course our game scene was calling the function update health bar passing along the new base health you'll see a uh commented out line here you don't have to add this line yourself this line is only here to help me explain you how to set up the interplay property function of the tween because that takes a lot of parameters can be quite complex this is probably going to help you a little bit to follow along what's actually happening when we interpolate the property that basically means that with the tween we can interpolate a parameter or property of any node that's currently in the scene tree so it's not an interpolation of a property of the tween itself the tween is a helper node that helps us interpolate a parameter outside of between what we basically do is we have to push along the node of which we want to change a parameter the name of the parameter the starting value of the parameter the ending value of that parameter the duration over which this interpolation has to take place the transition type and the easing type so once we set that up we get the hp bar tween interplay property we want to interpolate a property on the hp bar that's the easy node reference to the texture progress bar the parameter that we want to change is the value and i've actually got the hp bar open right here in the inspector the value is what we've always been setting to make the hp bar go up and down the starting value is the current value of the hp bar because once one tank has already damaged the base of the player then if the second tank damages us we want to start this interpolation to where we have basically left off with the last damage that way we don't always interpolate from the full 100 but to wherever the hp bar currently is the ending value is the base health that's passed along into this function we're going to be interpolating over 0.1 seconds and for our tweens our transition type is going to be translinear and the easing type is ease in out now you can look up in the documentation what these transition types and easing types exactly are but what's much easier is if you simply go to your browser and you browse go.tween cheat sheet you're gonna get this image which is a great image to bookmark in your goda resources here you can see for every type of transition for each easing type he's in he's out he's in out or he's out in you can see the effect whether something starts slow and then speeds up or starts out very speedy and ends slow whether it has a wave pattern or sometimes even a bounce pattern like you see here so right now for us we just went with linear and then it for linear you can see right here that's just you know no no interesting effect to it and it doesn't really matter which ease function or which ease type you use at that point because linear is always linear but that's a great resource to have book marketing your your bookmarks for godot it's always nice to have that available to you so that's is what the transition type and easing type do now once we have set up the tween we still have to start it manually and what's also important to know is that as we tween towards the new value base health the actual value is set at the same time so we don't have to set that value anymore in the texture progress bar the tween interpolates nicely smooths but also sets the properties that's an important element there now i want to add some extra juice to this hp bar so we're going to change the color depending on how much hp we have left if the base health is more than 60 we want to keep the hp bar nice and green and just to make sure when you go into your hp bar click into it make sure you copy this color code and paste it in here so that the grid the hp bar is not going to switch color the moment that you uh have your first damage taken by uh by the player so now the hp bar is always going to be nice and green when we're more than 60. if the health has dropped below 60 but is still above 25 percent we're gonna put in a nice orange and otherwise hp bar is going to be red now with that saved we can start doing some final touches because on the game scene we still have a signal that's being emitted game finished now we have programmed that but we have not connected that yet so let's do some final touches and then we can do a demonstration to connect our game finish signal up we have to switch to the scene handler on the scene handler script we are when we're pressing new game we're refreeing the menu and we're loading our game scene as an instance and adding that as a child and very similar to what we've done with the tank we simply have to connect the signal from here so we're going to take the game scene we are going to be connecting the signal game finished we'll connect it to this script itself and we'll connect it to the function unload game now of course that means that we need to have a function called unload game let's add that as well so we're of course going to receive that result that the game scene is passing along we're going to get the note game scene and we're going to quit free that then we're going to get an instance of main menu and we'll add that as a child node so we're back into the main menu however there's one catch here when we load the main menu initially when we start the game up we're connecting the buttons on the ready function but as we are loading this menu in here these two lines of code are no longer running because these only run once when the game starts so we're going to create a new function called load main menu okay that right on the top here and we're gonna pass these two lines of code in here and we'll also run this load main menu as the game starts so now these two lines of code are still running as we start a game but they're also running when we are coming back into the menu so both of those buttons remain functional now we can start the game and show you how this works so much for a demonstration just tried it didn't work i made one very small error i had a lowercase b here instead of an uppercase b that of course broke the path so do make sure under your ui script that those paths are correct also under the game scene in the retrieve wave function i've added three more tanks each one second apart this of course make sure that we do a total of five times 21 105 damage to test whether the code that we've just programmed is actually working now i'll play it again we'll press new game we'll play we'll speed this up a little bit so these tanks make it to the end of the map i'm not going to place any tourists because of course we want to check whether we're actually dying or not and you'll see that we have smooth transitions with this tween in the hp bar and as that last tank reaches the end of the path we're back in the main menu as we lost now in a future tutorial we may add sort of like a victory or defeat ui panel in the middle there maybe reward some points or give you a score but for now we're back in the main menu we can hit new game again and we would be able to play the game again if we if we wanted to so there you go now you have a full game log game log game loop that starts and ends of course right now it only ends when you actually lost in a future tutorial will also add the winning conditions so that the game transitions to the main menu or a victory screen as you have killed all the tanks alright that was it for today guys i hope you enjoyed this tutorial if you did smash that like button hit subscribe don't forget that bell icon to make sure you don't miss out on the next tutorial in the next tutorial as promised in the previous tutorial we'll work on the uh the missile turret animations to make sure that we can see some misses flying over the map there were some people in the comments that mentioned well the missile turret is broken now yes of course it's broken it doesn't have an animation and the code currently expects there to be an animation so we'll fix that in the next tutorial and then in a tutorial after that we're going to be focusing on that currency so we can actually well that we need currency when we build a turret that we get currency when we kill enemies so that's gonna be coming up in the next two tutorials hope you're as excited as i am until then keep on gaming keep on coding see you later guys

Channel: Game Development Center

Views: 2,872

Keywords: Godot hp bar, Godot GUI, Godot HUD, Godot Health Bar, Godot TextureProgress, Godot tween, Godot tweens, Godot fonts, Godot dynamic font, Godot how to change font, Godot 2d game, Godot tutorial, Godot beginner, Godot

Id: ltDGzMk5ojw

Length: 23min 1sec (1381 seconds)

Published: Sun Sep 19 2021