2D Godot 4.1 RPG - 2 - Player animations

in this video we're going to take a look at how we can create animation into Google and then how we can also use the animation tree to get the right direction when we are moving in full Direction this video is a bit long so I'm sorry for that but like it's a very important video because we need to create the animation we need to create the animation tree we need to set up everything right so our player can move and have the different animation set up nicely especially specifically for example this world animation that we're going to use in the next video so it's important to make that video really like precise that's why I have a second video if you want the asset everything is in the description so you can just take a look and put a link of everything in the description so without further Ado let's get started so for creating the animation what we need to do is we need to go back to our scene where we have our player and we need to go to the animation player that we have rename anime in the last video Yeah here you can see we have the window that pops up and here we have a button called animation and because we are making animation that goes in full direction we're gonna have a bunch of Animation so here we're going to be in need to create four different animation per type of Animation so we're gonna have work animation up down left right item animation up last up up left right down and so on and so on and so on so we're going to create a bunch so get ready for it so for that we're gonna just click here click on new and we're gonna first start with idle so I'm going to start with idle up then here I'm going to click the button it's going to be idle down then button then it's gonna be I don't write then click on the button new idle left then we're gonna do the same with the work animation we're going to work up then we're gonna do work down then we gonna click work right and then we're gonna do work left we're gonna do also the swell animation so that's why we're gonna be this world up then we're gonna have swirled down then we're gonna have swirled right and then we're gonna have world left then we need to create another two set of Animation we're gonna create a jump animation so we're gonna do a jump up then we're gonna create jump down then we're gonna create the jump uh right I think we can start to get lost jump down jump right jump up okay and so now we have the jump left and we just need one last animation which is our dead animation and so for that we just need to tap dead and that's it because we're just going to use a simple animation for the animation so now we need to uh basically create our animation so for that we need to uh go back to our Sprite and so I'm just gonna go back here on my uh on the left part of the screen I'm just gonna right click and I'm going to show in file manager click shown in file manager and so I'm just gonna open my um my spreadsheet and you can see we have always the same logic so first we'll start with the right then down then left then up that's how I've done the animation most of the time so now what we're going to do is like we're gonna basically follow the same uh the same example so here we're gonna go to idle right and we're gonna go to Sprite and because we're in the animation tab now you can say we have a sort of little key icon that pops up here on the on the side of uh each element of the inspector and so this is what we're going to use to key uh different animation so here I'm going to go to frame and I'm going to key and I'm going to create a reader track I'm going to click on create I'm just increasing that end or basically and so now I'm just gonna key very often I have that sort of feel pops up here so I very often make a double I don't know why but anyway so I'll come back here delete it just gonna go back to the second line up so here I can put now that six because here I am at dot six so I can put that six and I put that on Loop by clicking that uh button here and so now I'm just watching my animation it is working well so now I can go to idle down and I'm basically going to do the same thing so I thought I just need to come it's here the sixth one create that like this voila I'm gonna put on dot six and loop and I'm gonna test it okay perfect so now I need to go to either left and I'm gonna go back to zero and I'm gonna create voila I'm gonna put that under six and I'm gonna put it on Loop all right up and so now we need to do up so for that I just need to come uh here I need to put Idol up and I need to go back to zero and I need to just go here create and then voila so now I can put dot six and I can put it on Loop so let's have a look okay it works fine so now we need we need to do basically the same for all the other animations we're going to have like the work animation so we're not going to start with work right and we're going to come here so it's this is this one this one is longer so yeah that's one so this one is longer so I'm just gonna click like this parallel so we stop at dot eight so that's fine so we need to add that animation on loop as well so that's good so now we need to go to work down come back to zero and here I can put myself at 32 then I can get voila dot eight and I can put that on Loop let's have a look okay it works fine then I can just come back and come to work left and I can continue create voila so now I can put that eight uh put it on Loop and that's good okay that's fine and so we just need to do work down so no work out sorry uh we need to come here and just need to put it is this one 48. so up so now that we have that we have the idle and work animation that is set up I just need to put it on dot 8 and put it on Loop let's check let's check yeah it's good so now we need to do the swell so we're going to do the swirl right this one is like less long so that's fine so it's just for animation so this one uh this one this one this one this time we don't put it on Loop because the sword is going to be triggered so we don't need to put it on Loop but we're just gonna make sure display well okay so now we're gonna do swap down come here voila put dot for not put it on Loop just making a quick check it works then we're gonna do swirl left I'm just getting out of it like this so yes what left like that I think I missed some animation one uh I I missed an animation here I think so come back here up up while I missed I miss that animation Rider Hub well and so now it works fine so dot four let's see okay that's good and so now we need to swap up and we are almost done with the animation so like this animation in Google is one of the things I think can still be uh improved but the I'm using the animation player because I'm going to be in need of it for the the Collision shape of this world so that's why I'm using the animation player for this case so now we're gonna do the job so we're going to jump right normally yeah that so jump right so what I'm going to do here is like I'm going to adjust create I think it works fine so okay so it's that seven I'm not gonna put it on Loop I'm just gonna check okay it works fine so now we're gonna have like a jump down normally I know it's jump left this time so so jump left and I'm gonna keep that voila I'm gonna print a DOT seven let's have a look okay works fine then we're gonna have jump down I believe so yes so it's the seven let's have a look okay and now we're gonna have a jump up and then we just have last one animation to do in the set we have done ah motivator uh so this one here voila just need to come back like that voila up so now I can put that seven and I'm good and so now we just have the data animation to do so the animation is the last one so it's like 100 and then I can just all right put it like this and this one will have display nicely too okay perfect so now we have set up all the animation so now that we have created all those animation now we need to set up the creation shape for this world because for now we don't have anything here so like I'm gonna go back into my swirls I'm going to go to swirl right and where I have my animation here displayed I want to have a collision shape that pops up at that moment and at that moment and then uh it's deactivated at that moment and at that moment so here what I need to do is like I need to go back to my player first and I'm going to click on the plus and I'm going to look this time for an area 2D and area 2D I'm just gonna click on it and I'm gonna rename its words and on that area to this you can see we have a warning we need to add a collision shape so that's what we're gonna do so we click on the uh our area today that we are running as well and we're going to click on the plus and we're gonna attach this time a collision shape 2D that creation shape has another warning we need to have a shape so we need to go air to the right and to click on empty and then to select the gradient shape if you don't see that it's because you don't you are not on collision shape so you need to click on it so air empty a new rectangle shape and that rectangle is popping up at the center of our Sprites that's not what we want we need to move it but first I also need to make it a bit more visual so that what I want to do is like I want to change the color so I guess I can see right away which one is which so with my equation shape here selected here I have the debug color as you can see and so if I click on it I can change the color so I'm gonna put something like this and so now that I have done that I can just click on my swirl area here and I can click here on the Move mode and I can move it around here and so because I'm moving the area and not just the Collision shape the Collision shape follow the area that's why I'm moving this world like this so now I can also like reshape a bit decoration shape and I can just for that go here clicking on that select mode and I can just like make it a little bit bigger or something like this and so now that we have done that we have a collision shape but the problem is that we're going to have uh we're gonna be need to move that Collision shape quite a lot because we have different animations so right now we're on the right uh but then when we're on the left we need to have it on the left and when we are up we need to have it more here and when we are down we need to have it more around here so for that that's why we're going to be in need to actually use the animation player we have created here for the animation that we have created in our animation player and we're going to be able to key the position of our sword and if it is activated or not that's what we're going to do now so uh yeah because I am on uh I'm gonna go back to as well right because I already have set up everything for as well right so here I'm gonna go back to zero and I'm gonna go to my sword here and I'm just gonna go to transform and I'm gonna key the position here and I'm gonna tick off create wizard track so now I have this and I can come there and I can just re-key the position and now we need to do another things which is uh we need this time to go back to our Collision shape we need to go back to zero and then here we need to click on disable it gonna disable our Collision shape at the beginning of our animation so yeah I can click on a disable and I can click on the key create and it creates another track as you can see and then here what I can do is I can I can like actually tick off the fact that it's disabled so I'm turning it on then here I can continue to turning it on and then here I can disable it again so now that we have done that we have the basic for the rest of the animations that's what we're gonna do so I'm gonna do sword left so I'm going to go here and I'm gonna go back to my sword and I'm gonna go back to the transform and because my sword uh is on the same on the same logic but on the other side which I just need to put minus here minus 23 like this and so it's gonna uh just like change the position there so here I need to make sure I'm on swelled click on the key and I'm gonna go back to the last last animation and I'm gonna click on the key and so now I need to go back to the Collision shape I need to key the fact that this uh disabled by default then I need to come here time I need to turn it on here I turn it on and here I turn it off so now we're going to do the same for as well down so I'm gonna come here and I'm going to just come here on this animation and I'm just gonna go to my swell and I'm gonna move it around here but yeah what I would like to do is like I'm gonna do something like this so it's going to be nice enough but I think yeah I'm gonna leave it like this it's going to be good enough for now so I'm gonna just come here I'm gonna put up whatever what have I done yeah I have made a mistake so up I come back here but so now for this well we're gonna do the same thing so yeah I'm gonna come there but you can see that if I go to that animation here which is where like the Collision shape is selected uh it will be uh enabled here if I put my Collision shape yeah it's quite big so like I can leave it like this because it's not gonna collide with my uh with my player but like uh if you want to have a specific type of collision with your player this will not be ideal me after that I'm gonna use Collision burst and I'm gonna make sure that this equation shape doesn't collide with the player so it's fine for that but that's uh what you need to understand here so here I have done the same thing again like so yeah I come here and I'm moving this one like this right there voila so here I just need to make sure that this time I key the position here and I'm gonna come here keep that position and then here I'm going to just go to my Collision shape I'm gonna add first on the Zero under the frame 0 make sure it's disabled then here make sure it is enabled enabled and this air disabled and so now we have sword app so first of all app we're going to do basically the same thing I'm going to take my sword I'm just gonna move it this time up so I just need to take this one and move it there something like this and so now I can key I can come key like this attack come here key and then on 0.1 I'm gonna just go to the Collision shape uh no actually here on the Zero I'm gonna make sure it's disabled and then here it is enabled like that like that and here I need to disable it back again okay so now we have done that that's good so we have the credential but now we also we're going to be needed to uh basically have something else because now if we go back to like uh the other animation so here for example we can see the equation shape is not animated by default uh like it's not enabled but it moves all over the place this is something maybe it doesn't bother you so like if it's the case don't don't do it but if you if it's the case you also need to make like some some adjustment here for me it's fine because honestly like like it's it is the disabled per default it's not a it's not a big deal for me so so so yes and so now that we have set up all of this that's good but now we're gonna have one problem I'm gonna show you so I go to project for that debug and I'm gonna have a tick off of tick on already available equation check so just take it like this and the live view launch the game you're gonna see that the Collision shape is enabled per default and so this can be a problem because this you want you want it to collide with other things in your game like for example a crate or like an enemy or something like this and if it is enabled per default all the times then it gonna collide with everything around so that's not good so you can do that into the animation player but there's a better way so you just need to go to the uh screw the pair script and yeah we're gonna use a built-in function in Google this is called ready so that's the function that is uh that is called at the the launch of the game and yeah what we can say we can just access that sweat Collision shape function that we have just right there if you over it you can see it you have property disabled this is the uh the name that we need to use into the code so we're gonna get access through the the swirl node by tapping dollar sign as well and Google gonna propose me already as you can see swirl slash Collision shape 2D then I'm going to do that disabled and then I'm gonna set it equal to be true so now if I uh make sure that the debug is like on visible equation shape if I launch the game you're gonna see that it is a disabled per default so that's perfect so that we have done that we can go to the next part of the uh this video which is about creating the animation tree so that's what we're going to do now so for that we need to go back to our player and we're going to click on the plus and we're going to look for our animation tree at animation tree I'm gonna just rename it anim underscore tree and here you can see we have a warning if I go over it it's a no root animation no photograph is set path to an animation player node containing animation is not set so we need to go to the right by clicking on animation on our animation tree and then just watching the inspector to the right three root is empty we click on it and we're going to add a new animation node State machine then it create that window here where we're going to be able to create different uh State into those sort of like little black rectangle and those little black rectangle gonna hold all our animation into a specific state but for that we need to also make sure that we have the animation player that is right there that is set up into the animation tree so for that we're going to say we need to go here adding player assign and we're gonna just look for animation player and then it's gonna get all the gonna have access to all the animation that we have into our animation player be aware that when you are activating an animation tree it's override your animation player so if you have to make a change into your animation player for example maybe you're not happy with like where the the Collision shape of this world is set for example you need to first to deactivate the animation tree and then you can make the change into the animation player if you try to make the change when the animation tree is uh is on it's not going to work as you can see right now it is changing so that's not gonna work so here what we need to do is we just need to have all of this setup before and then it will work fine but the problem is like you can see it I've done that on purpose if I go to animation tree and I activate it you can see it change automatically the uh the Collision shape of our of player and this is normal is because it's not set in all our animation but I'm gonna show you that later on so now let's set up that animation tree so we need to go to our animation tree and here what we're going to do is we're going to right click and we're going to add the blend space to the now blend space 2D I'm gonna rename it work then I'm gonna create another one right click add blend space to D that blend space 2D gonna be as well then I'm gonna right click add blend space to D I'm gonna this time rename it idle and then I'm gonna right click add blend space 2D and this one I'm going to rename it jump uh for now we're gonna start with Idol then we're gonna go to work and then we have swell and jump so the first thing we need to do is we need to go to our Idol and we're going to click on the the little pencil here and we have that graph that pops up there that graph gonna help us to set the direction uh to set the animation in the right direction so when we are going up we're actually going down when we are going down actually going up and here we are going to the left and to the right so what we need to do is we need to click on that create point right there and then we make a click like not a right click left click and we're going to add an animation and you can see it propose now all the animation that we have access to so here is going to be idle left and it has created a point there so now we're gonna go here and I'm gonna just left click add animation it's going to be idle down then here I'm gonna come left click add animation is going to be idle right you can see that now I start to make a graph and here I'm gonna go I'm gonna left click add animation and I'm gonna do idle up so now it has uh it has created the graph and so what we can do is like we need to change the blend here to those three little dots this is made specific 2D and so now what we can do is like we can go to our anim tree and make sure it is on active and if we go back to the root we can play that little button here and now I'm just gonna write I'm just gonna click on that little pencil and I'm gonna just go I think here and I'm gonna move the point and you can see that now it goes down here left here uh it goes down those kind of things so that's good so we are like um we are like uh setting up the the animation tree right so now you can Wonder I just need to I'm just gonna show you how to reset that so you just need to go to parameter idle and here we can put it at zero so I guess it's perfectly back to its place and so you can one down now why uh the Up Is Down and Down is up it's because of the Matrix so you can see on the you can see here for example here we have one uh here we have one here we have minus one uh and those kind of things and so here we have minus one this one is for the Y so L because we have minus one we are going to the left and here on that side we are going to one so we are going to the right yeah uh we are on one so it means that when we are going on one on the y-axis which is the vertical one it means we are going down and yeah you can see that we are on minus one uh so here it means that we need to go up because when you are going up on the y-axis in programming you're always going to uh negative so that's why we are doing it this way but now that we have created that and we don't have to worry too much about the fact that uh we need to set up a direction uh through code because that's going to be made almost automatically now what we need to do is we need to do the same thing for the order of a blank space that we have created so I need to come here on work I'm going to click on the pencil and I'm going to click here on create point I'm going to left click and here I'm going to look for my work left animation here at the top I'm gonna look for my work down animation here to the right left click add animation work right animation and then here left click animation and then work up work up so now what we can do is I can go back to root I can play that uh that blend space I can click on the little pencil and I can just by using that blending position within space I can see if it works fine you can see it has a little problems and that little problem is a normal one because the blend space here is not set to the free Little Dot so this is like a blend space to Three Little Dot is made specifically for 2D so here you can see that now when I move it goes fine so now I can just go to parameter work and I can just set those to zero and zero and I just reset the little point where it is and that's good so now I can go to root and I can do the same for my as well so right click make sure those little dots are on Three Little Dot the blend space here and so now I'm just gonna make sure that I'm on create point and then I'm going to left click add animation and I'm gonna do swirl left then here animation swirl down down voila and then here swelled right and then ear swirl up again we're going to make the same test I'm going to go back to root and I'm gonna just click as well but this time it's not going to Loop so because remember that we have set the animation on swell to not be looping so here I'm just gonna click on that button here and I'm just gonna move that you can see it works it works we also can see the Collision shape works perfectly so that's a good thing and so now I can just go back to my swell I can reset the position here and then I can just go to my jump so the jump I'm gonna come here I'm gonna go back to create Point left click add animation and I'm gonna do jump left to the top I'm gonna do jump down to the right I'm gonna do add animation uh jump right and here add animation and it's going to be jump up blend space on the three little dots and so now if I go back to root I jump is gonna work fine so let's see come here I'll just click on this one here I jump I jump I jump and I jump perfect so that's fine so now I just need to go to my jump and here I just need to reset it to zero well perfect so that we have done that we can create connection so for creating connection uh what we can do is like we can click here on connect node and we can make a transition it is immediate and so here and on start we want to be to idle per default so we just need to make a left click and connect it there you can see that here my little connection is on green so it means that it's on auto load per default so this when when the game gonna start it gonna will be because that autoload sign here is ticked it's gonna go directly to that that to that blend space so now we need to make another transition so here we need to just make a left click and go to work but here we need to toggle off that that button because here we don't want to automatically uh be able to like transition automatically here we want to do a transition when we when we need it and what we can do as well is like we can make a work a transition from work to idle because we want to transition from idle to work when we are not working when we are working but when we are not working we want to transition back to idle so yeah what I can do is I can just go back to my select mode yeah I can make sure that uh so I can access the parameter that we have here so I'm just gonna make a little bit of space like this so it's good and so so here we have set up the transition nicely and we need now to have transition uh set up for when we are maybe like maybe we are like not moving and we want to attack something or maybe we are working we want to attack something so what we need to do here we need to create transition as well so make sure that you connect the node you come here and then from soil you go back to idle and from morgue you go here and Francois to go back to work uh the job We're not gonna do something with this well because we know we don't want to be able to uh Slash something while we are jumping but what we can do with this world is we uh with the jump we can set up uh the idle and work animation transition to the jump so for that I just need to go back to my select mode I'm just going to select all of this and move them down a little bit and I'm going to move my jump blend space and I'm going to put it right there and so now I'm going to click on the connect node button and I'm gonna make a transition from to Idol and from Idol to jump and then from jump to work and from wall to jump and so now we have that we have that sort of diamond shape animator here now we're going to be able to use full code so how do we use that through code here we are into the root of our animation tree and we can see we have transition set an image yet and here we have play mode travel this is what we're going to use for traveling through code to our animation and display the right animation so we need to go back to our player script I'm going to close the animation Tree tab so here what I need to do is I just need to make now reference to my animation tree so I need to go back at the top and here what I'm going to do is like I'm going to do at already to be dollar sign and in three so here I'm just storing inside a variable my animation tree node that I have right there and now that I have done that I can just create a new variable in which that which will handle the state of the animation that we have inside the animation player accessible for the animation tree so for that I just need to create a new variable here and I'm going to call it anime underscore State and I'm gonna set it equal to the variable I've created here animation 3 so I can just copy it dot get and here we're gonna go and look for parameter playback right there so we're gonna use something that in programming is called a set get so we're gonna get information and we're gonna set them somewhere so that we have done that what we need to do is we need to set the animation because yeah those two lines of code are getting all the information we don't need to be able to set properly which animation we're going to display in when we are moving left right where we are not moving so now we have done that I can come here into my if input movement is not equal to I can just put some space and here I can access my anim state so for accessing those uh animation stands I have here I need to call the animation tree so I need to come here and I'm going to tap animation tree dot set parenthesis and so now I'm gonna look for parameters Idol blend position and yeah there's another thing that we need to do is that we need also to have a value you can see that it's uh like godo is telling me void set property string name so this is the name of my animation and value is variant the variant is the type of uh number we use for getting coordinates and so yeah what Google needs is basically just to have a reference to input movement so we know that the animation uh trigona use the number generated by the input movement as the variant so yeah I just need to put comma input underscore movement and that's it and so now I can just copy that and I can just come here and name underscore tree dot set and this time I can look for parameter work blend position and then here I can put comma and I can pass input movement then I can do the same anim underscore tree this time set dot set and this time we're going to look for this world the blend position and we're gonna just pass input movement and lastly we can do the same again anim underscore tree and underscore tree voila dot set and this time I'm gonna just reference my jump blend position although I'm not going to use it now but like I'm gonna reference it already and so here because we have all of this now Godot gonna know that when we are pressing a movement we're going to be in need to um to take a look at the input movement that has been pressed and then we're gonna display the right animation in the right direction according to the movement that we have like connected so yeah because the movement are set when we are not equal to zero so when we are pressing the key here what we want is to move so here what we need to do is we just need to call our animation to move so for doing so what we just need to do is like now we need to do a name underscore State DOT travel and here we need to travel to work and that's all letters and so now that we have done that we can do basically the same when we are into when we are not moving so we can just copy that line and instead we don't recopy all of this we just need to have that specific line and we can put it here and we can this time say idle and normally this should work so let's have a look I'm gonna launch the game it doesn't work why is that it is because I haven't put my uh anime state to be into an already variable so I need to just put already VAR and now this is going to work so I'm just gonna close the debugger close this let's launch and so now we have Austin but you can see that we have like real animation at the beginning and this is normal is because I think we have a problem into the animation tree so I'm just gonna go back there so I'm gonna come here and yes that's what I was thinking when you have like the Green Arrow here and this means that this is the uh the animation that is display uh at launch but here we have two I think it's the burger we're having good at the moment so what I'm gonna do is like I'm just gonna delete this one and I'm just gonna click on the connection node here and I'm just gonna remake the idol to work and so now we have we don't have that green arrow here and this will work so let's have a look so now you can see that it works fine and then here when I move it works fine perfectly so that's good so we are going on the right direction there so now what we need to do is we need to be set setting up this world uh this one animation because for now we don't have a function that ends all this word and we need also to ask that deal with uh different animation uh State and so for that we're going to create also a state machine so that's what we're gonna do in the next video so I will see you there so that's it for this video I hope it has been helpful for you if you do get not hesitate to give a thumbs up and subscribe to my channel and also check the link in the description if you want I have courses I have lots of things in the in the description so anyway I want to thank you for watching and I will see you next time bye

Channel: Jean Makes Games

Views: 9,109

Keywords:

Id: sg9A67SeaQE

Length: 37min 28sec (2248 seconds)

Published: Fri Jul 21 2023