2D Animation in Unity (Tutorial)

so when it comes time to start adding animation to your game there are really two primary ways to go about it the first one and probably the most commonly used is sprite sheet animation this is also the technique that most people recognize from traditional animated movies because it simply means drawing a bunch of images each with a tiny bit of movement and then playing the back by quickly displaying them one by one our character from the previous video on 2d movement already has sprite sheet animations set up in exactly this way so that's what we're going to be using for this video but first this video is sponsored by a skill share skill share is an online learning community with more than 22,000 quality classes on game development tech and more if for example you want to learn how to create your own custom game art i really suggest checking out this awesome course on the fundamentals of creating pixel art for games it's a really well structured and visual course that I personally really enjoyed a premium Skillshare membership gives you unlimited access to all classes for less than $10 a month so to get started simply click learning in the description and the first 500 people will receive their first two months for free also special thanks to Michael Neely Clinton Fenske WA Andrew Kelly menko cheetah 3d and Alexander black for their support on patreon and I think we're now ready to start animating our character however there is another approach that I think you should at least be familiar with and that is skeletal animation as the name suggests this animation technique works by binding bones to our sprites which will then move and distort the images as we drag the bones around the cool thing about this particular workflow is that it allows us to draw our character only once and then animate him fully inside of unity if you wanna try out skeletal animation unity has a free asset on the asset store called anima 2d that should help you get started and definitely let us know if this is something that you would like to see a dedicated video on alright enough talking let's start animating so we're hearing the same scene as when we did or 2d movement you can of course use any scene and character that you'd like in this one we're able to move and jump around as well as crouched beneath platforms but of course currently we have no animations in here to change this let's start by setting up some animation clips to do this we'll go to our scene view and so that our player will then open up our animation windows so we're going to window animation and select animation and as you can see tells us that to begin animating the player we need to create both an animator and an animation clip we'll talk about the difference between the two in a sec for now let's just hit create and now we can choose where we want to save our animation that's right click and create a separate folder for this and let's call it animation let's then double click this folder and let's also rename this animation file to something like player and then underscore the animation that we want to work on this could be run jump or die in our case that start with an idle animation in other words the animation that the player plays when he isn't really doing anything we can then press save so now we have this empty timeline here where we can drag in our animation sprites of course the great thing about our character here is that he already comes with a bunch of images that we can use so let's go under Sunnyland and of course if you want to download any of this I will have a link for that in the description we then go under artwork sprites and under the player we can see that the sprites are split up into animation folders so let's start by going under the idle folder and here are four different images if we just try and select one of them we can see a preview in the bottom right here of course it's pretty tiny but if I go ahead and move through the images we can see that they are indeed animating our character so let's try and select all four sprites and let's simply click and drag them into our animation window and right away we can see that four keyframes has been added we can also see that if I hit play the animation plays ridiculously fast the reason for this is that we need to change the amount of images that are displayed each second currently our samples are set to 60 a pretty standard value to use here is something like 12 we can see if we now play through the animation looks much better now we can even scrub through it using this timeline marker and if we wanted to say move around a few images we could of course do that by simply clicking and dragging or just press delete in order to remove one but I'm just gonna leave my animation and sees let's go ahead and set up a few other ones while we add it let's go to websites playeridle here and let's hit create new clip again we want to make sure we do this inside the animation folder and this time let's create one called player underscore run now let's go on to our run folder let's select all of our sprites and drag women again we want to decrease our sandals to 12 and if we now hit play we can see our character is running let's quickly do this for the Crouch animation as well so player on this core Crouch will go into the Crouch folder it's like both of them and drag them in again we'll set the Sambo's to 12 again the animation plays fine and finally let's add our jump animation player underscore jump we'll go into the jump folder take both sprites drag them in change these samples to 12 and if you try and play this one will notice that it looks kind of weird the reason is that our jump animation is made up of only two keyframes one for when we are going upwards and one for when we are falling back down now we could of course go in and create these as two different animations however I think that's just over complicating things instead I'm just gonna go in and change the samples to a much lower value like - I think this is going to change our sprite around the time when we add the peak of our jump but we'll see that later so now we've set up all four animation clips and if we go into the animation folder we can see all of them here play your idol play a Crouch run and jump and we can also see another file in here simply called player which has a different icon this is what we call the animator controller the animated controller is called a controller because it controls what animations to play if we double click this it's going to open up in our animator window so here we notice that one of our windows is called animation this is where we create our actual animations and another one is called the animator because this is where we choose what animations we want to play and in here we can also see that it's already added off for animation clips we can now drag this around and arrange them in any way that we would like and if for some reason one of them isn't in here for you you can always take an animation clip from the project and simply drag it in and you can of course also select and remove them you'll notice here that currently the player idle is marked as orange and it's connected with this arrow going from the green entry state the reason for this is that the idle animation is currently our default animation in other words it's what we'll begin playing right when we start our game so if we were to now hit play when see indeed our players starts playing the idle animation right away and even though we move around and jump and try and Crouch it's just gonna keep playing idle in fact if we select up Claire and going to the animator we can see in the animation looping right here let's stop playing and we now start to create transitions from the idle animation to the other clips by the way if you want to set another animation as the default we can always right click and hit set as their default state and that's simply going to change it so whenever we start running we of course want to change from the idle animation to our run animation and we do this using what is called a transition so if we take our play run here and just place it underneath our idle animation we then right-click on idle and hit make transition and we now get this arrow that we can drag out to the other animation clips if then click play a run we've created a transition from our idle to our run animation and if we select this transition we can change when and how we want it to occur so the first thing that we need here is to add a condition because we don't want our transition to just play right away we only wanted to play in the case that we're actually moving but currently our animator has no idea whether our character is moving or not to change this we use something called a parameter so if we go to the left here we see that we have two tabs layers and parameters we want to go under parameters and hit the plus sign and here we can now create a new parameter we're gonna create a float and this float is going to represent our players speed so we'll call it speed and we'll just default it to zero then under our condition we can now hit the plus sign to create a new condition on our transition and you can say that we only want to transition to a run animation if our speed is greater than and it will just input some small number like point zero one in other words if we start moving well then we want to transition to a run animation we also want to go in here and make sure that this transition is immediate in other words we don't want something called exit time where we wait for the animation to stop playing before we start playing a new one now we simply want to transition as soon as we start moving so I'm simply going to disable that let's also go under settings and here we can choose the duration of our transition this is not something that you often use when creating 2d games but it's used all the time to blend between animations in 3d games but for us again we want this to be completely immediate so we'll go in and set the transition duration to zero of course we also want to be able to transition back from our run animation currently we will only be able to go from idle to run and then even though we stopped moving it will still play a run animation so we're going here and right click and make a new transition this one is going to go to idle let's select our transition and add a new condition this time we only want to transition if the speed is less than and then we'll again add a tiny number here so point 0 1 again we don't want any exit time and on these settings we'll set the transition duration to 0 and now our animator should actually work with these two animations in fact if we take our animator and dock it to the right here and then try to hit play we can see that by default it plays the idle animation but if I then go and change the speed they set it to 1 our character he starts running and as soon as I set it back to 0 he goes right back to idling so now all we need to do is change this speed parameter through our script and that is actually fairly easy so if we now select our player and if you haven't watched the video where we set up player movement we're basically using two scripts one is the character controller that takes care of all the physics that go into making our character move and the second one is a much simpler player movement script where we simply tell the player when to move and at what speed so let's go ahead and open up this player movement script and the first thing that we want is to be able to access our animator luckily if we have a look in unity we can see that when we started creating animations for our player usually they actually added an animated component to our player and we don't need to do any adjustments in here we can just see that the component is actually referencing the controller and so that's why whenever we make a change to our animator controller it applies to a player so now we just need to be able to control our animators through all player movement script and to do that we need to reference it so we'll go in here and create a public animator and we'll just call it animator and that's basically it if we now save this and go into unity we can see that we have this empty animator field and this is where we can drag in our animator component so now every time we write animator in our script we can access this component right here and so if we go into the update function where we get our movement we can actually go in here and write animator dot set float and then we give it the name of the float that we want to set remember this is the name of our parameters so inside of our animator we can see that the name of our parameter is speed and notice that this has a capital S so inside of our script we can then write speed with a capital S like this and then comma and then we can give it the value that we want in our case we wanted to give it our current horizontal speed of our character which is this horizontal move variable right here so we'll simply write horizontal move and close it off with a semicolon but there is a tiny mistake in here and that is that our horizontal movement will be positive whenever we are going to the right and it will actually be negative whenever we're moving to the left and we want our speed variable to always be positive so to change that we can go in and use a handy little function called math F dot apps for absolute so this is going to take the value and make sure that it's always positive so if we now save this and go into unity and hit play we can see that as soon as we start moving our character it's going to play the run animation and as soon as we stop he goes right back to idling awesome now we want to be able to jump no matter what animation is currently playing so whether we are idling or running we always want to be able to jump off the ground and so we could go in here and create a transition from each single clip to our jump animation but as we add more clips that would quickly become very tedious since that we can use this any state right here and this basically allows us to create transitions from well any state so no matter if we're idling or running we can transition to our jump animation using this node here so I'm just gonna take this and drag it down and drag the entry up here to get it out of the way let's take our jump animation and drag it over here now we can transition from any state to jump and of course we still need to go in here and specify a condition otherwise we're just going to be jumping all the time and for this condition we need a new parameter so let's hit the plus sign and this time we want it to be of type Oh are we jumping or not we call this is jumping and we'll just set it to false by default and then under the condition here we can hit the plus sign this time we don't want to check for speed instead we want to check if is jumping is true and again if it is we don't in exit time and we also want to set the transition duration to zero of course we also want to be able to transition back from jumping so let's go ahead and create a transition to the player idle here and we only want this to play if we are currently not jumping so it's jumping is false and our current speed is currently less than point zero one and so this is really cool we can add as many conditions to these transitions as we want let's also add one to play run so we'll make another transition here and this one we want to play in the case that again we are not jumping so is jumping is false and the speed is currently greater than point zero one again we want to make sure to go through both these transitions and said has exit time to false and the transition duration to zero and the same for the other one and now our animators should be set up of course we still need to make sure to control our is jumping parameter through our script and if we go into our movement script we can see that we currently get some input for whether or not we want to jump and of course we can go in here and set jumping to true so we'll go animator dot said full this time because it's a boolean parameter that we want to change the parameter is is jumping and here we want to set it to true however we actually don't have a way of knowing when we want to stop jumping because all we're doing here is really giving our player controller input there's no place in our code where we have anything about actually landing again to get around this I've gone ahead and added a bit of extra code to our character controller if we use the vector player and open up the character controller we can see that there's a section here called events and in here there's an on land event events basically allows us to trigger certain functionality when something occurs in this case this event will be triggered whenever our character lands on the ground and so we can use this to tell our player movement when to stop jumping to do that we need to go in and create a separate function for this we'll create a void we'll call it something like on landing will open and close some parentheses and the same with some curly brackets and in here all we want to do is tell our animator to stop jumping so we'll go animator that said Paul is jumping and we'll set it to false and this will work just fine but in order for our event to be able to see this function we need to market as public and this might look a bit strange to you normally people associate public with variables but we can actually make functions public as well if we now save this and go into unity we can add a new on land event so we'll hit the plus sign here and here we can feed in a component so we want the player movement component and then we can go and choose a particular function we'll go under the player movement script and in here we can now see our new on landing function if we select that and then play the game we should see that whenever we jump it plays our jump animation and as soon as we land it transitions right back super cool we also see that for some reason it only plays the first frame of our jump animation and the reason for that is that if we go into our animator and check the transition going to our jump and then go under settings it's currently set to can transition to self so what's currently happening is that whenever we're jumping it's actually just transitioning to jump over and over and over again and so it's stuck on the very first part of that animation if we remove that it will only transition to jump once and then play the jump animation and then as soon as it's done it will either go idling or running so if we play the game with that change we can see that our jump animation works perfectly and the final thing that we want to go in here and add is the Crouch animations let's drag this to this side up here and first we want to be able to crouch from ilink so we'll add a transition to crouch here let's select it and let's add a condition but first we need a new parameters so we'll go in here and create a boolean called is crouching and of course we want the condition to be that if crouching is true well then we want to start crouching again we want to remove exit time and duration and we'll also create a transition back this is if we are not crouching so if crouching is false and our speed is currently less than point zero one and remove exit time and the duration and I'm actually getting a warning here and this happens sometimes when you set the transition duration to zero it's pretty annoying and it will kind of span your console with this morning it doesn't really do anything to the code but I found a nice workaround which is to set the time a bit larger just before disabling it it won't do any difference whatsoever but it will make sure that we don't get this morning well then create a transition from the run animation of course the demand here is that is crouching is true again will remove exit time and duration and finally we want to be able to transition back in the case that we are no longer crouching and our speed is greater than point zero one and you'll use my tricks to bump up the exit time remove it and set the duration to zero and there we go that is it for animator controller finally let's set our is crouching parameter through on script and if we have a look at our play movement here we can see that we do indeed control our crouching through this however there is one slight problem with this and that is in here we're only telling the character controller whether or not we want to crouch however sometimes our controller won't actually listen to our demands because if our character decides to crouch under a platform and then chooses to stand up you won't be able to because there's a ceiling above him and so we of course don't want to play an animation where our character stands up that's gonna look super weird so just like jumping we actually want our Crouch animation to be controlled by a character controller and of course because of this I've gone in and added an event for that as well so if we go to our player and under the character controller 2d we can see there's also an on Crouch event and this is a tiny bit different from the on land event in that it's actually a boolean event which means that not only will this trigger a function when we start crouching it's also going to trigger this same function when we stop crouching and it's going to tell the function whether or not we started or stopped crouching using a boolean so to show you how this works that's going to all play a movement and let's create another function under our on landing again this is going to be a public void and we'll call it on crouching and this time we're going to take in a boolean variable as an argument we call this something like is crouching will also open and close some curly brackets and now this variable here is actually going to be controlled by our character controller so that if we are crouching this is going to be true and if we're not it's going to be false so we can simply go ahead and set our ball on the animators so animator dot set bowl and we want to set the is crouching parameter we can set that depending on our is crouching variable right here so we'll simply pass that in directly and now if we save that go into unity and add a new on crouch event again we want to drag in our play movement we want to go under our player movement script here and we see our on crouching function however we can also see our on crouching function at the top here on the dynamic Bowl and that's because if we select this one at the top it's going to automatically pass in the right boolean so let's select that and let's take our animator and dark it to the bottom here so we can see everything happening while we're playing we then hit play and now when we crouch we can see that we transition to the Crouch animation and we can also Crouch under this obstacle and if we try and stand up it's not gonna work so now we can jump and run around we can Iowa and we can Crouch and everything is going to work just fine it's always going to play the correct animation super cool let's pretty much it for this video if you enjoyed it make sure to subscribe and bring that notification bill so you don't miss the next one also exciting news we're moving into a new office and should be hard at work setting everything up once this video goes live this also means that we have to skip next week's video but we'll be back with new videos as soon as we get settle them and if you want to follow our progress and get behind-the-scenes updates I suggest following us on Twitter at breakfast 3 and that thanks watching and I will see you in the next video thanks of the awesome patreon supporters who donated in June and a special thanks to Michael Neely Clinton Penske WA NGO Kildonan Co cheetah 3d Alexandra Blaire Sybok mommy Jeff Paul sentence sullivan zimmerman the great faisal Merrifield derek Eames kirk thanks so long Lula sets Timnath hold up our patron a stringer James Rogers rock friend Gregory Pierce Nokia vaisakhi Larry tweed The Rasmus joins CAD Aubry see car Jackson Chris Wilczewski James P and Robert pond you guys Rock

Channel: Brackeys

Views: 1,540,201

Rating: 4.9376049 out of 5

Keywords: brackeys, unity, unity3d, beginner, easy, how, to, learn, course, series, tutorial, tutorials, game, development, develop, games, programming, coding, basic, basics, C#, animation, animate, animator, mecanim, mechanim, sprite, sheet, character, controller, player, state, machine, run, jump, idle, crouch

Id: hkaysu1Z-N8

Length: 21min 53sec (1313 seconds)

Published: Sun Aug 05 2018