Make a Tower Defense Game in Godot | Part 10 - Muzzle Flashes and Impact Animations

welcome to part number 10 of the godot tower defense series in this tutorial we'll have a look at how we can add muzzle clashes to our gun turrets and we'll add an animation on the tank for the impact let's get started the very first thing we're gonna do is add a muzzle flash to the gun and of course we're gonna need a sprite for that i'm gonna open up in our assets folder where you downloaded all the packs in the past tutorials i'm gonna go open the tower defense top down 300 assets pack and we're gonna go to the png's we'll take the default size pngs and we scroll all the way down and here i'm gonna use this png tower defense style 297. it's a thin muzzle flash which i've picked on purpose because as we're gonna upgrade the gun tier one two gun tier two we're gonna have two barrels very close to each other and this sort of narrow muzzle flash make sure that they are not gonna overlap of course you're gonna take this image and you're gonna put it in your assets folder i'll do that in the effects folder here you can see it on the bottom left in the file manager i've created a new folder effects in the assets folder and here we've got the tower defense tile 297 that muzzle flash that we'll be adding into the game now next we want to open up our gun tier 1 scene i'm going to scroll down to scenes to turrets to gun tier 1.tscn and here we have the muzzle 2d position we already added in a previous tutorial this is where we'll add a child node we'll add a sprite we'll change the name of the sprite to muzzle flash and of course in the texture parameter on the right hand side in the inspector that is where we're going to drag our new muzzle sprite now this looks horrible so we're going to transform it a little bit i'm first going to scale it down to 70 percent of its original size otherwise i think it's too large and we'll add 90 rotation degrees to put it in the right direction now of course it's on the barrel so i'm going to give it an x position of 10 and that puts it at the end of the barrel that's perfect now you want to animate it for animations and godot you basically have two ways you can go with the animated sprite and you can go with the animation player the animation player is the much more powerful tool the animation sprite is also a little bit worse in performance so the animation sprite is pretty much like only use it for very simple stuff we will be using the animation sprite later in this tutorial for the actual impact animation so you can see how both work for now though we're gonna go with the animation player we right click the uh gun tier one the main note of the scene we'll add a new child note and we'll add an animation player to it in here you got this whole animation player popping up you can open and close this with animation here on the bottom and the first thing you want to do is add a new animation so we click animation we click new and we'll give it a name and let's just call this fire now right now on the right hand side there's a lot of options here i'll walk you through it on the right hand side you see this one this is how long the animation is going to last one second that's way too long for muzzle flash so change that in 0.05 now it might be that the timeline on the top here indicates like 13 14 seconds 10 seconds on the bottom right here you see the skill indicator this allows you to scale the timeline so that you can zoom in on that very short animation that we're working on right now the snap here is where our keys are going to snap and since we have an animation of 0.05 seconds a snap of 0.1 is not going to help us so we'll change this into 0.05 now we can add a track and you can add all kinds of tracks you can eat three 3d transforms you can call methods audio playback and of course the audio playback is going to be super useful once we start adding sounds so that's why using the animation player here is really handy for now though we're going to go to property track a property track allows you to change any property of any of the nodes that are in this scene so right here we see this pop-up which is basically a copy of the scene tree that you see on the back on the background there and of course we want to animate our muzzle flash now we get a new pop-up and these are all the parameters that we could change on this particular node and we're going to be looking for the canvas item category and we want to change the visibility so we're going to open that up now we're going to right click and insert a key at the start and we're going to right click and insert a key at the end now you can select these keys and we're going to select the first one and the value on that's good and on the last one we want the value to be back off and then by default we're going to turn the muzzle flash off its visibility with that little icon right there in the scene 3 explorer so what happens now once we play this animation it will this animation player will turn the visibility on and after 0.05 seconds it will turn it off again and that is of course going to show us the muzzle flash that we're looking for all that's left now is to make sure we add some code that is going to activate this animation as the gun fires to do this we're going to switch to the script on the top here and we don't want this big animation editor to be in our view all the time so we'll close that by hitting animation down below there we're first going to switch to the turrets.gd script where we actually have our fire function here we do the function fire and of course right after we have set ready to false and just before we're going to hit the enemy we want to play that animation or start that animation of course now immediately we run into a problem because we're going to have both gun turrets which bullets travel so fast that the eye can't see them and we're going to have these missile turrets that are going to be having missiles shoot over the map in other words these two animations are completely different so we probably want to categorize our turrets so that we know which animation we have to play for each turret now we don't want this categorization to go as far as each specific turret because a gun tier 1 and the cannon tier 1 and tier 2 and tier 3 are pretty much all going to have a fire animation so we probably have to differentiate between these categories as guns or projectiles and missiles however you call these categories is up to you for that reason under the gain data i've already added the category variable to both of these missile tier 1 and gun tier 1 turrets so here i'm going to go for projectile missile even though a missile is a projectile but you know deal with it i guess if you want to change the names no problem go ahead don't forget that little comma behind the range 550 and 350 there otherwise the dictionary is not going to be correct now that we have the category in our data we can actually do something with that and similar to how we have set the type of the turret in the previous tutorial we can do exactly the same for the category so we're going to say new tower we're going to call category and we're going to say you are equal to the game data the tower data the build type of the tower and of course we want to retrieve the category variable that's inside that dictionary that means as we're trying to set the category variable of the turret that our turret needs to have a category variable right there otherwise there's nothing to set now we know what type our turret is and i'm going to be copy pasting in over this fire function so that we don't have to code all of this these four lines here 36 to not 39 are new and these two functions are new so what's happening is that we're checking if the category is equal to projectile or another name if you've chosen another categorization in that case we're gonna fire a gun type of turret and otherwise if it's missile then we're going to fire a missile now under the fire gun we can say that we're going to get the node we're going to get the node animation layer and we're going to play fire and play is of course a function of the no type animation player now if we hit play on the game or go new game we'll paste or paste we'll build our couple of our turrets and as we play this you can now see that our guns are having that muzzle flash the only downside right here is that the muzzle flash is underneath the tank so let's quickly fix that that's quite easy we can go to our map so i think we call that map1 you can use the search bar right there in the file explorer and as we open up our maps we can see that paths where tanks are going to be added is below turrets which means that they are rendered last and therefore the tanks are driving over the muzzle flash we want the turrets to be below the paths so the muzzle flash is going to be rendered above the tank now if we hit play again and i'll just place one turret so you can see this carefully we'll hit play and you'll see be able to see that this muzzle flash is now going over the tank instead of it being under the tank so that is looking pretty neat now we got to add that impact animation on the tank and we want to add some randomness to it so that the impact is not going to be shown at the same location every single time all right for the impact animation we of course again are going to need some sprites so let's get them out of the folder this time though we're going to use the top down tanks redux folder because it has a better impact animation than the tower defense one has so in top down tanks redox we're gonna go to png default size and when you scroll down here you can basically see two different animations one is more like a fiery kind of animation more explosion like i guess and the other one is more smoky like pick the one that you like more or maybe you want to add both for different turrets that you've already added to the game issue expanded on the tutorial i'm just going to go with the explosion because i know maybe my my guns are shooting explosive rounds so like that i'm going to go back to my game folder to record to assets to effects i'll throw my five animation frames in the same folder as we have added the muzzle flash just like that we can go back to the scene and we're gonna be looking for our blue tank we'll open up our blue tank scene and here's where we want to add that animation first we want to add a position 2d to the blue tank that is the location where our impact animation needs to appear we're going to rename that to impact now impact with transform we're going to give a location of minus 15 by minus 15. so that brings it in the corner of the tank there and you might be wondering well why do we do that because i don't want the animation to appear there all the time through code in a moment we'll add a box of randomness and that box of randomness is going to be determining where the animation spawns but every single animation needs to have an anchor and this position 2d functions as that anchor now that we have that we can work on our animated sprite so we'll add a new child note and that will be an animated sprite now say it again i would normally if this was my game i would take the five sprites of our explosion i'll use a program called texture packer they have a free version as well to create a single png and then with the animation player i would cycle through the frames as the animation player is more powerful and it's also a little bit more performance friendly however i want to teach you every single tool that godot has to offer well not in this tutorial series but on my channel so that you have more tools to build awesome games so we'll use the animated sprite for now with the animated sprite selected we're going to go to the top parameter here frames in the inspector we'll select new sprite frames then when that's done we click one time into it with the left mouse button and that will open up this sprite frames editor now we have to find our animation sprites so that these five right here and if you ever use this in the future make sure you name these or give them the same name we have like a number so that godot can put them in the right order automatically so as we drag these in is automatically the right order of the animation we probably want to call this a little bit different so we'll just call this impact now currently loop is on you can see that on the bottom left right there and we play this animation through the play parameter right here of course this animation is way too big so we want to scale this down a little bit i'm going to probably scale this down quite a bit to probably 20 of its original size now with playing on you can see that it's probably a little bit too slow if a lot of turrets were to be firing at this tank at the same time then all these explosions are going to be lingering it's not going to look great so with the speed skill here we can speed this animation up and i think a speed skill of four is probably gonna be good it seems really fast but we want this to be really fast because we don't want this explosion to sort of linger while the tank is driving that's not gonna look nice okay now that that's done we can turn playing off we can reset the frame to be frame number zero and of course we're going to turn that loop off because the impact is a single time so with this it's pretty much done next thing we do is we want to rename our animated sprite so this is going to be a projectile impact we probably create a different impact for a missile and we now we want to delete this projectile impact from the scene and we want to delete it because of course now the tank would spawn into the world with this animated sprite on top of it and that's not going to look nice we want to instance in a version of this animated sprite every single time that a tank is hit by a gun to do that we're going to right click the projectile impact animated sprite node and we're going to save this branch well it's not a branch really it's just a single node but we're going to save that as its own scene with the save branch as seen i'm going to save this under my scenes folder in the support folder i mean it's not a map not a main scene not an enemy not a turret the support scenes is that's where i created this folder for it's basically those little things that are just handy to have on the side and we'll save that now that we have saved that as its own scene we can now delete the node from the scene tree here we're now going to find this projectile impact scene double-click and we'll add a script to it so that we can give it a little bit of code before we give it codo we're going to select the projectile impact node we're going to go to the node signals and we're going to right click our animation finished we'll connect that to our projectile impact script we just created now i'll select all of this now paste in the code that i prepared we basically have two functions with just one line of code really easy here we have a function ready at white points we're going to set playing to true so it's going to play the animation and as soon as the animation has finished it's going to quit free itself and then the animation is gone from both the scene as well as the scene tree now of course we need a lot more code to actually make this animation sprite work especially with the randomness and the location so let's get into that the rest of the code to get that animation correct is going to be on the tank so we're going to switch the blue tank script and of course if you don't have it in that list anymore you can always find it through your file manager and open up your bluetank.gd and here we want to have two things on the top first we want to have an easy reference to our impact node similar to how we have created an easy reference to our health bar so on ready var we're going to say the impact area is going to be the get note and we'll simply drag our impact node to the code editor or script right there the next thing we want is we want to have an easy reference or a preloaded reference actually to that projectile impact scene because we don't want to load it again and again at run time that's a little bit less performance friendly by pre-loading it we're just going to put it by default in the memory but that doesn't really matter it takes a very small amount of space but it's going to make sure that we have less lag in case you ever play this game on a less powerful machine so for that we're gonna say var project how impact is going to be equal to and then we reload that scene for that of course we have to find the scene projectile impact and make sure you drag the tscn not the script you want to have the full scene and we'll drag that in there now next up as soon as this turret or the service turret this tank is hit we want to run the function impact and of course that means we need a new function impact and i don't have to write that down i got that on the my for impact there's a couple of things to unpack here first up what are these randomized commands randomize is randomizing the seed of the random number generator if you are going to be asking the random number generator the same thing two times in a row or a hundred times in a row with the same seed you're gonna get the same outcome and as we're basically asking the same thing we see randy 31 here two times we want to make sure that both of those are having a different outcome and therefore we randomize the c now what this actually is this is the x position and the y position that we're going to be combining together in a vector 2 to actually create a position randy is basically going to return us an integer between 0 and the value that we have added minus one randy basically works a little bit like indexes in a race instead of starting at one it starts at zero so because it starts at zero any number that we give it deducted by one is how far it can go up it's a little bit of a thing as you just have to remember so with 31 we're going to get a number between 0 and 30. we do for that for x and for y we create the impact location next we're going to pull an instance from our projectile impact so we're going to pull an instance from the scene here we're going to set the position of that scene to the impact location we have just defined and then we're going to add take the impact array and we add a child to it in other words we're adding that animated sprite to the impact note just like we had the animated sprite added there a moment ago before we deleted it again now the impact is currently if we switch back to 2d real fast at and as we add these animated sprites to it they are going to be taking the position of impact as basically their anchor their reference and from there they can be randomly 30 up to 30 pixels more to the right or 30 pixels more down so in the most extreme case if the randomization turns back 30 in both cases this is basically going to be 15 15 and then the animated sprite is going to be appearing right there so now we're covering the entire tank randomly with uh impact animations make sure you do set this back in case you were playing around with that and now when we play the game we should be able to see that our tanks are being impacted by the fire of these turrets let's make that a little bit bigger now as we play that game we'll see the tanks rolling in and as these guns are firing at random locations in that impact area you see the animation appear now we're almost there there's two small issues that we have to address the first problem is then when we give our turret just 20 damage and a tank 60 hp you'll see that the muzzle flash out of the barrel is still in place while the turret is already switching towards the next tank it's very uh short that you have to see but now you'll see muzzle flash is still animated in one direction or the barrel is already pointing towards the next tank the second problem is that when the tank dies it instantly deletes itself and as a result the impact animation doesn't show anymore let me see uh show you what i mean on the third shot on this tank you'll see no impact animation tank immediately gone and that doesn't look as good as it could look so these are the two problems we'll address them now our first problem with the muzzle flash is quite an easy fix we're going to switch the gun tier 1 scene and we're going to select the animation player with the animation player selected we're going to increase the animation time to point 15 seconds we're not changing anything with the keys we're just going to make sure this animation just lasts 0.1 of a second longer also when you make any changes here sometimes this muzzle flash suddenly reappears again i'm pretty sure if you just unselect it again or make it invisible again and save the scene that problem should be gone if it ever comes back we'll just have to make sure we set the muzzle flash to invisible at the start of of the turret when we build it um i think that's not necessary i prefer not to have that line of code but if so then we'll change it in a future tutorial now that the animation takes a little bit longer we're going to go to the script we're going to go to the turret.gd script here when we turn the turret we're going to add one more line of code here we're going to say if not so if it is not the case get note animation player is playing and then we turn so because we are playing the animation for 0.1 second longer and here we are checking if the animation is playing and only if it's not playing we're going to be turning the barrel will stay with the animation for just a little bit longer before switching to the next tank and that way our muzzle flash is now going to be corrected now next up for the tank actually disappearing before we can show the last impact animation we're going to switch to the blue tank scene and with the blue tank scene we're going to take the sprite that is currently a child under the kinematic body we're going to take that out and put it under the pathfollow 2d and we'll drag it above the health bar to make sure that they render in the correct order now with this done we can go to the script of the blue tank itself and right here we're gonna say that we're gonna get the note and we're going to get the note kinematic body we are going to clear free that kinematic body then we'll yield the code for just a moment that we yield the code by getting the tree by creating a timer that time it will probably be two point seconds and we'll wait for the timeout to finish or to occur and then we'll self quick free what happens now is that as we are deleting the kinematic body instantly the kinematic body is going to be gone from the range area to the of the turret in other words the turret is not going to continue firing on this tank any longer but as we keep the tank for 0.2 seconds in the game we have the ability to show the impact that is on the impact note right there that is allowed to finish that's allowed to play and as that has finished our playing then we can self free this tank from the entire scene and thereby freeing those resources now of course to make the last demonstration extra cool i'm gonna give the tank a thousand hp we are going to uh our game data and we're going to increase the rate of fire of the turret by making it a fire every 0.3 seconds and now as we play the game new game we should be able to place a couple of turrets and with all these fixes in here and a lot of turrets we can now see our work and that is looking pretty sweet if you ask me awesome that was it for today guys hope you enjoyed this video i think it's always really cool when you've worked hard on the code you add the visual effects and then it all comes together so hats off to you for sticking with the series so far and i hope you like the effect that we've coded today if you did then smash that like button hit subscribe don't forget that bell icon to make sure you don't miss out on the next video in the next video i'm not sure yet what we're going to do it's either going to be one of two things on one side we may be programming the missile animation so we got missiles flying over the map that would be pretty cool but i also want to work maybe on the hut so that maybe we have an hp bar of the player itself we know when a tank reaches the end we deduct some hp and of course we need some currency in the system so that when you build a turret you deduct some currency and when you kill a tank you get some currency so it's going to be either one of those two tutorials you'll see next week and until then keep on gaming keep on coding see you later guys

Channel: Game Development Center

Views: 1,711

Keywords: Godot muzzle flash, Godot impact animations, Godot animation player, Godot animated sprite, Godot animatedsprite, Godot animationplayer, Godot animations, Godot turret shooting, Godot shooting, Godot destruction, Godot destroy, Godot 2d game, Godot tutorial, Godot beginner, Godot

Id: YV-7M2V9sX0

Length: 24min 41sec (1481 seconds)

Published: Sun Sep 12 2021