My Secret To 2D Game Character Animation

hey guys I want to show you my workflow that I have for spine and Photoshop so right now I've got this beautiful bird and she is in a game called what's my coma and I've got her all layered out [Music] let's see here yeah so she's just got all these different layers here I should by rasterized the glow there so everything's layered out here and all I got to do is go into scripts Photoshop two layers and actually you know what it's making 100% PNG scale I guess I don't need to explain that I assume you understand what that means and once this exports we will enter spine spine whoa say okay so sometimes things don't work the weight side okay so let's start a new file discard changes and now let's import that new data because I think the old data was referencing you know what I'm trying to say right okay okay three place over right all right this is a massive Berk with massive massive massive wings so we got this background here that we wanted a leak I don't like hear about it okay so what I like to do first up is just Center up everything to this origin here I don't know why they think it's cool to put it right there okay so then after that I just go and I start dragging my bones so we want to start or I wants like let's move it up a little whoops so we want to start at the root so you select the root and we want to have a body we want to have a chicken breasts here that we want to have the wings we want to look at notice how I'm always selecting where they're connecting to you go back and you select because if I had selected that and then drawn the boobs and then drawn the wings the wings would have very connected to the boobs and that's not anatomically correct so go back grab the spine here whoopsie like that do we create the neck another neck well I think it actually starts right there neck and and then we also have a eye here and then we're also going to have this knot [Music] excuse me I'm burping okay go back to our spine not the software that the actual spine this is the bone is fine and then I have legs so I think what I want to do is just do a fly animation really quick before we can actually start animating there to finish up these bones and then we have to connect all the bones with sprites okay so the way I do that is I personname all my bones because it makes it a lot easier so this is breast right all right so let's do the flying animation first so let's call this fly so first what I want to do is I want to have her sort of float a little bit now my developer his name is Eric Coburn he'll probably develop it the flying sort of the sine wave kind of flying like that but I'm gonna do it in here first give me an idea of what I want it to look like so I'm gonna teach you guys a trick that I learned and I'm a billion times more efficient because of it you start with the root like that let's make it thirty always have a set number in mind of maximum frames because [Music] you want to use those frames for every single piece of the body to make sure it loops properly so we got that now I think that these curves here aren't smooth enough or at least cartoony enough so I always drag them over about half way what this does is this change is the smoothing see how much bounce here that is so we're not gonna worry about the wings right okay all we're gonna worry about is that motion that her neck in her head and her feet will feel so let's pretend that on the down things swing left and on the up things swing right just use that logic down is left so what happens when you move to the left things swing left like so and I understand that she's not actually moving left but we have to choose a direction okay down up is right this will all make sense in time I promise cool yeah good okay so now let's go back to the root and then copy all of those legs I'm sorry not root what I'm trying to say is let's just reveal all of the key frames revealed the paste and this is the root is that Oh like seven paste there okay so the legs again I just don't like how they they still feel a little rigid so let's smooth them out and then drag a little bit over like so very good so you're getting the idea right but that doesn't look realistic does it well we'll fix it in just a sec well let's let's focus on these mighty chicken breasts left left right right I feel awkward doing this I think that looks good to me and then you make them or cartoony like so very nice right okay now we'll go to the neck here her neck goes left left and her head I'll go left I can't grab it woman there it is left and then right now just trust me it's gonna look awesome a promise right now it looks really awkward okay it's not left right copy this not left let's make that smooth let me also have to make her neck in her head smooth so let's grab all those and copy and paste smooth out drag it over a little bit look at that those moves so right now it looks like she's dancing we don't want that right so watch this uh let's let's add some stretching too so really quick let's stretch down down up up wonder if YouTube would take this video down cuz I'm showing breasts but it's a chicken breast so I don't fully know why that would be a problem but we'll see stretch out those make it more cartoony good if you have to ask if some of you are asking what am i doing up here this is my smoothing breath it just tells how what's the velocity and the speed starts out really slow and this is just the transition between the two keyframes smooth very nice okay let's make a breathing as well does that sound like fun it sounds like fun to me breathing is a fun activity with fun motions that 1.04 is good for me okay smooth that out pachow good yeah okay feel like our head doesn't move enough so let's do this far left that should be good enough yeah okay now here's where the fun happens okay this is where the trick is that I want to show you what save it first start with the root and then go to the next item what's what after the the body let's just consider the body the root of this conversation that's the root what's next the breasts okay so we go to the left breast and what we do is we use offset just drag it over just a bit and we could do the scale a little bit more over here what's that's happening is it's it's shifting the movement the right breast we could do a little bit more like that maybe that you need to consider how many times are gonna do this we're gonna go all the way through every single bone so leave yourself enough room of shifting so that one a little bit a little bit more and then we go to the next thing which is the neck right so we shift that a little bit more neck - we should shift a little bit more the head goes the head we shift even more it's not we're gonna shift all the way there so now let's take a look very nice I think the neck here needs to be shifted a lot more like that and then the head shifted a lot that very nice see how the scale is like when you shift the scale of each one of these it's sort of much makes it feel much more random than okay the problem is the legs here this is gonna be fun so let's shift that one and these can be random random shift you don't want them to feel like they're in sync you want them to feel like they're Backstreet Boys very nice right I think it's great really bouncy okay now the flapping it's as simple as this when she's down wait hold on when she's up it's down because it's pushing up right we're planning to scale it over a little to that rotate that down hmm right that actually looks pretty good up it's like this up just like that good and on the way up it'll change sprites I'll show you in just a second those of you who are geniuses those of you who understand the meaning of life know what's about to happen it's actually sorry we could just copy and paste your now with the wings we can make a much more exaggerated the smoothing translate pop there and then paste that so we can make a much more exaggerated like this you want to be chilled shoot shoot shoot shoot shoot good and then the same is true for this let's do that real quick and there's no translate keyframes there so we're good make that more exaggerated so it's slow fast and then it slows down it's easing it's how the world works okay so that feels a little awkward done it's not it's not fully real so on the way down it's going to be these I'm sorry these on the way up wait on the way down I think it should just flip at the fastest point that kind of looks good doesn't it you know what's cool about flipping axises when you flip a y-axis like this you can do a scale effect that sort of removes how bad it looks let's just try it you do like us that and then that and then that so it's sort of like it got a bounce effect yeah see that told you okay I'm impressed with myself to be honest okay I'm impressed scale down shrink up and then back down - one okay so the reason you do that is it's almost like if I have my hand like this and I do that it's got a bounce effect to it in real life there's a little bit of a balance it goes and the same as we're doing that same sort of trickery with the scale of the wing so when it flips like this right here the flip is right there you scale down [Music] shrink scale back up then scale back to one okay excuse me same is here up whoops back to one I wonder what it would look like if I doubled the wind speed I think that kind of looks good you guys what do you think all right that's the animation folks my name is Thomas brush and the creator of a game called once upon a coma thank you so much for watching and putting up with this interesting boss animation if you learned something please comment below and let me know what you've learned or if you have any questions I'd love to hear them hit subscribe hit the like button or whatever and I will be grateful to you thank you so much peace out

Channel: Thomas Brush

Views: 59,221

Keywords: Unity, Animation, 2D, Spine, Esoteric, Spine 2D, Character, Rig, Model, Tutorial, How To, Indie, Game, Developer, Steam, Nintendo, Switch, Thomas, Brush, Atmos, Games, Pinstripe, Once, Upon, Coma

Id: HSujXuinSqY

Length: 17min 3sec (1023 seconds)

Published: Fri Jul 27 2018