How to Setup 2D Character Animations with Blend Trees in Unity

hello everybody chris here and in this video i want to show you guys the basics of setting up a animated character inside of the unity engine so i'm going to go ahead and hit play on my existing scene right now and you can see i can move him around just fine but there's no animations included in this so if i look at the prefab so if we look at the prefab for this character you can see we have a sprite renderer in order to actually change the frames and add animations we're going to need a animator component so i'm going to add to my prefab a animator so search for that looks like this and then you can see in the animator that we're going to need a animator controller so i sometimes like to put these inside of the directory where i'm storing all the scripts and the prefabs for my player so i might have a animator controller inside of here or a animator override controller which is basically where you can replace the animations in a animator controller with a different set but keeping all of the same connections from the original animator controller so for right now i'm going to right click in this folder and we're just going to add in a fresh animator controller so let's go ahead and create that in here i'll call it ac for animator controller underscore player and now in the player prefab we can take this animator controller and we can just drag it in to the runtime animator controller slot so if we double click on this animator controller then you're going to see the animator window where you have an entry point and exit point which we actually aren't going to use and then you'll be able to set up these different nodes where you can switch between animations so for a top-down game like this where the player needs to face up down left and right uh depending on whichever animation they're doing you may need to include four variations of the same animation so you will need a idle up idle down an idle left and an idle right as well as a walk up left down and right animation so the way that you set all that up with one group for each animation type is with a blend tree so we can right click into here and do create state from new blend tree you'll see a new parameter is set up here called blend but we're actually going to need two parameters because our blend tree is going to work depending on our x and y input and those are going to be separate floats you can't just put a vector as a parameter for the animator at least at the moment so let's go ahead and rename this blend tree to idle and then i'm going to double click into the motion for this blend tree and here you can see the parameter for our blend tree is currently blend but we actually need two parameters so we're going to change the blend type to 2d simple directional and now you can see that there's two parameters that we're going to need here so i'm going to rename blend to x input and then let's also add in y input so y input we can actually just call those whatever that you want so we're going to have x input be the left and right the first variable and then y input as the second and with these inputs we'll be able to automatically switch between which direction for the idle animation we're going to face so now for this motion category let's click into here and add a new motion field okay so here is where we're going to put our animation and we're going to need four of these for each of the directions and then we're going to match it to the position x and position y so when our parameters most closely match the motion values it's going to show that motion above the other ones so let's add in here three more motion values as soon as we add our second one you can see this kind of graph thing pop up so let's add a couple more so our first motion will be facing the right so that's going to be positive 1 for the x and 0 on the y our second one will be facing up which will be 0 and then 1 for the y and then we want left which is going to be negative 1 and 0 and then we need one for the bottom so that's going to be zero and negative one and you can see the four points are going to reflect that and as our input values go closer to one point it's going to show a specific motion slash animation uh depending on our input values and the setup will be basically the same for the walk animations as well so let's go ahead and duplicate this i'm gonna command d this and duplicate this over here so i'm gonna call this walk and if we jump into the blind tree it's going to take the same inputs and it's going to have these same four positions for our motions the only difference is going to be the motions themselves so now let's click on our player and set up those animations we can open up the animation window in order to create those uh animation timelines you can do that with window and then animation animation here or you can see it's command 6 or possibly control 6 on windows okay so in this animation window we can start creating animation clips which we'll be able to play in those motion fields so let's go ahead and create our idle animations so the first one i'll go ahead and call idle write and let's save that into this animation folder i have just to kind of keep them organized since we are going to have quite a few animations when we're done with our character okay so for this idle write animation we can add in a property let's take the sprite render and we're going to have a sprite property here so the sprite property you can expand it if you want to see what frame it's going to be showing for your character and in this case we have the right frame here we want to idle right which is just going to be facing the right we can also remove this frame at the end since this animation does not need to go on for a second it's actually just a single frame so we can just remove that and then the animation will just loop here between the first fraction of a second so let's create another clip like this i will call it idle left okay and then we need to add in another sprite property here so this time let's change the sprite so inside of the art for your character uh go ahead and look for the frames that you need if you don't know the exact name of the frame you can zoom in a little bit and be able to see thumbnails for each of your frames so here we can see this frame is facing the left so i'm gonna drag that into here and then make sure that this is positioned at zero seconds zero frames and then be sure to remove this character from the end and then that will be your idle left so just do this for idle up and down as well okay and by the way you can also just automatically add in the sprite property by just dragging your frame straight into here so that can save you a little bit of time we just need this at frame 0 and then let's create our idle down and drag this into there okay so now we can click on our blend tree go to the inspector and we can put these four motions in so if we click on the motion icon we can see our animations here and you know what i do want to make it a little bit more descriptive what these animations are so before we do that i'm going to go into the animations folder and i'm going to just rename these and prefix them with the word player that way it'll be really clear exactly what this is meant to be okay so back on the blend tree let's drag in each of these motions to their respective area so facing the right position one for x that is going to be player idle right here and then we're going to need uh player idol left for down here and then one for the up is going to be player idle up and then lastly we want player idle down okay so now that the motions are set up you can kind of see how it's going to be going uh closer to one of the animations depending on where we're at whichever one matches our parameters closest is going to be the one that's going to show okay so now let's jump up to the base layer uh these animations were created here but they already exist as motions in the idle blend tree so i'm just going to cut those away delete them and now if we are actually able to set our x and port y import properties in the player script then we can get those directions to change so my custom script here is the player controller script so i'm going to go ahead and edit that so in my player controller script wherever you get the import values that are allowing you to move a certain direction in this case i'm using the import manager event which is available in window package manager it's the new import manager so when i press the move keys down i get those returned as the move input here and i'm using this value to move for this move player function which does collision checking and then actually moving the player with kinematic movement i'm just glossing over that for now so what we want to do with this move import whenever we get it is we also want to tell the animator that this value has changed so that it shows up for this animated parameters and can be fed down to the idle blend tree so what we need and the script is going to be reference to this animator component so up here at the top i can declare a private animator animator and then when our script starts let's get reference to that animator equals get component okay now that we have the animator when we go down here and we get our import for our movement function we can do animator dot set float which is the type of the float then we need the name of the parameter which is x input and we're going to do move import dot x since this is a vector 2 up here it's going to have our x value and our y value and we also need animator dot set float y input and that is of course going to be move import dot y so one last thing we're going to want to put here is going to be that this value is only going to be set if the move import is not 0 0 because and the last frame where we let go of our move keys we don't want to reset the direction where the character is going to be idling in so if we were pressing right and we had a move x of 1 but then we let go it's going to reset that move import to x of 0 but we want it to keep facing the character right so when the move import is 0 0 so let's do if move import does not equal vector2.0 then that's going to be where we set these values so we only actually set the yx input if the player is actually moving okay so now that that's set up if we press right we're going to face right if we press up we're going to face up and note that when we let go it doesn't reset our x and y import to zero zero on the animation parameters this way when we're actually moving it's just gonna face the direction where we last tried to move and that is what you actually want otherwise you might have it reset to face the right when you are actually facing the left because you let go of the keys so this is what we're looking for so in the next video i will set up the walking animations and show you how to do the transition between idle states and the walking states

Channel: Chris' Tutorials

Views: 14,224

Keywords: unity 2022, unity, game development, game dev, indie game development, indie game devlog, game design, devlog, indie game dev, unity devlog, animator controller, animator controller unity, unity tutorial, unity3d, tutorial, animator controller unity tutorial, how to use animator controller unity, unity animator controller, blend tree, blend trees, unity blend tree, animation, unity animation, 2022, unity 2022 tutorial, 2d rpg dev, 2d rpg devlog, gamedev

Id: d_gSegD2FXo

Length: 11min 28sec (688 seconds)

Published: Fri Jan 07 2022