2D Animation (Unity Tutorial)!

I didn't see you there hey guys my name is Thomas brushing the creator of a game called pinstripe I'm also working on a game called once upon a coma now I've been making games for almost 10 years now I do it full-time it's a full-time job and one of my specialties is 2d character art and 2d animation now the principles we're gonna cover in this video will work with both spine 2d and honestly unities proprietary animation system so let's go ahead and get started alright guys so we've got a character already drawn and ready to go inside a Photoshop now first before we export and start animating each one of these individual sprites what I want to tell you is a good character for your game has three principles that it follows first it looks really good when it's small and big so a lot of times you'll focus on the detail of your character but you won't actually realize that when it's small those details can conflict and cause some strange looks at a small size you also want to make sure your character looks great as a silhouette so if we actually create a silhouetted version of my character he should actually make sense that way this is just a simple principle an abstract principle that allows us to recognize our character even if he's a silhouetted simple shape and so what makes this character recognizable is his hair is sticking out right here and there's a nice shape for Pete so the final principle really quick is you want to make sure there's a good contrast between your character and the background so you can see we've got this bright orange sweater and pale pink face and that causes a nice contrast between the background and the character even at a small size so now let's go ahead and export each one of these layers as a PNG into a folder now we can do this really quickly using a script called Photoshop layers - PNG and this is actually included in the description of this video once you've got it installed all you got to do is click it name the folder and then click OK so what this doing is it's going to export each one of our layers all of these different layers so the chests here the head here eyes the hair every individual item that we're gonna be animating and it also creates a JSON file and that file it can be imported into spine and what it's gonna do is it's going to construct our character inside of spine just like we saw it in Photoshop so let's go ahead and click import data find adjacent file click OK and we'll save our changes just to be sure and as you can see spine has generated the entire Photoshop file with all of our different sprites all of our images and what we're gonna do is actually just get rid of this background reference image we don't really need it and we're going to drag all of our sprites to the origin here and then put him sort of flat along the horizontal that's where I like to put my characters so he's at zero position right here now let's click on our root and the first thing we're gonna do here is starting from the root we're actually gonna create a bone called body so let's just name this really quick so we know what it is once we've selected the initial bone called body we can actually start laying out the skeletal structure of Pete so don't really think of it as a skeleton per se like the fully anatomically correct skeleton rather think about how your sprites are gonna be interacting with the skeleton so I know I want to do a chest skeleton and once that's selected I can actually just select again it'll create a child element so the arm will be connected to the body and now we can create another arm which will be connected to the bicep and the hand will be connected to arm so as you can see they're being created as children so once we've done the arm we want to actually go back and select the original chest bone here and do the same thing here and then again I want to do the same thing for the head and the hair is connected to the head but be careful you want this hair to be connected to the head so it's a head and then draw that one so here's his head and also we want to make sure we create bones for the eyes again we're not anatomically correct here because bones eyes don't have bones right I'm not I'm pretty sure I'm pretty sure I just don't have bones so now that we've got that drawn out we can actually just click on the chest here and draw out the bones for his legs be careful though again click on chest and then do this as well so as you can see we've created children for all the different root bones and finally attached to the chest is going to be his bat now be cognitive or is it cognizant what's the word whatever be cognitive of where your fulcrum is and that's the point at which things rotate so for this bat it's connected to this strap here so the fulcrum is going to be right there all right now that we've got all the bones laid out we'll just name the bones oh boy oh boy oh boy looks like we've got everything laid out then that feel good now we can actually move our character around this is always a really fun thing to do so look how cool Pete is he thinks he's so awesome and so we can move everything around so just double check make sure everything is animated properly or rigged up properly looks good looks good I see mistakes like this are important to find we're actually not supposed to be able to move the entire thing it should just move his right calf so let's figure out what's going on looks like a thigh is in the wrong spot so now everything is parented correctly here so let's go ahead and create a stand animation so let's call this stand let's click on this and we'll switch us to our animation section of spine now let's go ahead and I'm gonna show you how I create stand animations you can obviously do this different depending on what kind of game you're creating but for me I want Pete to feel like he's swaying and then there's significant motion when he's standing still so what I can do here is just rotate to the left and that's gonna create a keyframe and let's choose a number maybe 15 so we're gonna go to our 15th keyframe and rotate to the right and then we're gonna copy this beginning one here and paste it towards the end so now Pete looks terrible and he's animating left to right trust me it's gonna look good so let's keep going so what we want to do here is actually move the legs so that they're stuck to the ground the way that I like to do this and the only way that I've really figured out how to make this work is actually just rotate our legs so that they're always at the same position at the bottom so it looks like we're gonna be four little squares over right there to the left of the bottom left corner of that square now what we'll do is click on our 15 so far so good yeah just like so maybe bring it down a little bit be sure we can't rank there we go let's just see the same for the favor here so begin state let me show the begin state definition copy and pasted xxx oops same thing with right right here so he's gonna be directly to the right bottom right corner about Foursquare there are 15 keyframe to share it with anybody not right a little bit because he's gonna be good happy from here as well yeah if I straighten out this light a little bit more there we go if I was straight mentally so you can have a cool little faint careless so the great but just trust me but keep moving I'm gonna have some smoothing you can offset to make things get heavy and waited so it started to get here everything even emails their last right you can follow these principles with a lot of your very few missions and so everything will be moved to whack his hold on your swing to the left right you can't they're pretty bad ready to send my point awesome everything to the left and on the fifteenth keyframe and ever he's flavor to the right so with everything to the right so back now I'm gonna add anything with a life is there finished stuck around the right he's gonna be throwing a lot and understand you get my point basket all right so what's all that I need we actually just go ahead and copy all the first frames and paste another three and then we could go an app that yeah I hear you swing like a crazy man and we will smooth those out using this curve button here to smooth out everything so that evening between it starts not for this well increases quickly and in either's Mary's well can I see frame so here's keeping weird now looks strange right like why is he doing well but if I was simple principle that you can hear on all donations and that is diffic offsetting I'm bones and their movement as they defame the ballot joint so for example behind is the furthest thing away from his chest or the connection Cuba chest so we can use this offset tool here and offset all the way over can maybe be a letter T 3 let's do the same with his hand maybe go to the Cape now as I don't up yarn it will be less and less and less and maybe 7 and talk about this I don't even give her the reference point right here you set into the sixth or see the seventh one for this one that's apron then as we go up your mystical essence so we're heading off that journey pretty close here look maybe we should translate for this one do something like this let's see here there we go Pete's arms are slowly starting to drag behind the body making them feel a little bit more limp a little bit more heavy now let's do the same for his head here make it feel like a really heavy head so we can actually offset it to maybe 7 let's see how that looks looking good Pete all right and his head or his hair we can offset a lot because those are the last thing connected to the chest now that piece should probably be moving yep we want it to be a little bit different than the other piece of hair that is how you could create simple stand animation and you can apply those principles to honestly everything you're creating from jump animations to running animations to attacking animations giving a lot of weight to your player all right let's jump forward in time and we've actually got all of our animations created we've got an attack animation so let me show you that attack animations we've got attacking down attacking up we've got dancing because everybody needs a dance animation because Fortnight equip skateboard fear he's scared flippin animation Pete is really weird isn't he and as you can see we've also got events there were simple strings that are being fired and they get sent to unity and you could tell unity to listen for a string so for example unity is gonna listen for the string footstep and then you could fire certain sound effects or particle emissions at the feet to make the game feel more alive so we've got all these cool different advanced footstep jumping jump trail landing play sound all sorts of good stuff and those events can be fired inside our timeline right here let's go backwards in time though because all we're gonna worry about is our run in our stand animations to make this simple for you so let's go ahead and export all of our animations and our sprites and export them for unity let's make sure we export to the right folder and so we're gonna make sure we're in our animation folder and this gonna hold all of Pete's animation so let's be sure that we're there let's also make sure by default a lot of times what will happen in spine is it'll default to an extension of dot Jason you want to make sure it's dot jason dot txt so the uni-kit unity can actually read it all so you want to make sure you're clicking pack here to make sure that it's packing your sprite and creating an atlas so that unity can pick apart the various sprites looks like everything is good here you might need to go into packs settings and make sure everything is cleaned up in here but for now looks like everything is good and by default it'll probably be okay and then just go ahead and click export all right so we've opened up unity here and everything is showing up in our project folder with all of our files that were exported including the JSON file and the atlas file now you're gonna need to import spines runtime api inside of unity and I've already done that because I'm smarter than you but there's actually a link in the description all you got to do is click that link head on over to the spine runtime URL and just download the runtime and click on it and it will import inside of unity so now that we're in unity we can actually create a very beginning run down to spine where are you there you are spine skeleton data asset we're that's the first thing we're gonna create and it's gonna be called peat spine I repeat skeleton data now it's gonna be looking for that JSON file but you're gonna need to tell it where it is so we can drag it here and it's also going to be looking for an atlas so be sure your Atlas is set to one and we don't have an atlas file here so we can actually just create spine atlas so we're creating a skeleton data and we're also creating an Atlas file we can call this peat atlas and obviously set the size to 1 now it also did not actually it did create a material that's good usually sometimes it doesn't create a material so you might need to create a material and set it to spine skeleton but we've already got one so let's go excuse me let's go ahead and drag our let's click on our atlas and go ahead and drag our material there looks like we've got everything set up there and you want to make sure that your actual atlas file here is not set to generate MIT Maps otherwise your character is gonna look blurry so everything looks good here we want to make sure that we're bringing our atlas file into our skeleton data there we go looks like everything is good crap looks like our P atlas does not have our atlas file txt file so go ahead and drag in don't be an idiot like me drag in your text file to your atlas boom there we go everything's clean now let's go ahead and bring P into the scene so what you're going to want to do is create a game object go down to your spine and then click on skeleton animations be sure that it's named appropriately here so we're gonna call it a / / / / / / appropriately named it Pete what we could use is the skeleton animation component here that's fine but this is a little difficult if you don't want to write a lot of code because if you're enabled in order to use this you actually have to tell unity when to fire certain animations with code so let's actually remove this component and just create a skeleton Meccan 'm component instead this one will allow us to use the Meccan 'm animator or also known as the animator state machine inside of unity so that we can tell the an of which animations to play based on certain boolean x' so let's go ahead drag our Pete skeleton data here look he's pink and also we're gonna need to create a runtime animator so just go to animator controller we're going to call this Pete animator controller and finally what we want to do is drag inside of our skeleton data we want to tell the skeleton data which animator we're going to be using so drag that there and then honestly let's hit play first just so this pink can get out of the way there we go and go back to our skeleton data just click force update animation clips and now you'll see we've got our two animations inside of our P animator controller but P is actually not gonna do anything yet we need to actually go to our animators so that's in window animation animator and what we could do is actually be sure that the runtime animation runtime animator is inside of our animator component so drag that to controller it's right there so right now we're looking at that Peet animator controller let's be sure we drag in stand and then also run and we're going to set everything to look clean here and we're gonna be sure that when you double click on stand it's set to loop double click on run it's set to loop and it's the default so right away when we hit play that stand animation will play but we what we also want to do here is we actually want to create some parameters so first let's create a boolean called running not run run would be a trigger we're gonna call it running and it's going to be a boolean so that when it's set to true Pete will always be running when it's set to false it goes back to stand now we right-click on this and create a transition and we tell that transition select the transition and we tell it a condition of running equals true is what's going to cause it to run now make another transition back which will tell it to stop running and go back to stand if it's set to false so now we can hit play let's actually save it just to be sure hit play and let's go ahead and set our camera to perspective and we should probably move it up and decrease that field of view so there is Pete let's copy these so we can paste them in later there's Pete standing like a weirdo we can hit run and look there he goes and back to stand so obviously as you're building out your animations you can imagine your your state machine is gonna get quite complex with maybe ten or fifteen different animation states with all these different transitions bullying's for running jumping shooting hitting dying all sorts of cool states for your character so one piece of advice here is just to be sure you keep things clean make sure everything is laid out in almost a beautiful pattern so you can better visualize your state machine in the various animations and how they behave so I'm gonna show you in the end what your character can look like in your game what unity can really do and what spine can really do and make your game shine I'm in the future so here we are this is what your character can look like if you pay attention to the detail of character really fine-tune every little animation it really is a guess and check type of process but overall this is what we've got here we got a running animation we've got a standing animation attack animation where you can hit things with your baseball bat jumping animation landing animation and both these animations actually utilize adding another track on top of the jump animation and that's a bouncing animation so it causes Pete to feel much more bouncy and much heavier so we can run and you can see that events are firing particles to emit they're firing sound effects running footsteps sound effects so the list goes on and on with the things you can add to your spine animations to make everything feel much more alive so that's really all it takes to get your spine animations into unity did you just hear my stomach growl that was amazing I'm so hungry so that's all it really takes to get your spine animation into unity and get your character looking alive and make your player feel like they're part of that world again my name is Thomas brush I create indie games for a living I love what I do if you like this channel hit subscribe and also hit the bell to notify youth of when I'm uploading a video or I like to livestream daily as I create my games also another thing you can do is head on over to patreon and support for 5 dollars a month or more and you can get your name in the credits of these videos and also during the livestream now if you're into indie game development and you want to get coached by somebody maybe as smart as me I can coach you and I can motivate you and help you learn game development and start your indie game career on the right foot so if that's something you're interested in head on over to patreon take a look at the coaching tier and let me know if that's something you're interested in thanks again guys see ya

Channel: Thomas Brush

Views: 185,080

Keywords: Atmos Games, Unity, Unity3D, beginner, easy, how, to, learn, course, tutorial, tutorials, basic, coding, programming, basics, animator, mecanim, mechanim, spine, spine 2d, skeleton, bone, machine, state, player, run, jump, character, controller, esoteric, how to, indie game, game development, game creation, start making games, make games

Id: j0MGh4MVbGc

Length: 20min 27sec (1227 seconds)

Published: Tue Jan 08 2019