Pixel Art Class - Run Animation Tutorial [Part 1] | First Pass

hey welcome to this little series on animating a character for a pixel art game you can think of this as the sequel to the previous intro series on designing a character though this brat was created for a different project it picks up right where we left off so I thought it would be a good fit I'm going to show you the whole process of a run and an idle animation from start to finish as I think they're the most in-demand all right you ready let's go [Music] now this is the character she is she is a an adventurer she has a gun gun Ventura that's who she is you could think of her as she could be sci-fi she could be Renaissance you could put her in a bunch of different spaces I think she'd work this started out as a commission for smokey avocado smoky avocado is one of the violets here in chat and he has a team and they work on an app that lets you make games and they originally commissioned me to design a character for that game making app so like a stock character you could use in your games basically I'm just going to take this lady make a new file and I think we want to go instead 32 by 32 man that is not a lot of space to play in let's go back to 64 and I'll just make it like a nice bounding box so that I know where to stay within okay I'll use this episode as a kind of almost a tutorial for you guys I'll let's blame what I'm doing as I'm doing it in a very literal granular way so that you guys get some certain value out of it now as far as the character goes I think this is a pretty decent Idol I like the pose I think it's a strong one there's maybe a little bit of work we could do just say yeah I think it's kind of a bit odd okay so I think this is a kind of cool second idle pose you take a little and then let's let's try like a run one two three four five six let's go for eight I usually do go for hate just because it's why not it's more fun to do eight frames right I'm gonna onion skin this so I know where the proportions are I'm gonna follow my own tutorial here now how should this one be and the first the first like thing that you do doesn't super matter that much to be honest what matters is what you do after that so like this is not gonna make much sense look at that that's that's silly and actually we want this to be double two steps not one so let's come back to the beginning and make sure that this one and this one are the same and then this one's gonna be like one down down they're like up maybe beyond okay so that's a bit closer and actually instead of it being down on down for two frames I'm gonna actually shift this to be like up so it's up for two frames that's better let's feel more like a run tuck tuck tuck tuck tuck tuck so here's our head the way I animate the thing you should animate first it's the most dynamic thing and then sort of let the like fill in the dependencies after that so as far as like the head goes like their head Bob's up and down and the chest sort of the head and the chest it just off set and timing so like if I was to do it now putting the chest in the timing would be correct but the position might not be same with the head right now so you sort of have to sort of converge on the actual animation as you put in the limbs you just want to like lay it all down in low fidelity and then gradually increase the fidelity so let's like for example we'll just do like the back hand right now the back hand is remember we have like two steps here so it's like one two right so it's like gonna be forward back I'm just gonna like draw in the hand right [Music] okay generally correct in terms of the timing and stuff it looks a little silly right because we have no real concept of like where it should be because we don't have a body yet so we can sort of in we can like guess so like this I definitely wants to be further down and then to lift up right and then on this frame I wanted to open out a little bit and then maybe come down a little more and then this doesn't have to be quite so far forward same this this is the backhand remember also it could all event be brought down a few pixels so notice what I did there I grabbed every frame on this layer and dragged it all together at once now this frame here we wanted to drag again so like the arm doesn't rotate until it has to there we go it's that a little better I also want to have a bit of a smear here so I know that I'm going from here to here in one frame so we can actually drag this one out we can do the same thing here this frame you know we know we're gonna be smearing between this point and this point so we can draw between them that's starting to look pretty good huh if not anatomically correct definitely the motion feels it feels smooth right which is which is good do you really need smears at this stage smears tend to be tools that I use early and tend to erase as I go further run in the detail smears are a good way of describing animation and so at this stage smears are like a tool to help me understand the animation rather than an additional flourish at the end you can use them as like a flourish at the end but I'm using them here to help me understand the animation of it better and I'll probably take the route consider at this stage everything that we've done is very low fidelity right there's no real cost to doing any anything at this level [Music] [Music] and I think we can remove the head a little bit further forward all right let's try the other hand I think I need to just see it a bit better and the beauty of of doing hands is you just swap you just swap them so when this hand is back this hand is forward and actually what I think I want to do is give this some 3d some perspective so the Han will actually be closer to the camera rather than out Mega Man style you know so we'll start bringing it down and then it's back and then it's back here [Music] tired to show what this is doing that man it's hard to see for some reason what I'm doing no way here we go so we get some legs in here so already we have something that looks like a run and we didn't really spend much time on this we just did some whatever so the easy thing about runs is that when this arm is back this is the front arm the back leg is also back right and when this which is the back arm is in front the front leg is also in front so that timing should be pretty simple so here we see the heads down this is the lowest point to head reaches it's either when we make contact or when we push through in fact let's make it when we push through so like here that's the lowest point that the leg is going to be on as we pass through because the next thing we do is bounce I think my let my hands are offset incorrectly yeah they are definitely okay time to fix that it'll be it'll be pretty quick so what I want to do is move them forward two frames both of the hands one two one two and then grab these frames and put them back like that hopefully that makes a bit more sense ah that's so much better yeah so that they swing on the down right that's what I'm trying to do here and then returns down as the knee pushes through come up get ready and then we fall pretty good now I think I've got these knees a little tall and that's gonna stifle me a little so I'm gonna bring them shave them down a little bit because what's actually gonna happen is on this frame I want it to be a little more straight and on this frame I actually want it to go out in front a little bit I think that'll be more cartoony to have the legs sort of extend forward [Music] [Music] pretty good I I do want it to have a bit more snap to it but so far so good maybe this could be a little more for it as well and this one maybe could be a little further back it's really the distance between the frames that will sell that cool looks so alive looks really good let's just duplicate this for the back leg all right should be easy enough and then put that behind the back hand offset it by 4 frames so take these four frames Boop put them in front guide them all again rook yank them all back so I took the first four put them in front then took all of it and pulled it back right and what that does is basically keep offsets the whole animation by half and I'm gonna give it a different color now so we can actually tell the difference for this blue and look at that magic that's a second leg now here's a problem the crossover point is here I don't like that not really where it should be it's too far back so maybe this thing can come forward a bit and then on the crossover this they can also come forward if I'm standing still right generally speaking if feet have to stand such that the center of your mass is between the feet right otherwise you're gonna be balanced or wrong right if you lean forward right you need some way to sort of like oh like offset bat right because your head and your torso are now leaning forward so even though this is where your pelvis is the center of mass is further forward right and so similar thing when you're running right if you're running when your legs crossover they should cross at a point that makes sense for like the center of mass because if they crust like back here this person's gonna fall over you know what I mean it just doesn't work that way that doesn't work that both legs are too far back they have to be balanced right they have to be like basically be on opposite sides of the body and equidistant from the center relative to each other at all times so you can see here that's why that trick works so well the flippin trick because now when this isn't at its farthest back point this is at its furthest forward point right look at them they're both basically even as far as their distance from this average kind of center of mass point here center of gravity and also so other arms to to a lesser extent but you know still valid so I think we've done like a really good job so far I think this is feeling like gonna a run animation I can see it you know I can see the character here now before we do anything else it's really a question of like is this the character like is this what we want right is that character hero are they Khaled are they running with purpose or they running away from something every step you take beyond at this point if this is wrong you're gonna have to undo all of that to fix it all right so if I start shading the face or whatever and the face is in the wrong spot well suddenly we've got to start mucking around at pictures is that so now is the time to make the judgment call so this is pretty like loose the arms are pretty like lanky I think think [Music] make this a little less further forward like I said swinging the legs really far forward in front of the body is very cartoony it's very like Woody from Toy Story so like this if we bring it back up and then straighten it out a little bit we'll make it look a little more athletic right a little less fun and games and then looking at like the hands the hands kind of look like they're closed fists right and right now they're quite like so they're swinging quite loose and low if you want them to be more like like aggressive and like like a sprinter you would have them be like a little more like a little less like low hang on let me see if I can show you guys so like running like this versus running like this right just bent at the elbows says you know it's a little more tension in it whereas like having them swing is a little more like playful so there are bent you can see the bend here like imagining the forearm is yeah that's quite a strong Bend you know that's still kind of like 90 degrees this is a little more open that is pretty open if you look at this frame it's pretty like daughterly right so we could close this arm a little bit and we could bring this in [Music] right here's a little stronger [Music] we could even bring this up higher up [Music] Hills fills more no-nonsense now right as it should do otherwise I don't know what I'm doing and if you just watch like this is one of those things it just comes down to being observant when you watch anime or TV or movies or whatever you can see how in animation we communicate different kinds of runs which isn't sometimes a little bit different to how people actually run so like it's one thing if you're just starting out to look at say sprinters right like in the Olympics like that's one thing but sprinters in the Olympics aren't most people so generally speaking they're running in a way that is very efficiency based and not actually for like storytelling right when people run in the Olympics and so when you watch someone running like a movie keep in mind like that's an actor running that's not a sprinter in the way an actor runs might be a little bit different maybe it's less efficient but looks more dramatic and so when you're animating like a character it's the same sort of thing you have to make that choice like what is what am i trying to communicate with my run and what is the like what is the storytelling playbook what does the PlayBook say on like how I should animate this kind of run for this kind of character that's what I turn the references the other thing with with animation is that it's all just mechanics anyway here right so you can kind of just like play out the physics if you can and it works that way too there we go all right let's do the upper limbs I think I can get away with this on the same layout [Music] [Music] look at that that's feeling good [Music] generally I have like a color scheme system when I do my lemon so you probably noticed it by now I have like the different shades of a color for the upper or lower parts of a body limb like a limp and then I try to keep the each limb as different as possible from each other and this is just a reference for me to help visualize the pose a little better I got the legs wrong they're offset the wrong way the same leg is moving with the same own so take the legs [Music] the legs and chip the void and take you can you back now we should be a [Music] okay let's put a shoulder in here now you start to see some inconsistencies when you start to join everything back up together so like here it's like this arm looking a little odd at that like level this is fine but we really stretched the upper arm on that last one [Music] that's not so bad but it's just not quite right is it I think this one could be a little more down oh man that's looking sick that's probably one of the best running animation I've done ever in time with the music there's still a lot of cleanup to be done it's not it's not perfect [Music] I don't think I've really got her form yet and to do that correctly I think what I'm gonna have to do is take this bring her out and then put her a bigger capacity so I can really see what we're working with here so definitely shrink the arms down and the shoulders and then thin out that torso got to give it that arch back and the booty subtle changes make such a big difference suddenly it's a woman so see how I I've taken away this smears remember I was talking about that it wasn't even on purpose they just sort of they just eroded away are you gonna make the plates on her legs flap yeah depth sure it looks like a bit of deceleration here I don't know if it's just me I [Music] think this frame is kind of awkward I don't like it what is that I try to not have any bad frames even if the motion is correct so this is another thing to understand sometimes the motion can be correct but the frame just looks bad right it's like it's like having realistic lighting but a bad photo right you can take a bad photo with realistic lighting so the same way you could have a really cool animation that all the frames can be wrong just like not photogenic like that one it's just not photogenic if you saw someone doing this you wouldn't think they were running and it's not a big deal it's more just in the case of like if you're making a video game and the game pauses on this frame it's like the awkward see like it didn't really change it all there but I sort of just made this look you know a little less awkward I also want like a little more lift with these knees I don't really like how flat they are looking good hey pal thanks for watching and thanks most especially to the patrons and twitch subs who support this channel in my game dev project insignia to find out more click the links in the description below and if you liked this video tell youtube by clicking the like button and then YouTube will tell me and then I'll make more videos that's nice

Channel: AdamCYounis

Views: 169,482

Keywords: game development, pixel art, game dev, game, video game, indie games, stream, animation, tutorial

Id: LPBvrdJ_1a8

Length: 28min 45sec (1725 seconds)

Published: Sun Mar 29 2020