Top down 2D movement & animation in Unity

hello everybody and welcome to this video on making a top-down character controller in unity 2d so now we um we got to make we got this scene here and if you don't know how to and if you want to know how to set all this up i the last video is on um tile maps so definitely check that out if you don't know how to work with tile maps and then um i've got we're gonna set up this player controller and now really the code is pretty easy but um setting up all the animations is the tricky part so what we're going to do is we're going to go to wherever our art folder is and this just came from an asset pack that i downloaded that i will leave a link to in the description and this we got this character here and if you want to know how to set up this pixel art then definitely check out my video on that so we got this character and um i've got already got them all sliced up and what we're going to do what we're going to need to do is we're going to need to make a few animations for this player so what we're going to do is we're going to need to uncollapse him and then we're going to just drag in this little dude into the scene and i'm going to uh close this little title palette because it's driving me crazy all right so we got our player in the scene here and um so he doesn't really do much now so i'm just going to rename him uh oh and he's doing the weird thing again won't let you select anything to reboot okay so i rebooted unity and now let me select it i'm just going to rename this due to player and then also add a tag of player we won't be using this but it's just good to get into the habit of that and now um i'm just going to sort this dude a little bit and add a graphics component and we're going to add the sprite renderer onto him and sprite renderer and then we're also going to add an animator and we're going to need a we're i'm just going to remove this from this feller and we're going to need to animate this player so i'm going to create a new folder in our project new create folder call this animations and then create a subfolder and then underneath that subfolder and we'll call this player and now oh what just happened player okay and now two more subfolders we're gonna call this idle we need four directions um four animations per per thing like idle and run and then hack but we won't cover attacking in this video i'll cover that in a later video probably and now what we're going to need to do is we're going to need to create an animator controller so create and then find animator controller i'm going to call this player controller alright now we can add this onto the graphics component on our player and so now we can create some animations and you're going to want to go to window and then animation and select animation and then i'm going to dock this right here and then drag up our project so that we can see both the animation and the project at the same time because um we're going to need to um since the sprite sheet animation then we're going to need to do a bit of weird stuff with the project okay anyway so now we can create an animation create under assets and then animations player and idle i'm gonna call this player idle down all right and save this and all we want is one key frame showing the player um standing down so now if we hit play you can see this is the entirety of our idle down animation now we can create a new clip and just rename this one to idle up and then we're going to drag in our player in the up position and you can see that that's working if we hit play and then another one and call this one player idle idle left and then drag in the player facing left and i'm just gonna quickly speed through this okay so now that i've got all my animations i got idle down idle left and i right and idle up and now we're going to need to create the walking animations so i'm going to create new clip player idle nope um actually walk down player walk down all right and actually we're going to need to just real quickly take this player walk down and put it under run and then i'm going gonna rename run to walk i don't know why i call it run all right now we're good okay um back to art graphics and character okay now we got this again and we got um player idle down so now we can not play idle down player walk down so now we can just click on all four frames of his walk animation and uh oh don't have the graphics selected of course all right walk down and then drag all these in so now if we hit play we can see he's walking but he's doing it really really fast which we do not want so what we're going to need to do is i mean you could like spread it out but i don't i don't think that that's necessary all you got to do is just change your sample rate now with the new version of unity show sample rate is not automatically checked so you just go to these little three dots here and then checks show sample rate only now that unchecked it so now i got to check it again and hit like 8 here so now if we hit play it's a little bit more reasonable but i want to tad slower perfect so now i'm just going to repeat this process over and over and over for the other animations in the other directions all right so now i've got all the animations and we can go to back to our we can drag the project back down and now we need to go to our animator which shows all the stuff for the animation animator whatever now you can go to window animation and then animator so we get we're presented with this little um node thingy here and we got all of our animations which i am just going to select every single one and delete them all now we can create a new state from a blind tree and we got this blind tree uh whoopsie i'm going to rename this to idle tree and then i'm going to double click on that to open it up and we're going to need to add a two parameters a float x and a float y and parameters just like control the stuff and for later on i'm going to add a bowl call it is moving and now um i can select this and then change the blend type to 2d simple directional and then change the parameters to x and y and now we got like these two little x and y parameters so we can add and now we can add four motion fields and you can see after you add the second one that this little grid pops up and these motion fields just represent the different animations so now we can do idle down for this one idle up for this one idle left for this one and finally idle right for this one and if you had um okay i'll just mention that later now we can set the position so technically when the player is down we want this little guide thing we want the y to be negative one and we want the x to be zero and that will mean he's moving down when we want him to move left we want it to be negative one and y is zero right positive one on x y of zero and perfect now we've got this thing and you might have a preview here so you can like drag this little thing around and you can see it's like a little joystick and you can notice that the x and the y are updating according to where this thing goes so that's cool now i'm just gonna set these back to zero and zero uh now that's all that we have to do for our idol tree and now i'm going to create duplicate this actually and rename this to walk tree perfect all right now i can double click on this and then we got all these this stuff here and we're going to leave everything but change these to the walk version of them so walk down walk up walk left and walk right perfect so now we got our walking thing working as well and now we can just right click on this make a transition and then click on that transition turn off exit time turn it to zero on the transition duration then add a new parameter is moving and then if it's true we want to go to the walk and if it's false then we want to go back so make a new transition make it in between these change the um change the parameters to false to is moving as false turn off exit time and then transition duration all right so now everything is working i'm just gonna sort this real quickly here all right so now we've got transitions going everywhere so now all that is left is for us to make our movement script and this is a really short script and it's pretty simple we there's not really much to it so all we got to do is just uh i'm going to call this player movement you can call it whatever you want it doesn't really matter then i'm gonna pull this up in visual studio all right so whoa we'll let that go all right um now we can start coding all right now um if you were going to uh if you um yeah public state i mean public rigid body we need a reference to a rigid body which we're going to add later on we need a public rigid body 2d and we'll call this rb now we need a public animator and we'll call this a m all right and now we also need a public float for our move speed and then we also need two more public floats and we'll call these x and y x y and when you put commas like this it just makes up multiple variables and it doesn't take up extra lines all right now we need another private ball is walking and then private vector 3 move direction all right so now we can go to private uh void start we can um now we're going to want to get a reference to the rigid body and actually we can just make this private since the script will be sitting on the same thing as a rigid body so we can just say rb equals get component rigid body 2d all right so now we got a reference to our rigid body and i'm just going to go to private void update and updates where we're going to handle our input and setting values and stuff like that so now we can set x equal to input dot get axis horizontal and now this there's a few different things that you can do here get access just gets an axis which um horizontal is amd and left and right arrow keys it automatically maps to that and that is using the old input system if you want to make a new input system i would suggest finding a video on that i will probably make a video on that later but for now this should work um there's two ways to do this you can do input.getaxis or input.getx is raw and what raw does is it immediately snaps to 1 to the value of 1 immediately as soon as you press one of the things on there so this will get a very snappy movement but if you want it smoother just leave it at input.getaxis and then this will slowly increase the value up to one um i think that for kind of like a retro style top-down game you should have input dot get access raw so that's what i'm going to do so just copy that line and now change this to y and vertical so now we're setting our y and x values and there's this is um we're just gonna need to do a quick if statement here if x is not equal to zero or y is not equal to zero and this means that we're moving then we can just say a m dot set float and this just gets one of the parameters on our animator in this case a float and then we need to put in what the name of it is which x so whatever the name of your um animation variable was for x and then i'm just going to set this to x and then we can copy paste y and y only that needs to be capital because i made it capital all right perfect now we can go and make another if statement and say if not is walking and then we can say is walking equals true and um if we just left outside of there then any time that we were moving it would be constantly setting is walking to true and that is unnecessary all we need to do is just set it to true if it's false and if we're moving because that's what this does and then if it's false true and we only need to set the is walking in the um animator once as well so anim nut set bull is walking i'm pretty sure we called it is walking but i should probably double check just ignore that error this because i didn't finish that line oh i called it is moving okay is moving and then set this to is walking so now it will automatically set itself to whatever is blocking is which in this case is true so make sure not to have it before we set is walking all right perfect now we're almost done all we need to do is make an else here and then say if is running moving walking yeah walking um then is walking needs to be false syste is walking to false and then this anim.setboom is moving needs to be set to is walking all right so now all we have to do is just call a quick function that we're going to make and we'll call this stop moving and um there's also one more thing that we need to add after this move direction set equal to new vector 3 x and y dot normalize so that we don't move faster when we're pressing both keys so now we need to go and make that little stop moving function so private void stop moving there and then we'll say rb dot velocity equals vector 3 dot 0 and what why we're doing this is because if we did not do it then like we wouldn't stop moving because there's no friction really in the top down game like that where there's no like um there's no colliders on the ground or anything so we need to set the friction the velocity to zero which is just how much it's moving at that current time so it will stop immediately stop moving all right now one last thing is we need to make a fixed update fixed update and we'll say if current wait nope nope we don't need to do that actually we can just say rb dot velocity equals move direction times move speed times time dot delta time and why we're doing this in the fixed up today is because fixed update runs a specific amount of times every second and um if we did an update then the movie would move mint would be a little bit um inconsistent it wouldn't move quite right all the time so we're doing it this way and then we're multiplying it by move speed to increase the speed because this is only can only be a value of at max one and then negative one so we're just going to multiply that by move speed and then multiply it by time dot delta time which is the frame the amount of time since the last frame passed which will just give it a constant move speed no matter what your frame rate is so now you can save this go back to our player select him add a rigid body 2d add our movement script and then reference animator on our graphics so the move speed to something like five and then leave the x and y as is and um yeah so this is pretty good i'm going to freeze the rotation or player will be wobbling all over the place and i just like to set it to the collision detection to continuous just because all right now we can save our project and hit play so now we can see oh yep one more thing we're going to need to set the gravity scale to zero and i'm just going to go ahead and set our uh our player to a default sprite i'm just going to set them to this one and then we can hit play and now you can see that we can walk around the scene and this is working just fine except for the fact that it is incredibly slow so i'm going to bump this up to something like 15. that's still pretty slow draw 100 all right now that's a little bit more reasonable you can see that when we stop walking we immediately stop walking which is really really cool because if we didn't have that then we would just go flying all over the place and now if you watch our last video you know that we set up colliders on this so if we try and run um oh yep we forgot to put a collider on the player so just create an empty game object add a box collider 2d to it collider and then just hit edit collider and then just make this about as feet you would think that you would want to make it about the same size as the player but since this is top down he only needs a collider at his feet and um we can see now if we oh we set the value for the speed in game i'm just going to set this to 150 save now if you wanted you could just multiply after saying um time dot delta time in the script you could just multiply that by 100 so you wouldn't have to deal with big values but i don't think that you need to do that but anyway you know that we have a collider on this thing and you can see the collision works perfectly there's no jittering when you try and run through a wall and you can also see and um this is why i only put a collider on the feet we don't want to to collide right here we want them to collide right here to give the illusion of 3d perfect so that is it for this video if you enjoyed it then please like and subscribe and hit that bell icon to be notified when a new one comes out and i hope you learned something and i hope this helps you a lot goodbye

Channel: The Code Anvil

Views: 5,288

Keywords: unity, 2D, top down, game development, coding, c#, movement, tutorial, animation

Id: EwWK5hHLFq0

Length: 22min 4sec (1324 seconds)

Published: Thu Jan 14 2021