Unity 2D Platformer for Complete Beginners - #2 ANIMATION

in this video we're going to upgrade our player from looking like this to look like this [Music] the first step is to go to the unity asset store which is a marketplace where you can find 3d models 2d sprites textures materials templates and a whole lot of other assets that you can use in your games as you can see most of them have a price but there's also some of them that you can find for free which is exactly what we're gonna do today open the 2d tutorial project that we created last time and press on the asset store window on top if you cannot find this tab then make sure to press window and then click asset store like i did here next up press the search online button and it will take you to the website then type in dragon warrior into the search box next click on the dragon warrior free package that has this little orange dragon on the green background next click the blue button and it's going to import the assets into your unity project for this step it's very important to have the project already opened in unity once you do this it's going to automatically bring unity to the front and open the package manager once you see the list with all your packages just find the dragon warrior one press download then import next we're gonna see this window that basically asks you which files from the package you want to import we want all of them so just press import again when it's done you're gonna see a new folder called dragon warrior files appear in your assets i'm going to drag it into the sprites folder and rename it to character just to keep everything organized now we finally get to replace our square player with a better looking one switch back to scene view then select the player object then press the sprite button and type in idle in the search box from the results you get just pick the first one which is called idle underscore 0 1. now you can see that the shape of a player changed but the color didn't if you have the same issue tap on the color field below the sprite and change it back to white now the colors are looking great but our player is really small so i'm going to increase the scales to be 1 on all axes another issue that we still have is the fact that our box collider still has the shape of our previous player to fix this we need to select the player then find the box collider component on the right side then press edit collider now you will see 4 handles that you can drag around in order to change the size of a glider feel free to play around with it as much as you like but this is how my final result looks like now i'm going to zoom out a bit select the player then minimize the sprite renderer and box collider components because we will not be editing them anymore in this video now you can press play and test the result you're gonna see that we have two big issues right now the first one is that the player is not flipping left and right when you actually move left and right and the second one is that there are no animations so let's implement the flipping of a player first exit play mode and double-click the player movement script in order to open it to make the player flip left and right we need to check the horizontal input first but before we finish the if statement let's create a float called horizontal input which is actually going to store the input dot get axis horizontal value inside it it's just going to make it easier for us to write code in the future now let's make sure to replace the input dot get axis value with horizontal input here and here all right when you're done we're going to continue with our if statement so we will check when the horizontal input is bigger than 0 0 1 which means the player is moving right and we will change the player scale to be 1 on all axis just to demonstrate how this works i'm going to go back into unity you don't need to do this right now so check this out you already know that every object in the unity has a scale property which we can change and what we want to do right now is change the scale of a player to b1 when he's facing right and minus one when he's facing left keep in mind that we will edit the scale only on the x-axis not on all of them so now that we know what we have to do we can get back to coding so our player is already facing right when moving right that's handled by this if statement now we need to add an else if statement that checks when we move left and this time we're gonna check if the horizontal input is smaller than minus zero zero one when this condition is met we're going to set the local scale of our transform to a new vector free with values of minus one one and one and just to make sure that you remember what this code does i'm going to add a comment on top of it it's generally a good idea to write comments for yourself when you write some complex piece of code that you might forget in the future and finally we can go back into unity and test how this all works as you can see the flipping is working perfectly it even works when you are jumping and you want to change directions as well so this issue is solved moving on to animation the first thing that you need to do when animating an object in unity is attaching an animator to it to do this you need to select the player press add component then choose animator now we will create a new folder and call it animations we will keep all of our animations in here once you're done open the folder then right click inside it then choose create and animator controller right after you create it you can give it a name i'm going to call mind player now select the player on the left side and drag the animator controller you just created into the controller field when working with animations in unity you need to keep two tabs open animator and animation you can see them right here if you close them by accident or you don't have them at all just make sure to go to window animation then pick animator and animation as well when you open them they're going to pick a certain position on the layout in my case the animator went to the top bar and the animation opened as a separate window you can drag them around and place them wherever you feel more comfortable i like mine to be on the bottom okay as soon as you're done select the player object open the animation window and press create for the new animation we're gonna pick the name idle then press enter and click on this red circle in the animation window this button allows us to start recording a new animation so make sure to press it it's crucial for this step when you press it you're gonna see that both the button and the timeline here becomes red which is a good indication for you to know when you are recording an animation the next step is to extend the sprite renderer component and press on the sprite button then you will see the select sprite window and you will type in idle in the search bar then press on idle zero to once and double click idle zero one the select sprite window is going to close automatically and now if you look inside your animation you will see that you have a keyframe at second zero next press on the zero zero five marker or drag the white line towards it now press the sprite button again type in idle and double click on idle zero two now you have the second keyframe let's repeat the process until we have 6 keyframes with all the idle's price make sure to move the white line on the timeline every time before you change the sprite on the player when you're done press the red button then press play to see how your animation will look you can also hit play on the top bar to see how it will actually look in the game it's much better than before but i personally think that it's a bit too fast for now so let's slow down a bit to make it happen we need to go back into the animation window and select all keyframes which you can do by either pressing ctrl a or command a or box selecting all the keyframe with your mouse now to extend the animation you need to press the little blue line on the right and drag it from 25 milliseconds to 45 milliseconds which is going to make the animation slower because it's gonna add more time between the frames okay i think it looks good now so we can move on to the rest of the animations let's continue with the running animation to create a new animation press idle and from underneath it choose create new clip let's call it run and press the red button in the animation window after that we're gonna do exactly the same thing as we did with the idle animation only this time we're gonna type in walk into the search bar and choose all the sprites related to walking alright when you're done you can zoom in on your character a bit and press play in the animation window and this time i'm actually pleased with the speed but if you want to slow it down or speed it up use the same technique that we used for the idle animation alright now we have a running animation now the question is how do we implement into the game to solve this we first need to open the animator window now i want you to pay attention to the yellow rectangle that's called idle and the gray rectangle that's called run these are the animations we just created the idle animation is orange because it's set as the default state of the animator which means that every time when you start your game or your level your character is going to be in default state which is what we want but now we want to create a condition which allows us to take the character from the idle state to the running state and to do this we need to create a transition now right click on the idle state press make transition then left click on the running state you're going to notice that the white arrow has appeared and it's connecting idle to run if you left click it on the right side you're going to see that it has some properties we're going to tweak them in a second but for now let's create another transition this time we need to right click on run press make transition then left click on idle this transition is going to help our player stop running and go back into the idle animation now the final piece of this puzzle is called a parameter which is a value that you feed to your animator from your code to let it know when to do certain actions in our case when to start running and when to stop running to create a new parameter you need to press the parameters button right underneath the animator tab and you're gonna see a text that says list is empty which means we have no currently created parameters to make a new one press the plus sign then choose a boolean and call it run now you can press on the transition arrow between idle and run and on the right side underneath conditions press the plus sign now you'll see that run was added automatically and that's because it's the only parameter that we have in our animator and the value is set to true which means that our animator will transition from idle to run when the run boolean will be equal to true i think you got the point now let's take care of the opposite transition from running back to idle so pick the transition arrow add a new condition but this time instead of true pick false now the next thing that we need to change is this has exit time check mark on both of our transitions when his exit time is enabled your transitions will not be immediate which means that it will take you a bit of time to change from one animation to another it might help you in some cases when you're trying to create more natural animations but in our case we want it to be immediate and we want it to be very snappy so select both of our transitions and turn exit time off okay now our animator is ready to handle the transition from idle to running and from running back to idle now the question is how does it know when the run parameter is true and when is it false to handle that we're gonna need to do a bit more coding in the player movement script first off we're going to need access in the code to our animator component to get it we're going to use the same principle that we used for our rigidbody 2d component so create a private animator called anim or whatever else you like and in the awake method use get component animator to get access to it and just to help you understand this code better and remember what it does i'm gonna put a comment on top of it saying that these two lines help you grab references for your rigid body and animator component from your game object okay great now that we have a reference to our animator we can use it to set the value of our run parameter directly from here to do this we're gonna go inside the update method and i'm also going to put a comment in here as well so you understand what this does then i'm going to say anim dot set bool because our run parameter is a boolean as you might remember then i'm going to open the round brackets then i'm going to open the quotation marks and type in run inside make sure that the name that you put in here is exactly the same as the name of the parameter inside the animation window otherwise it's not going gonna work then you need to put a comma and give it a boolean value which means true or false but as you can see i didn't do it i actually put in horizontal input exclamation mark equals zero so what does this mean to explain it briefly this is basically a logical check to make our code clearer and shorter let me illustrate how it works with an example as you remember the horizontal input depends on whether or not you are pressing the left or right arrows in this case let's say that you are not pressing any of them and as you know the horizontal input in this case is going to be equal to zero so now you can read this statement like is zero not equal to zero which obviously in this case is false so you take this false value and you immediately fit it into the run parameter which ultimately means that your player is not gonna run it's gonna play the idle animation now consider the opposite scenario let's say that your arrow keys are pressed let's say that your d key is pressed or your right arrow key is pressed the horizontal input is going to be different than 0 in fact it's gonna be one so is one not equal to zero yes it's not equal so we get a true value so when your right key is pressed your player is going to be running and the same thing goes with the left key all right sorry for the long explanation but i really wanted to be concise here so you can understand what's really happening behind the scenes so finally you can go back into unity press play and see how it works in action the player is facing the right direction and the animation of running is playing correctly why are you running why are you running but the player is also running well in midair and we have no jumping animation so let's tackle that next we'll start off by selecting the player and creating a new animation just like before we'll call this one jump press the red animation button and change the player sprite in the search box type in jump and select jump 0-1 for the first frame and jump 0-2 for the second frame and that's it this animation will only have two frames if you open the animator window you're gonna see the new animation jump here but it's not connected to anything so let's solve this create a new parameter of type boolean and call it grounded now i'm going to drag the jump state up so it's parallel to any state now i'm going to right click any state and create a new transition from it to jump then select this transition arrow and add the condition that when grounded is false we're gonna transition from any state to jumping and don't forget to turn off the has exit time check mark if it's active now you might be asking why did i make the transition to jumping from any state and not from idle like we did with the running animation and the answer is simple and it's the fact that we need to transition to the jumping animation as soon as the player presses the space bar so it doesn't matter in which state your player is idle running or whatever else we'll add in here from any state it's going to transition to jump as soon as the space bar is pressed okay enough explanations the next step is to transition from jumping to idle when grounded is true so every time our player hits the ground the jumping animation is going to transition into the idle animation don't forget to turn off has exit time here now we need to change one small setting but it's going to be very important we need to double click on the jump state in the animator window and in the upper right corner we need to turn off loop time so what does this setting mean and why it's important so let me put it like this when loop time is turned on your animation is going to replay until you enter another animation when it's turned off your animation is going to play only once then stop let me demonstrate this by example choose the player object open the animation window and choose the idle animation then press play in the animation window see how this animation basically repeats endlessly until you stop it this is an animation with loop time now in the animation window choose the jump animation and press play you see that it looks very glitchy and stuttering basically horrible this is why we need to play this animation only once when the player jumps so we need to turn off the loop time alright now that you have a solid understanding of how this all works let's get back to coding and finish this thing first off make a new private boolean variable called grounded it's going to help us keep track of when the player is on the ground and when it's not next up we need to optimize our jumping code and to do this we will create a new private void called jump and inside this method we need to place the code from line 29 which is responsible for jumping now on line 29 where the code used to be we need to call the jump method now back to the jump method we also need to place ground that equals false inside it because once the player jumps it's not going to be on the ground anymore now we need a way to know when our player is grounded to solve this i'm going to use a method called on collision enter 2d and as you see in this explanation this method is called every time when a 2d collider with a rigid body like our player is touching another collider 2d like our ground remember this method because you're gonna use it every time you want to detect collisions in unity i also suggest that you use autocomplete and knight type this out manually because you can easily commit a mistake but if you still want to type this out yourself just make sure when you finish that on collision enter 2d has a blue color now you already know that this method will detect collisions between 2d objects so we'll check the object with which the player is colliding with and see if it has a tag with name ground on it if it does we're going to say that grounded equals to true i am aware that we didn't talk about tags so let me show you how they work go back into unity and select the ground object in the upper right corner you're going to see a drop down with the name tag next to it click it now now you're going to see a list with all the tags that we have in our unity project ground is not one of them so we need to add a new tag now you need to press on the small plus sign in the upper right corner type in ground then press save when you're done you need to select the ground object again press on the tag and select ground alright now let's get back to our code and put this all together first of all we'll fix the broken jumping mechanic to accomplish this we're gonna allow the players to jump only when they are on the ground next we'll give our animator the information on whether the player is grounded or not now let's go back into unity and see how it works you can see that the jumping animation is working but it's not working immediately it takes a bit of time to transition from jumping to idle to fix this we need to go back into unity open the animator window select the transition from jumping to idle open the settings then change the transition duration to zero now choose the transition from any state to jumping and do the exact same thing now we have one final step to do for this all to work perfectly in the animator window add a new parameter of type trigger and call it jump select the transition from any state to jump again and change the condition from grounded to jump and finally we need to make this trigger work in our code as well so in our jump method let's add the line that says anim set trigger jump and that's it finally you can go back into unity play and enjoy your perfect animations thanks to everyone who watched and got this far i wanted to cover a lot more in this video but it's already way too long so let's leave it for the next one as always if you have any questions or problems feel free to ask them in the comments section or on discord and if you found this helpful make sure to click the like button and subscribe that's it stay safe and keep making [Music] games [Music] you

Channel: Pandemonium Games

Views: 26,229

Rating: 4.9858823 out of 5

Keywords: Unity 2D Platformer for Complete Beginners, unity complete beginner, unity complete beginner tutorial, unity 2020 beginner tutorial, unity 2020 complete beginner tutorial, unity how to make a game 2020, unity 2d player movement, Unity 2D player movement 2020, unity 2d platformer tutorial 2020, 2d movement unity, unity platformer complete beginner, Unity 2D Platformer episode 2, unity 2d animation, unity sprite animation, platformer for complete beginners, unity 2d platformer

Id: Gf8LOFNnils

Length: 21min 35sec (1295 seconds)

Published: Fri Dec 18 2020

Reddit Comments

[u/NickPandemonium]

Hey everyone, hope this helps you. If you have any feedback on how to make my tutorials better that would be highly appreciated.