How to Move and Animate a 2D Sprite using AnimationTree in Godot

i'm going to show you how to do top-down 2d movement and animation using an animation player and animation tree create a new scene give it a kinematic body 2d call it player save it and give it a sprite pass it your sprite sheet i'll include this one in the description it's got 48 frames and i'll give it a collision shape 2d as well give it a rectangle okay and i'm just going to move this right in the center and hit play okay as of right now there's no movement yet and you can see my movements in the corner here so let's add some movement so create a new script go physics process give it a empty vector to start and if we press right then we'll increase this input vector by one if we press left we'll decrease it by one and do the same for up and down okay create a variable for speed and move and slide by velocity by speed and then i'm also just going to update the input vector on the screen this is obviously not something that you would do so we can see it over here okay so we have some movement and you can see the input vector but one of the problems is that if you go at an angle you move a little bit faster so in order to fix that just normalize the vector like that and that should fix it okay so we have uh we have some movement but we don't have any animation so let's get some animations going so add animation player create a new animation idle down let's say i'll just do one of these and then i'll fast forward so 0.8 looping add track property sprite frame and for idle down it's just the first eight frames that i'm going to record and hit play and you can see it right there you're basically going to want to do the same for all your idle and walking animations by hitting new and to speed that along i'm just going to grab it from another scene over here and this has all the animations so left right etc and walking okay so we have some animations ready to go but we also want to make sure that we play them in the right direction so in order to help with the direction of the sprite i'm going to add an animation tree so the animation tree is going to be a node state machine i'm going to assign it the animation player in our scene set it to active and right click click add blend space 2d and rename this to idle i'm going to click this button so that it starts in that state i'm going to hit the pencil for editing and get this grid so this grid is a grid from -1 to 1 with a y-axis and an x-axis and this grid is going to help us map the input vector from the directions that we're pressing into an animation so these values are essentially going to get plotted onto this grid so let's start by creating the animation grid for the animation tree so click add points left click this side click idle left this is going to be idle right this is going to be idle down because y values go down add animation idle up okay so we have this grid let me just double check um okay oh we want discrete values there we go that's why i was tweaking okay so you'll notice that as i move this cursor around the the animation changes so depending on the value of this blend position for idle and the parameters of this animation tree our animation is going to change so these values look extremely similar to these values and so we're just going to pass this input vector as the current animation that should be played in the animation tree so let's do that in a script so we'll go animation tree dot sets parameters slash idle slash blend position to be the velocity and here's what that looks like so we get some directionality but when i let go the sprite goes back and that's because we're recording a value for the blend position to be zero when we're not moving but what we would rather have is we'd rather have the value freeze after we stop moving and maintain the direction that we were facing when we were moving so in other words we don't want to set this when our vector is zero because we want to be continuing to face the direction that we were in while we were moving so if the velocity is zero then we do not want to set anything and in other cases if we're moving then we move and we set this and here's what that looks like so i hit right i let go and we're still facing that direction so that's good so we're almost there we just need to add the walk animation so we're not just in idle all the time so close this come back to root right click add a new blend space this is going to be walk it's going to be pretty similar to the last one so we'll go ahead and edit add point walk left walk right walk up and walk down and if you want to see what that looks like just hit play and in the editor move the blend space around set this to discrete okay cool and this also represents a new blend position that we're also going to need to update okay so oh and let's go back to root and make sure that we are allowed to transition between these states by adding some transitions between them okay so come back to the script and make sure that we update the second blend position for block and now we need to tell the animation tree what what state we're in whether it's idle or walk so when our velocity is zero we're going to be in the walk state so you get the parameter slash playback and you travel to idle otherwise we're going to do the same but make sure we're in walk here's what that looks like so it seems to be working pretty good so one one last thing i want to touch on is when we go at an angle it's using the side animation right now but let's say you wanted it to pick the down or the up instead when we're going at an angle i'll show you how to do that so come into animation tree come into walk and just extend the bounds to whatever you want so set these to 0.1 so they extend a little bit more outwards and then using the mouse cursor you can extend these out a little bit and you'll get a different frame for when you're going at an angle depending on what you want and if you wanted it to always be side then you would extend these ones out and put these ones back cool thanks for watching

Channel: Jon Topielski

Views: 95,857

Keywords:

Id: Xf2RduncoNU

Length: 8min 33sec (513 seconds)

Published: Sun Mar 21 2021