Sprite Animation Tutorial -- Unity 2021

hello ladies and gentlemen it's mike here game from scratch and welcome to sprite tutorial weekend here on game from scratch what we're going to do today is show you step by step how you can use an animated sprite in the unity game engine now this was specifically requested of me in the recent humble bundle the fresh start game dev assets bundle there are a number of different background sprites uh character sprites and so on and someone asked me how do i use an animated tile sheet in the unity game entrance that's exactly what we're going to look at today if you're interested i will drop links to this bundle down below i did a hands-on video with it and the particular set of assets i'm going to use today are from the one dollar tier just this medieval townsfolk pack it's a collection of sprites of various different characters from a medieval setting but as you can see there is a ton more in this particular bundle a lot of its backgrounds and so on or special effects but what you're going to see can apply to just about any sprite sheet so if you head over to open game art and grab a sprite sheet you can follow along but if you're interested i will have links to this bundle down below and the particular one that we are looking at in this case is the medieval townsfolk so once you've got that you extract it out like so so it looks like this it's a collection of various different characters a number of sprite sheets for each one the one that i'm interested in is the blacksmith just because i picked it at random and you'll notice we have a number of different animations here so we're going to be looking at is the idle animation for example this guy right here and you'll notice you have a set of sprites so this is the front a set of idle animations left right and back so we're really only going to care about the front in this particular case and we're only going to care about two sets of animations you can take that information extrapolate it into something much much more complex obviously so what you're going to need to do is fire up the unity game engine now you can use any version of unity after about i think 2019.3 was the last version that changed the sprite behavior so it might tweak slightly i'm using uh 2020.2.4 f1 in this particular case and i'm in my assets folder and all i'm going to do is grab the sprite sheet i'm interested in so as i mentioned we're going to do an idle frame but we're also going to showcase how to do a knockout frame so one of these is knockout where did you go knock okay so ko right here so here is the other set it's basically just a fall down animation once again from four different directions and we will drop that guy in here as well also if you'll notice come down here you actually have uber sprite sheets so if you want to have a whole lot of animations you've got more complex ones available there as well i'm just going to go with these two again you can take the information i'm going to show you and use it much much more in depth if you wish so the first one we're going to do is grab that first sprite sheet we selected and since there are multiple sprites on it what we need to do is with it selected go over to the inspector and change the sprite mode when we want sprite mode it's set to multiple and then once we've selected multiple we're going to go into the sprite editor once we are there yeah go ahead and apply that there it is now there's a couple ways to go about doing this the first way so we're going to go in the slicing tool we can do an automatic what you're going to see is it goes down to the minimum size sprite now in some cases you may actually want to work this way but you can see what it's done is basically it's gone down to just the the smallest boundary of pixels so it's pulling in around the shadow and nothing else the problem with this is the width of these so you see the front facing is actually narrower than the side facing because there's less pixels to grab what you probably want to do instead is go to slice and you're going to switch from type of automatic to either size or count so size you can come in and say i want to do this by 128 by 128 pixels because i happen to know how big each grid is and then i can do a slice there or i could have also come in here and done my count in which case i have three columns and four rows and slice and you get the end same end result as you were doing it by the way you could do other things here in the sprite editor so you could set up physics outlines um and so on but really that's all we're going to focus on today that's all we got to do and once we've got it split up like what we want we're going to go ahead and just click apply so there we go we're good to go we can now treat this as 12 separate sprites essentially so when we come down here now and we look at that guy expand it out you'll see all of the individual sprites there and we're going to need to do that for this guy as well no explanation this exact same process so once again multiple sprite editor apply slice it keeps the column setting so we're good there slice that up apply and done all right so now we have two sets of animation to work from we are most of the way there so now the next thing we need to do is go ahead and actually create our animation so the first way we'll grab this first guy the idle frames and we're just going to go in here and control select the three frames that are the front-facing idle animations and we'll just drop that into our scene like so and what this will do since it's set in multiple animations it'll automatically make a default first animation for us and i'll call this guy idle named after eric okay there we go so we got uh eric here in scene let me actually change there eric that's a long way to go for a bad pun all right there we go so we got our guy in the scene we are good to go we can go ahead and play this the results are going to suck but we can play it so you see we have a very twitchy looking dude here what we're going to probably want to do is change the pace of that animation there's a couple ways we can do this the easiest way is basically we can come in here and change the number of samples so let's change the samples down to three if you do not see that i believe you can configure it to show here so you can show sample rate on and off click this guy on change samples down to three and then we are good to go so now if we go ahead and play this our animation is basically three frames per second we got our three frames in there it looks good you can tweak around with it until you've got it to do what you want so now what we've got is our second animation how are we gonna work with that so here's our set of idols from one direction well here is our fall down animation same process basically click the first guy control click the next frames all of the frames in your animation sequence that you want and pop them into the scene and now what this is going to do is create a next animation we'll call this one fall all right so we now have idle and fall as you can see right there and we can go ahead and uh grab eric number two and delete him from the scene so now we have this guy right here with our fall animation we also created a controller for us we can click that guy and you will see right here this is the animation controller there all we're going to do in this case is change our animation slightly so we've got entry idle you can go in here you can create basically animation states way beyond what i'm going to do here all i'm going to do is chain it from one animation to the next animation so basically it's going to start idle is going to play and then we're going to switch over to false so i'm going to drop in my fall animation as another node we'll grab this guy right here make a transition and drop it to fall and that's it that's all you need to do so you can see here you can preview the animation over here oh there's no model that's weird all right so our animation should be defined we're good to go let us go back to our scene and play oh so what you're noticing there is our second animation is uh what's the word uh fast so we come in here once again to oh that's that's idle right here we go into fall and we'll set that to three frames as well so what will happen is our idle animation will play and then our fall animation will play and again it's all being controlled by the controller here here you can go ahead and add a whole bunch more so you could do various different states you could do a blend tree to blend from one animation to the other animation this is where your code would hook up you can set parameters and such we could have multiple layers if you wish you can create new layers of animation but all i'm showing you is a very basic animation state tree here and we go back over here and press play and now you will see we go through our idle and then we fall there we go so you'll notice here oh and i also didn't so if i go back to that animation controller here you'll notice over here we have an exit so our animation is going to the fall state and then failing again what i could actually do is bring this guy so i could go make transition and i could go back and what this will cause is basically an ongoing loop of our animation so uh let's go ahead and play our game and now what you'll see is he's gonna fall down and then get right back up fall down i'm gonna get right back up again there you see all right so there's how you could control it or if you just wanted to have it kind of a one and done uh we could have done the same thing but instead of looping back like what we did here we could delete that guy and we could go here make a transition and we could drag that transition over to our exit node over there that's it uh very basic animations in uh the unity game engine as you can see bringing in multiple sprite sheet sprites is quite simple basically just create bring them in turn them into sprite sheets drag the sprites you want that will create an animation repeat that for all the various different sprite sheets you've got and then you can create these controllers here that kind of transition between the different things and then ultimately you would put some code in here so if you don't you press left then you switch from idle to the other animation state and you control that all here but we're going to stay pretty basic and that's going to just showcase how to bring in animations and set them up you're also going to notice over here uh you can add in and have multiple different animations here so i could set things up over here and we could grab uh one of our guys and we could actually keyframe uh scaling and rotation and all those things so we could go over here and then create new keyframes move him around so you notice as i just changed the position it created a keyframe for it and then we can advance the timeline forward so we can move to the next frame or as we move through the frame so you can basically keep um moving him have it automatically create keys and then you see so you can animate other properties as well so if you want to have a walking left to right or whatever and you want to have movement in there you can do that by setting up these keyframes across the timeline you've also even got control over how they blend in between with the use of curves but that's about the extent of what i'm going to cover today so that is it that is 2d sprite animation in the unity game engine you saw like the basics but everything you saw here you could bring it in you could apply it to multiple different directions you could create more advanced uh controlled state trees for controlling your animation controller and all of the basics were covered today so hopefully you found that useful and you're enjoying spray tutorial weekend here on game from scratch so let me know if you have any other tutorial requests and that's it see you all later goodbye

Channel: Gamefromscratch

Views: 12,902

Rating: 4.8613863 out of 5

Keywords: Unity, Unity3D, 2020, 2021, Animation, Tutorial, Animator, Sprite, Spritesheet, GameDev, Game Development, Game Engine, Unity Tutorial, Sprites, Unity Engine

Id: uXGCKw92qZE

Length: 9min 57sec (597 seconds)

Published: Sat Feb 20 2021