Godot 3 Tutorial - Mobile RPG - P3: Animating the Enemy

good morning afternoon or evening wherever and whenever you are my name is Benjamin and welcome to another Godot tutorial for our mobile RPG the turn-based series that I'm doing if you've enjoyed this series so far please consider supporting my Kickstarter there will be a link in the description and a card let's get started in this video part 3 we're going to be adding some more logic to our enemy because currently when you run the game you can hit the enemy but it just kind of takes down on the health and not really a lot happens there let's hide our preview there so we've just got this the mock up and it's just not very not a lot happens so let's fix that so first we're going to want to take this enemy and make its own scene scenes in Godot are a little bit tricky to grasp at first but they're extremely powerful so you can see we have this scene set up called battle scene and we're using it kind of similar to a room like you wouldn't game maker or it's just an area that the game happens in however there's another thing you can use scenes for and that is something more similar to like an object in game maker or something that is in the area that the game happens in and one of the cool things about this is that each scene can be instanced or put into other scenes and so you can chain them so maybe you have a scene for a house you could have a scene for a chair you could have a scene for a city and you put the house inside of the city and the chair inside of the house and so that kind of logic suits games pretty well in order to make our enemy its own scene we're going to right click on this right here this node and come to save branch As Seen it'll bring up a save menu and we can just save as enemy like that now you can see the enemy is still inside of our battle scene but it's got this little scene icon next to it and you can also see that we can no longer see the children nodes of this enemy we just see the enemy now if we right-click on it we can do editable children which would then show us the children and allow us to change them but we don't need to do that yes we want to just say we want to disable editable children we don't need to do that because if we click on the little scene icon here it opens up our enemy inside of its own scene like this and you can see that it's positioned in the same position that it was over here and generally you don't want that to be the case you want its position to be zero zero like this and we'll just save that and then if you come into battle you can see our enemy is now positioned at zero zero which we don't want that inside of here we want it position down here but inside of its own scene we want it on the origin like this so we'll leave it on origin in its own scene but now inside of battle we'll move it down and let's turn on our mock-up again so we can get it about where we want it oopsies where it let's let's lock the mock up so we can't see it or we can't select it and then we'll drag our enemy down just wait I keep grabbing UI let's lock it there we go now we should be able to move enemy just down and tadmor do ctrl s to save hide the mock up again and let's make sure that that worked yep it did so the enemy is now positioned properly there but if we click on our scene icon here it's it's at position zero zero in its own scene now we can work on this enemy because it's it's going to be a slightly complicated scene more complicated than the other elements of our game so that's why we're making it its own scene this so that we can kind of work on it individually and this helps you separate your logic so we've got all of the logic for our enemy in here and you can actually run the enemy if you click if you click this button up here this will run this scene instead of running the game and so you can separate out your logic that way so every single scene should be able to run on its own and you can see our enemy does it can run on its own it can run without giving us any errors like this and that helps you to decouple your code so that each individual thing is its own element and all of the code inside of it can be run on its own and then you use all of those elements to build a game and put it all together and as your game gets bigger and bigger than those individual elements you don't have to worry about how they affect everything else you only have to worry about the logic inside of them and just makes your code more manageable as as your game scales okay so let's start let's start actually doing some stuff with our enemy scene here so the first thing we're going to want to do is add an animation player node so look up animation player and this node is a very powerful node that we can use to create our own animations and we're going to want to do that so let's create an animation here if you click on the node it should open up an animation tab down here and if you click the animation button we can create a new animation and we're gonna call this one shake this will be an animation that plays when the enemy gets it and now we've got a little timeline down here and we can we can scrub through this timeline and we've got the length of the timeline so we've got it at one second you can see we can come to one second and then we've got the intervals as here we've got point one point two point three right and down here you can see the snap is set to zero point one intervals okay now we're going to animate our enemy and up here at the top when you've got an animation node selected there are some different I guess you would say properties that you can animate so we've got location rotation and scale and for our purposes we're only going to need to use location so we can uncheck rotation and we're going to be animating the the enemy sprite we don't want to animate the actual enemy position because if we were to animate that then that would affect the position here in our room so we just want to animate the position of the sprite to relative to the end to our enemies actual position and so let's come back into our animation player and we've got our shake animation so we can we're probably not going to want it to run for this long we're going to want to do a much shorter amount of time that it runs for one second is too long that it'll be shaking so let's do point two and we'll want to zoom in a bit so that we can see better I don't know that we can zoom in more maybe oh yeah we can there we go drag it this way and we'll want our increments to be on 0 5 and so now we should have a little too zoomed in maybe there we go so that gives us a total animation time of 0.2 and increments of 0.5 so we've got 1 2 3 4 5 frames except this frame in this frame are similar basically 5 frames that we can work with so on our first frame we're going to key the sprites position you can just press this little key button up here and it will ask if we want to create a new track we say create and down here we can see sprite and position so we keyed the sprites position then we can come to another location we can move the sprite say here for example and we can key the sprite here so we'll key it here and it should it shouldn't create a new track we want to make sure that we're keying the sprite position then we'll key up here key whoops well it doesn't matter but we need to move our track over and then key up here and then we'll move over again and key maybe right here and then we'll move to the end and key down here now you can see our characters jumping around if we play this animation kind of shakes around you can click this to loop the animation you can see how it looks when it's looping it's pretty fast ok now you can see that Godot interpolates between the frames so when we come from this frame to this frame when it's playing it actually does it it actually moves smoothly between this position in this position so automatically interpolates between those frames and I'm gonna move this up just a bit it seems a little too exaggerated there and there so actually we want it to end on center but that's okay and you can see we've got a shake animation so we can use this whenever the enemy gets hit maybe you don't want it to interpolate smoothly between frames though if you don't you can come over here and you can see we've got some options here a little drop-down menu we've got continuous that will interpolate smoothly and discrete that will that will not that will just jump between the positions instantly and you can see the difference there how much jumpier this one is I think I'm going to leave it to be continuous so it will be smooth I think that'll look fine we'll see and [Music] once we've got that I'm actually going to we can manipulate these points if we want to a little bit so this one for example I could drag clear over here the very first one and I'm going to do that this one I could drag to the start move this one move this one move this one and drag this our starting one to the end that way our starting position is actually down here now and that our ending position is actually centered and I'm going to save that I'll just do ctrl s to save and I'm going to create a new animation well that should be fine we just want our animation to end with our rat centered again and this should work just fine to get us what we want now we need to have access to our animation player so click on the enemy script up here we'll do on ready var animation player equals animation oops animation player like that and so that should get us access to the animation player and whenever we get hit or we lose HP we'll want to play our animation the one that we set up so inside of here we can say animation player dot play and then here we get some animations and let's get rid of this here and well it's a string value of the animation that you you set up so ours will be shake like that we can save and run the game and now when the enemy gets hit it should shake a little bit and it shakes the same way every time but you could you could set it up to where it didn't shake the same way every time or have multiple animations where it picked between a few different ones that would be another way to make it not shake the same way every time but I think I'm just gonna leave it this way so it shakes the same way each time we hit it and this gives us a lot more feedback when the enemy is hit we can still go into the negatives though so let's fix that so let's create a new animation well no not animation let's create let's just let's just handle that inside of here instead of set HP or set our function will say if HP is less than or equal to zero q3 else play the shake we don't want to try and play the shake animation if it's just gonna be destroyed anyways so the Q free function destroys the the node that we're currently on will destroy it and it doesn't destroy it right away it waits till a more convenient time for processing to destroy it and the benefit of that is sometimes your note is in the middle of doing something and if you just call there's another function you can use it's just called free if you just call free it might interrupt that process and so Q free says basically at the end of this frame get rid of this note and this is generally the one you want to use so it cues the note for being destroyed basically and if we run now we can see it destroys it however if we click on sort again oh we're gonna get an error message because it says what is enemy HP I don't know what that is right and this is inside of our battle script so let's come back into battle and inside of here the problem is that we're getting access to the enemy when this at the very start of the game but then if the enemy is destroyed then it's trying to access it again but it's no longer it's this reference no longer app is correct and so what you can do here is you can say instead of getting enemy up here like this you can save our enemy equals enemy just like we had before and then you can say if enemy does not equal null enemy dot HP minus equals four and so this will get this there are two ways you can do this one way is to actually have the enemy set the battle variable to null or some other thing when it gets destroyed and the other one is just to try to get the enemy every every time you use the sword and I'm just going to go for this system because it's easier and the code is more contained inside of this single script I don't know that it's necessarily better but and there we're still getting an error message now so it says not found enemy and it's trying to get the enemy like this so what this this system right here won't work for this because it's trying to find enemy and give this an error however there's another function we can use called find node and you can just pass in a string value for the name and find node will will not error if if it can't find it so now we're no longer getting an error message but this all kind of defeats the purpose of this anyways because once the enemy's there we don't maybe you don't want to well there's different ways you could do this honestly but the way that I've chosen to do this is to actually hide the the buttons that are down here when when the enemy is destroyed anyways and so that's one thing you could do is just hide those and we could use a signal for this so inside you can create your own signals because we've used signals before in the last video but you can actually create your own signals inside of a node so if we come into our enemy scene click on the script to make sure we're under the enemies script will hide the animation player inside of here up at the top we can do signal and we can call up on death and that seems like a pretty good name I guess and then inside of here when we destroy the enemy when we call Q free like this we can also send out a signal and we'll call it or we'll say emit signal on death or maybe died let's call it died that seems like a better name okay so we can omit this signal when the enemy has died and then we can do something when that happens so if we come back into battle we can click on our enemy here and come over to node and you can see now we have our own our own signal up here that we created and we can double click on that and connect it to battle do connect so this is on enemy died see I like that name it would have been weird if it was on enemy on death or whatever inside of here we could we could hide our UI so we could hide all the UI we can we can set our system back to what we had before where we have enemy equals enemy and then and then we still have our this would be a non ready var and we still have our if enemy does not equal null here but when the enemy dies we can set enemy equal to null and solve that problem and then we could I mean we're solving the problem twice here but we could then hide the sword button so if we got access to it on ready var sword button equals sword let's see I'm not sure why my autocomplete is it's not it doesn't seem to be working right now not sure what the deal is there but I the path should be UI sword button like that I think there we go and then we could just hide it here we could say sword button don't hide and if we run the game once the enemy is dead it hides the sword button and we can no longer click it it's still there just hidden and so that's pretty cool to have that set up we're going to be setting up an attack for our enemy as well so if we come into our enemy and then animation player let's click on animation do new we'll call this one attack and we'll set up a new animation for this and our attack is going to be yeah one second seems good we're gonna have to zoom out just a bit here and there we go that's good so let's create a starting position we'll click on the sprite and key a starting position to create make sure that it's that it's actually at zero zero here when you key your position then we'll come down to three in and this will be our wind-up for the attack so we'll actually come up just a bit here it should be our sprite so we'll key that position and then we'll want to maybe come to point four here and we'll come down a bunch like to here so and we'll key this position and then all the way at the end we'll be back at the starting position so we'll come clear to the end here move our sprite back up and key this position you can see it seems like a pretty fast jump there but when you when you play the animation you can see it's pretty good attack might be a bit too long let's set this to no not zero holy cow Oh point eight there we go let's try it setting it to point eight and see how this looks as some of the feedback I got from people is that was a little too slow and that looks better and if you want you can come over here to these options again and do cubic here which smooths out the the motion just a little bit and that looks really good I think for an attack for the enemy perfect so we've got our enemy attack setup let's have that for now let's have the enemy attack every single time the the player hits the enemy eventually we're going to make it so the player has action points and the enemy will only attack once the player is out of action points to use but for now we'll make the enemy attack every single time the player does so how do we do that well we've got our sword button press so this is we know when we're attacking right and this this triggers inside of our enemy this triggers the shake animation right here so you can actually there's a way to wait until this animation is finished and then play another one right after and we can do that using the yield function so we can say yield animation player so this tells it what we're going to what well let's see if I can remember this right since my let's see if I can fix my auto correct real quick or my auto complete I should say project quit - project list come inside of enemy here we go and it doesn't seem to be work and I'm not sure what I did but if we look at the documentation and look up yield you can see that it takes an object and then a signal for that object so it waits until whatever signal has been fired and so we can say animation player is our object and then the animation player if you click on it and come up here you can see it has an animation finished signal and so we're going to use that animation finished so this this next line of code line 20 won't be run until our animation player has signaled that its last animation has finished and this is very powerful when you're making turn-based games because this allows you to run an animation like we're doing right now and and not do anything else until the animations is finished and you have to do that quite often in turn-based games because something happens then you play an animation and you want to not do anything else until that animation is finished I mean if you think about the Pokemon games when they first came out the Pokemon would use an attack and it would show the animation right and then it would take down the damage afterwards on the enemy and so that's what we're doing here and then we can do animation player dot play attack and this structure is not really the best way to structure this inside of a setter like this but we're just getting started we'll be changing the structure as we get a little bit farther into the video and you can see we hit the enemy and then it attacks us hit the enemy and then it attacks us now if you hit it with the sword button while it's still playing its attack or well it's still hit then it doesn't get a chance to actually use its attack and if you if I show you in the example project that I set up I actually well the enemy's attacking I actually hide all the buttons down here and that's how I solve that problem so they can't click on them because they're not there so we could do that as well we could have it hide all the buttons whenever we use our attack and then after our attack is finished then we could show show those again and that's probably what we'll end up doing but for now I think this is gonna be all we're going to do today on this video we've got a nice little animation for when we hit the enemy and then an animation for the enemy attacking us back and if you deal all the damage to the enemy it will disappear and be dead so thank you so much for watching this video part 3 I will be working on part 4 this week as well trying to get that out here soon so keep an eye out for that thank you all so much for the support and I will talk to you all later

Channel: HeartBeast

Views: 15,001

Keywords: Godot Engine, Godot 3, Godot Tutorial, Godot Game Engine, Godot 3 Engine, Godot Engine 3, Tutorial, Make Games, gdscript, Open Source, godot, game development, game engine, godot tutorial, godot 3, open source, godot engine 3, pixelart, pixel-art, lets pixel, pixel art, Pixelart, turn-based, turn-based strategy

Id: 2cLy8f6XcD4

Length: 30min 17sec (1817 seconds)

Published: Tue Aug 06 2019