Make an Action RPG in Godot 3.2 (P6 | Animation in all directions with an AnimationTree)

good morning afternoon or evening wherever and whenever you are my name is Benjamin and welcome to another Godot action RPG series video this will be part 6 I think of the series I always lose track when I'm doing these series and in this video we're going to be fixing the animations for our player character you can see currently we setup select character can animate but we can't properly animate in all the different directions and I didn't want to write a big giant piece of code for that so I'm gonna show you guys how to do that without having to write a whole bunch of code so we'll be doing this with a note called the animation tree node so come to our player scene click on the player we're going to add a new node and we'll select animation tree and inside of the animation tree if we click on it here we get this new animation tree tab or whatever it is down here but there's nothing in it and the reason there's nothing in it is because we need to set up some of the properties over here on the right first so the first thing we need to do is tell it which animation player it will be using so the animation tree node needs an animation player to use it and that's why I did the animation player in the previous video so we'll click on this little button and select your animation player and okay there we go we've set up the animation player now we need to tell it the tree route and this is basically an animation tree can have multiple different I guess structures and so we want to tell it with the very base structure to this animation tree is and the and we get a lot of different options here but we're going to choose an animation node state machine and we don't need to worry about a lot of these other ones right now they're they're not going to be useful for the project that we're working on if you want to look them up in the documentation you can we're gonna focus on the new state machine and once we click on that we're going to get some more information down here right and it says the animation tree is in active activate to an we'll play back so that means we need to activate it here there we go and you can see we got some error messages here these are not regarding our game and we can just clear those and ignore them it's likely we did something in the editor that the editor didn't like but we're fine there so let's click active and so we get this special little area here well what what can we do with it right this this is all kind of like excessive it all seems a little bit excessive well we're gonna right-click and we can add something into here and so let's start by adding an animation we'll start simple okay so let's add our idle animation our idle right you can see when we do that it gives us a little box here that says idle right with a play button and we can press play and plays our idle animation and we can also right-click and add another animation let's do let's do run right okay and now we've got run right here and we can play that and it'll play up here and we can add transitions between these two so if we click on if we click over here to switch to connect nodes instead of the selection tool we can then click here and drag over and have a transition there and we can click and drag back and have a transition back so we can have transitions that way if we play switch back to select we can play our idle and if you click on the transition here you can actually tell it when to Trent when this transition actually happens and so our idle these two animations are set up to loop right and so that's why it's not actually transitioning because our idle is just set up to loop but if you set up auto advance let's come into our let's click on this transition we'll set up auto advance as well and it's going to immediately advance between the two instantly right and that looks really weird but if we set up our idle then it would play the idol let's turn off the auto a on our on this transition and we'll turn it on on this one right here so what happens we play our run right and and then it automatically advances to this one but you can change the switch mode so let's say we want it to switch at end now if we play our run right once the animation ends it will automatically switch to our idle right and I'm showing you this not because we're going to be using this necessarily but just so you can get an idea of what all these things mean inside of this graph here right what these little arrows mean and kind of how they work just the basics so we're actually going to delete these select this one click delete select this one click delete and the reason is because we need a system that is going to manage multiple directions for animations and the solution to that is called a blend space 2d and when we add this we can just call this idle so instead of having an idle right an idle up and I had a left and idle down we can have this blend space 2d and we can just call it idle and it will contain all of the different animations for our idle State right and you can see now it's got a new icon we've got a little edit icon right here we can click on that and that opens up this new window and we can actually switch it opens up a new tab over here so we can switch back to the root and come back into our idle root back into idle you can switch between those so inside of here this blend space is where we can set up our different and our actual animations remember how we added animations in the root well now we're adding animations inside of here that's why it's called a tree we have the root we have the idle and then we'd have animations inside of here it's a tree structure right and so in here it says no triangles exist so blending Kent sono blending can take place and so it wants us to set up are some triangles right what does that mean well it wants us to come into this one here create points you can see oops let's we don't want that point there let's switch back to select and delete that point I just switched to select clicked on it deleted it this right here is set the blending position so we'll set this back to about the center and come back to create points we'll create a point here at the very less leftmost position and for this we'll say I want an animation and we'll do idle left okay and we'll come up here to the top point and I'm gonna throw you for a loop here we're gonna do idle down and then come over here to the right and we'll do idle right and I'm gonna we got a big triangle now right I'm gonna come down here to the bottom and do idle up okay what this does is it creates so we're you can see we're on a grid and we've created these points on the grid and even though it doesn't look this way if we drag this over this grid is actually one one high negative one negative 1 and 1 doesn't that sound awfully familiar right remember when we were setting up the input vector that sounds a lot like our input vector right with the one the negative one negative one and one over here and the x and y position well that's what we're doing we're setting up a position based animation so we've got animation down up here left up and right and why did we switch up and down well it's because you can see here that the Y positive is actually up which these blendspace - these are often used for 3d games and I'm guessing that's why it's not it doesn't line up but that's okay we can work with this now if we switch back to our select mode and we move this cursor around let's see we should oh we got to switch our blend here to the little dots instead of the line and that's because we're using we're using we're not using an animation that is physics or bone based so we can't interpolate between them so we want to switch to this and we're still not getting this still isn't set up properly for how it expect it to work it should be setting our player let's click on our animation tree it is active and I did set up our animations right oh maybe our routes not actually playing oh yeah make sure that the route is actually playing and then come back into edit and now if we move this around you can see our character is move so if we come over here it faces to the right if we come over here we face to the left if we come down here we face up if we come up here we face down so our character can now rotate in this space and all we have to do is set this little position right and once again like I said wouldn't it be useful if we could just set this thing's position to be our input vector since that would work properly for this character if we come over here to the right you can see parameters and these are the things that we can actually manipulate in the blend position is the main parameter that we can manipulate we're going to set it to zero zero and that just sticks it right here in the center again and we're gonna save we're going to come back into our root and let's make another one let's make one new blend space 2d we'll make this one we'll double click in here and we'll name this one run and we'll play it okay and we'll edit it and we'll switch back to adding points we'll come to the left point here we'll add an animation run left up here add animation run down right here add animation run right right here add animation run up there we go and remember how our blend mode needed to be switched to the little dots you got to switch that there we go we switch back to manipulate the blend position we can now move around in this space in our character will rotate properly okay and we'll click on select again come over to and now if you come under parameters you can see we have the idle blend position we also have a run blend position so we can set that to zero and zero and save come into our route now we want to create a transition between these so we can transition from idle to run so make sure you click this right here and then from run back to idle like this so we've set up a very simple animation tree with some states and we're going to play our idle but we got to switch back to select and then play the Idol just so that our character isn't constantly animating and will come into our player will come into our script and now we want to use those the animation tree that we set up and like I said we want to try and get our input vector to equal the blend position of our animation tree isn't too hard I'm going to look up my reference here to remember exactly how to do it because it is a little bit it is a little bit of a weird way to set that so okay first things first we need to get access to our animation tree so we'll create another on ready var animation tree set this equal to animation tree so we've got access to that animation tree now next thing we want to do is set up our blend position and we'll be doing this only when we're moving so we'll come right here into where we're moving and we'll say animation tree and the reason we only want to do this one we're moving is because if you're holding if you're not actually getting any input from the player you don't want to update the blend position to be equal to the input vector else it'll be zero which you saw when we set it to zero the player faces to the left so we don't want our player to face to the left every time we stop so that's why we only update the blend position when we're moving that way when we stop it will actually remember the previous motion the previous blend position and continue facing in the direction that we were facing when we're moving so animation tree dot set and now we have to get a big giant parameter value which is a string here and this is why it's a bit weird because we have to tell it which property to set well if we come into it we want to set our idols blend position if we hover over this it'll actually tell us exactly what that string property looks like it's parameters Idol blend underscore position with idle beam capita capitalized so we can come back into here and we'll go parameters / idle capitalized / blend underscore position okay and you might want to double-check this because if you have any typos in this it's not going to work properly and what do we want to set it to our input vector make sure you don't have typos in that either vector so that will set the blend position for our idle we also want to do it for our run animation tree dot set parameters run blend position will also set that equal to our input vector so we're just setting the blend position inside whenever we move and we're gonna do it on all of our animations whenever we move that way we can just switch to the different animations and inside of code and I'll show you how to do that next and the blend position will be proper properly setup so if we run our game now what you'll see is that our character apparently doesn't actually update at all so let's check here well we need to make sure that one of the animation plays onload so if we select this one right here selector idle you can click the little a icon here and this will automatically play that animation on start on when the game starts let's run the game again and there we go and now we're having some issues here with our left and right it works in multiple directions but then struggles with left let's check let's check our animation for moving left where's idle left oh we have run right set up as our auto animation we want to turn that off definitely it's like a tidal left oh we're still setting are we still setting the animation we are this is the problem I knew it'd be something silly the funny thing is that the reason I realized it is because when I went in to actually play this left animation and I set it to play it was doing the thing from the video or it was doing the thing from the game and I realized that we were playing an animation on top of the animation tree trying to play it as well so yeah we definitely want to get rid of that and hopefully that fixes all of our all of our problems right let's fix all the problems by get reading getting rid of that there we go so now we've got movement in eight directions but it's still just using our basic idle pose and it's still cool that it just works like that I love how that how that works it's amazing you just set up that blend space 2d inside of here and then works like a charm so what we're gonna do for that is set up our see animation tree we want to actually set the animation that we're going to play right it's pretty easy what what you have to do is you have to get access to the animation state this is a little bit weird but what you do is up here at the top you create another on ready bar and we call this animation state we set this equal to animation tree tree let's see where's the variable animation tree this is the variable that we created right here so make sure you're using that dot to get and now we have to get parameters [Music] playback so what does that actually get what does that actually store inside of here right if we come look at our animation tree you can see we have a playback parameter and there's an animation node state which is basically it's it's basically what we've set up in here it's this our route we're getting access to this information right here now we're not we're not setting the blend position or anything we're getting access to this and we need access to that animation state so that we can then set the proper animation we'll be doing this with a function called advanced Travel it's not advanced it's travel so we'll be doing that with a function called travel so we can come here when we're gonna move we want to say animation state dot travel and then we'll go to run and then down here when we're idling will say animation state dot travel idle save and that's all we need to do in code and it looks like nonexistent function travel and base nil what this means is our animation state isn't being loaded properly and it likely means I did parameter instead of parameters so there was a typo in this and once again that's a problem with having to use a string to try and get access to that it's really easy to get a typo in these strings so double check those let's run the game again now we have moving in all eight directions and idle with very little code I have to say okay there's one other thing okay there's one other thing that's gonna drive some of you crazy and it drove me crazy to be fair so if I go up and to the right it uses the it uses the sideways right if I go up and to the left it uses the sideways if I go down and to the left it uses the sideways one if I go down into the right it uses down instead of sideways so how do we tell it to prioritize one over another one well there's a little trick that we can do for this if we come back into our animation tree and edit our blend spaces here and this little trick is that if you manipulate the position on these so that they're not at exactly one you can have it prioritize one over another one now I personally want to prioritize left and right so if you're moving exactly at a diagonal then I want to prioritize the left and right sprite so in order to do that we're going to move these positions by if we come over into our y-axis we're gonna add point one here and add point one here and we're going to switch to select and we're gonna move these up each one each by one point and what that will do is it will prioritize when we're at exactly at an angle here it will prioritize the left sprite over here right exactly at the 45 okay if we're exactly 45 over here it will also prioritize the left sprite and so if you want yours to prioritize up and down at your diagonals you would add one you would add point one to your exposition so this is a trick that I came up with and from from the testing that I've done it seems to work fine for this kind of project so let's do it with our run as well we will change will add point one here and point one here and then we'll make sure we're on our select and move these both by point one save run the game now we should always prioritize the left and right sprites when we're moving on the diagonals and there you go we've got an animated character now I know that this was kind of a lot to take in for one video not gonna lie using the animation tree has a lot of stuff involved right we have to set up the route with this with the states here we have to set up each individual blend space and then once we've got those set up we have to get access to the state the animation state and set the parameters on our different blend split blend space 2ds and so there's kind of a lot of stuff going on with this so if you have questions or concerns let me know in the comments it is a lot to learn if you don't feel like you understand it perfectly know that that's okay if you if you kind of get the basics down you have an idea okay I think I understand how this is working that's a good enough I'll consider that a win for now sometimes it just takes using this more in order to get comfortable with it right so you can become more familiar with it it'll make more sense but you can let me know in the comments once again this video was sponsored by my Kickstarter backers for the one bit Godot course there will be a link to that course if you would like to find out more about it as well if you enjoyed this video and learn something give it a like and I will talk to you all later

Channel: HeartBeast

Views: 129,306

Keywords: Godot Engine, Godot 3.2, Godot 3, Tutorial, Series, Action RPG, RPG, Pixel Art Game, Indie Game, Game Development, Learn gamedev, Gamedev

Id: Z9aR9IiiHT8

Length: 24min 52sec (1492 seconds)

Published: Mon Mar 23 2020