TOP DOWN MOVEMENT in Unity!

something really popular in the indie community is top-down or isometric games this perspective is often used in everything from RPGs to rope likes and of course you can't have a top-down game without player movement luckily it's really simple to do in unity and in this video we'll have a look at how to create solid movement with animation but before we get into that this video is sponsored by out Stanley when creating a game you might have an amazing idea and mechanics but if your game doesn't look interesting at first glance you might be missing out on a huge pile of potential players this is where out Stanley comes to the rescue Stanley provides you with personalized art assets and even UI so your game can look amazing and you can focus on development I can definitely think of a couple of projects where I could have used this it is very easy to get started simply share your game idea and goal and outstanding then makes a personalized offer for you the team is extremely nice and easy to work with and you will have the possibility to give feedback and ask for Corrections at any time during the process so if you want some great-looking artwork for your game I definitely recommend you check it out make sure to tell them that break is refered you as they will then provide you with a bonus simply click the link in the description to get started also in case you missed it we are hosting a community game jam the idea is simple you get one week to make a game from scratch around a theme that will be announced at the beginning of the jam it's going to be the biggest gem we've ever hosted in fact at the time of making this video we already have over 3000 signups so that's amazing and we're doing it together with a bunch of awesome guys from the community both Blackthorne prod Danny chip rails and Psyche you are helping host the event and we'll all be documenting our game development process the event will take place the last week of August and I will also be making a video afterwards showing off my favorite entries from the jam so make sure to click the link in the description and join the Jam alright with that said let's get moving [Music] so as you can see I've set up this quick XML level and the sprites that I'm using are from the tiny RPG forest pack which is available for free on the unity asset store I've made a few changes to some colors in Photoshop but otherwise they're completely unchanged so the first thing that we want to do is of course bring in our player so I'm gonna go to the tiny RPG forest folder I'm gonna go under artwork sprites and find the hero folder and in here we have sprites for different animations first of all we need the idle animation so let's go on the idle here and as you can see they've created three different sprites for the different directions our hero can be facing so I'm gonna take the hero idle front here and I'm simply going to drag it into our scene now I've gone ahead and set all these sprites to a pixels per unit of 16 by default this was set to a hundred and so everything was much smaller so if your character is also too small you can simply go in and set this to 16 and hit apply and just a quick tip if you want to do this for all the sprites in your project you can always go here and select texture and then simply shift select everything that comes up and this way you can change the pixels per unit for all of them at once awesome so now that we have our hero here let's go ahead and rename him to player and now we are ready to start moving him around this is done in two step the first step is adding the actual movement to our game object and the second step is adding animation to our player based on that movement so both steps are actually fairly simple the first step is going to require a bit of programming but it isn't too bad so let's start by hitting add component and we want to add in a rigidbody 2d component this will enable physics on an object let's set the gravity scale to zero so that our player doesn't just immediately fall down and we can also go under constraints and freeze the rotation on the Z to make sure our player doesn't rotate and with that we're ready to create our player movement script so that's it a component search for player movement hit new script and create an ad and let's double click it to open it up in visual studio so the first thing that we want to do here is get rid of our start method we won't be needing that and instead we want to add a few variables the first one we're going to need is a movement speed so let's create a public float with our move speed lets default it to something like five will also need a reference to our rigidbody since that is the component that is going to act as the motor that moves our player so let's create a public rigidbody 2d and let's just call it RB for short and now if we save this and go into unity we can see the two variables under our player movement we have the move speed that we can adjust any way that we'd like as well as an empty field for our rigidbody so let's simply take our component and drag it in and we've now linked this component to our player movement and that means that we can now access it to move around our player and we could of course do this inside of our update method update is called once per frame so it makes sense to use it to move around our player since this way we can gradually move him by moving him a tiny bit each frame however update isn't actually a good place to do anything related to physics the reason for this is that your frame rate can constantly change which makes physics fairly unreliable instead it's recommended that we use something called fixed update let's go ahead and create that function right here let go void fixed update and we can then add the parentheses and curly brackets just like our update method so fixed update works in the exact same way that update does it's also called a bunch of times per second however it's executed on a fixed timer and not stuck to the frame rate like update is by default fixed update will be called 50 times a second so this is much more reliable when working with physics however we do still want to use update for registering our input so we'll keep both functions here and we'll handle all of our input inside of update and we'll handle the actual movement inside a fixed update this is a really solid way to handle movement in unity and we'll make sure that we don't get any weird behavior so let's start by registering some input again we do this inside of the update method here we can use input dot get access raw in order to get some input in a certain dimension first of all we're going to get our horizontal input and the cool thing about this function here is that it's going to give us a value between negative 1 and 1 depending on our horizontal input so if I press the left arrow on my keyboard that means we want to move to the left and so this function is going to give us minus 1 if I press the right arrow that means we want to move to the right and this function is going to give us 1 and if I don't press anything at all it's going to simply return 0 by default this will both work with the arrow keys the WASD keys as well as control the input however I will mention that unity is currently working on a new input system that will replace this I can't imagine this not working for quite some time but if you're watching this in the future and you're getting issues you might want to check out our video on the new input system that should help you fix your problems so now that we are getting this value between minus 1 and 1 we want some way to transfer it from our update over to our fixed update so that we can move around our player based on that value and to do that we can simply create a variable up here to store it so let's create a vector to called movement and because this is a vector 2 it will both store an x and a y so a horizontal and a vertical and that way we can simply set movement dot X equal to input get axis raw horizontal and movement dot y equal to input get axis raw vertical so now we're both getting the horizontal and the vertical movement and we're storing it in this vector 2 called movement and this means that we can now go to a fixed update and use this movement variable to actually move a player we'll do that using our rigidbody so RB and a function on here called move position this is simply going to move the rigidbody to a new position and make sure it collides with anything in the way and the new position that we want to move to is our current position so RB the position that is the current position we're in plus our movement and because we want to control the speed of our movement we'll multiply that with our movement speed and that should work however to make sure that our movement speed will always stay the same no matter how many times our fixed update will get called we can also multiply with time that fixed Delta time this variable is simply the amount of time that has elapsed since the last time the phone was called and the sort of that is a constant movement speed if that's a bit confusing to you don't worry I totally get it it was for me in the beginning but for now we can go ahead and hit save let's head on into unity and let's try and hit play and if I now press W you can see I move up s I'm gonna move down a to the left and D to the right and I can do this with the arrow keys as well awesome so we can now move our character around the next step is adding animation to reflect this movement so to do that we of course first need to create some animations you can of course make these yourself in a program like Photoshop in my case the character from the tiny RPG pack actually comes with animation so let's again navigate to the hero folder here and as you can see there a bunch of different animations here you'll also want to go to window animation and open up the animation window not the animator but animation and this is why we can create individual animations so with the player selected we're going to hit create let's create a new folder for this called animation because we're going to be storing multiple of them in here and let's start by creating an animation called player underscore Idol that's it save and as you can see we now have created an animation called player idle and all we want to happen inside this animation is we want to display the hero idle front sprite something we're going to drag that in there and as you can see if we hit play right now that's all it's doing not really that exciting so let's go ahead and create another one let's hit create new clip let's go player underscore walk underscore up so we'll use this whenever we are working in the upwards direction and this is a bit more exciting because for this we'll use the hero walk back animation as you can see this consists of multiple sprites I'm simply going to select the first one hold down shift and select the last one and then we can simply take all of them and drag them into the animation window and right away if we go back to our player and hit play we can see that plays and animation it's currently way too fast so go to the COG here and make sure that show sample rate is selected we then go to the left here and on dissembles that changed that from 60 to 12 samples basically means the frame rate for our animation so if we hit play now we can see that it's much much slower which looks a lot better so that is our walk-up animation that's go ahead and create another one we'll call this one walk down this time we'll go to our hero walk front select all of our sprites drag them in set the sandals to twelve and it's a play that looks good let's do the same thing for walking right so play walk underscore right let's go to our hero Walk Side folder select all these and drag them in Sambo's to twelve and hit play that also looks good and finally we want to create one for walking left however by default this pack doesn't have separate animations for walking left now I've gone it and created these by simply taking each one of these sprites opening it in Photoshop you can use pretty much any image editing software for this and just flipping it on the X so as you can see from this one to this one I've just gone ahead and flipped it and I've done that for all of the different sprites in this folder and put them all inside of a folder called side flipped and you can definitely do that in fact this is a pretty good way to do it because it means you can also create variations depending on if you're walking right or left after all your character might not be completely symmetrical however an alternative to doing this is just selecting the player and then through script whenever you're moving to the left instead of to the right you can go in and scale your graphics to minus 1 on the X and that way flip him inside of the editor that's an alternative route I do recommend you do this in an image editing software and I'll show you why in a sec but for now just know that that's what I've done here and now let's go ahead and create a new clip play a walk on the score left and select all the sprites drag them in set the samples to 12 and voila awesome so now we've created all our different animations and if we go into our animation folder we should be able to see them you have play idle and are for different walk animations however the software has also created another object in here called player and if we have a look at our player it's also created a component here called the animator we're on the controller it references this object that's because this player object here is our anim controller and if we double-click it it's going to open it up in our animated window which looks like this inside of this window we can see all of the different animations we've created and that's because we use this window to transition between animations so this is why we control when we will idle when we walk to what side and so on you can easily add more animations here for shooting dyeing and so on but for now let's focus on these so let's take our player idle here and as you can see it's currently growing orange because this is our default animation you can always change this by right-clicking and going set s layer default state but we definitely want it to be idle by default I'm also going to take these other animations here and delete them because we're not going to be using them like this just yet remember you can always put them back in by simply clicking and dragging so what we want to do is basically have two states we're either going to be idling or we're going to be moving and whenever we're moving we want to move in the right direction now to control this we'll go to the top under parameters and we'll create a new parameter this is going to be a float parameter let's call it horizontal and we can just leave it at zero let's also create another one called you guessed it vertical and we'll also leave this at zero and the cool thing about these parameters is that we can update them through script so in just a sec we can go inside of our player movement script and make sure that horizontal and vertical is constantly updating based on our player input and what we can then do is play animations based on these two values in fact we can use something to transition between animations called a blend tree so let's right-click inside of our animated here go create state and let's select from new blend tree as you can see this creates a node called blend tree I'm gonna go ahead and rename this to movement and the cool thing is that this node is going to be responsible for all of our movement and we then double click on it to kind of move a layer further in and in here we can define what our movement looks like in the different directions so by default here you can see that it's created a node here Copeland tree and it has a slider called horizontal because that's our first parameter and we can add motions to this blend tree so let's hit + add a motion field and let's do that one more and add another motion field and as these two motions we can then add let's say our walk down and our walk up and what you'll notice is that we can now transition from our walk down to our walk up using this slider really really cool in fact if we select our player here and click we can see him transitioning between the two animations when adjusting this slider so currently this slider is going from zero to one we want to change this because our horizontal value again goes between negative one and one so to change it let's go in here and disable automate thresholds and it said I'll play a walk down so here we are moving down the screen and so we want to set that to negative one and for play a walk up we're moving up the screen so let's leave that at one and now this slider will go between negative one for moving down and one for moving up awesome and the coolest thing is that we can expand this to work in multiple directions so not only the vertical also the horizontal and to do that we simply change the blend type from one D or one dimension to 2d symbol directional here we can set the two parameters the first one is horizontal the second one we want to set to vertical we can add more emotions here so that's go ahead and add two more motion fields let's add the player walk left and the player walk right and now for our positions here we want to walk down when our position on the X is zero and on the y is negative one want to walk up when it's zero on the X and one on the Y and then left when it's negative one on the X and zero on the Y and right when it's positive one on the X and zero on the Y and as you can see this places are for different motions in four different places on our screen representing the four directions that we can go and if we take this red dot here and move it around this represents our player so if we are moving to the left he is going to be playing the left animation if he moves to the right he's going to play the right animation if he moves up he's going to play the up animation down the down animation and as you can see it's going to always choose the animation that is closest to that movement really really cool in fact you can go ahead and add more animations in between here if you want him to be able to move back as well awesome so that's our plan tree and that's our movement layer if we now go back up here to a base layer we can see that all of this stuff is currently inside this one node called movement and we just need to transition from our idle to a movement whenever we're actually moving doesn't matter what direction that is taken care of in here so to do that let's go ahead and add a third parameter called speed and this is always going to be a positive number representing how fast we're moving so we can now right-click on a player idle here hit make transition and transition to our movement node let's then click that transition and you can add a condition so we only want to move whenever our speed is greater than 0.01 just a really small number and we also want to make sure that this animation is instant so we will disable has exit time so we don't wait for the previous animation to play out and other settings will set the transition duration to zero and we can do the same thing to go back from movement to our idle animation so that's right-click made transition click on our idle animation and now under this transition we'll set a condition that we want to go back to idling whenever our speed is less than 0.01 again we don't want this to have exit time and let's set the transition duration to zero and that's actually it for setting up our animated controller now we could go ahead and add this to the script right away but we can actually preview what's going on by going into our game view and then clicking and dragging and ducking are animated to the right here and then that's hit play and as you can see when we are selecting our player here it's currently playing the player idle animation however if I go ahead and increase the speed here to one we can see that it changes to the movement animation and if I increase the horizontal movement it's going to go to the right if I decrease it below zero it's going to go to the left and the same thing with the verticals so right now he's moving down I can also make him move up and so on so really cool it looks like our animator controller is working so now all we need to do is go into our script in here we'll need a reference to our animator components so we'll create a public animator and let's just call it animated with a non-capital a inside of our update method we'll go meter dot set float this allows us to adjust a parameter we want to set the horizontal parameter to our movement on the X which is the same as what we get right here and we'll do the same thing with the vertical so I'm just gonna copy this line here and we'll go animator that set float on the vertical to our movement on the Y and finally we want to set this speed and to do this we'll use animator that set float as well this time we'll access the speed and instead of setting this to the movement on the X or the movement on the Y we can use something called movement dot magnitude which is going to be the length of a movement vector which means our speed just to optimize this a tiny bit we can actually use square magnitude which is the squared length of the vector and this is going to work just as fine because it's still going to be positive whenever we're moving but it's actually a bit more optimized because we don't need to do a square root calculation on this vector I know that's a bit complicated you can just use magnitude if you want but just know that this is actually a nice little performance trick so if we now save this and go into unity let's select our player and there is now a variable here called animator where we'll drag in our animator component and if we then maximize and hit play we can move up down to the left and to the right and our character is always going to be animating yay that's it that's how to do top-down movement in unity and again if you'd rather flip your playthrough code instead of doing it through animation you can always go in here and adjust transform that local scale and then simply flipping that on the X however I think using animation for this is really nice because it allows us to do all this fancy stuff inside of the blend tree and the animate recently going to take care of everything for us so that's how to make top-down movement in unity now recently I've seen a lot of people making breakdown videos on YouTube things like VFX artists break down movie seams and dialect coach breaks down actors accents and I thought it could be really cool and fun to do something similar but about game development maybe offer some insight into how games are made and what makes some games look better than others so if that is something you would like to see definitely let me know in the comments also make sure to sign up for the community game jam simply click the link in description to read more and join the jam and don't forget to check out out Stanley to spice up your game with some great looking art simply click the link in description to get started on that thanks watching and I will see you in the next video thanks of the awesome patreon supporters who donated in July and a special thanks to infinity PPR Dennis Sullivan loss to violence love forever Chris face Samara Phi David Lipka louisette Ronan Daniel de Sonic Jacob Sanford and sentence commences now Kiyosaki Gregory piers Allison the fierce Erasmus and kuzey is key you guys Rock

Channel: Brackeys

Views: 720,382

Keywords: brackeys, unity, unity3d, asset, assets, beginner, easy, how, to, howto, learn, course, tutorial, tutorials, fix, tip, game, development, develop, games, programming, coding, basic, basics, C#, top-down, top down, move, movement, jam, fixedupdate, input, system, controller, controls, rts, rpg, rogue-like, shoot em up, roguelike, 2d

Id: whzomFgjT50

Length: 22min 29sec (1349 seconds)

Published: Sun Aug 11 2019