Pixel Art Run Animation Tutorial - Rough Pass [ Stream Highlight ]

right there it says I'm trying to animate a character sprinting I want to make this print to have only three to five keyframes can you help oh can I can I help come on when you say three to five keyframes I don't quite know what you mean by that so I'm just gonna I'm just gonna tell you that the minimum amount of frames that you need is probably eight to do a good spread I've seen it I don't think I've I don't think it's gonna look good fewer than eight so a sprint is here's a horse sprinting or at least the closest thing you can get to it stop you there you go there's a sprint just take away the back half and you could gather round children if I'm gonna animate something and I'm starting fresh from a canvas that looks like this what I'll do is I'll just give me a self eight eight blank frames I'll put a background on it so that I can see what I'm doing usually I'll make it like a grey or like a black or who knows maybe I was some black make sure that I've got copy frames enabled well sorry linking cells enabled so that I can copy all of these okay there's a couple of things I do when I'm setting up I say where's the ground right and what is my what is my one of the proportions of my character right these are super important things to start with usually I've probably already drawn an idle animation right but let's just say that's I wouldn't this is too simple this isn't like detailed enough for what I'm trying to do right now but because we're doing a really quick demonstration let's just say that's my character Redman this is my video game character he's a hero of the universe I'll take this I'll make it transparent right so it's always there he's read your favorite color no it's not blue is red is just a very obvious color it's just very loud so what I'll do first is I'll say okay I'm gonna animate this character I need to think of the most dynamic thing about this character to animate first because that's how I like to animate I like to do straightforward animation I don't think in keyframes I think in there are like there are poses in my head that I'm thinking of when I think of a run like this but in any case I'll probably just pick a color here and like maybe I would do like a thigh or like we'll start with the head baba head okay heads pretty pretty cool now because this is a sprint you don't think about wait so the first first thing that you're doing with any animation is thinking about what animating like what's the actual energy of the thing that you're animating where does the weight go what you know how how are the mechanics working before you start thinking about details before you start thinking about anything with any animation that's looping there's a beat right with running animations as to its step step step step right so we're gonna do two steps alright two points with a with the character lands and then pushes off para Lu so we'll do on frame 1 and frame 5 we'll have the character landing so let's put the head like here okay and then basically copy and paste that right four frames one five if you want you can tell you I in skinning on make sure you're going in front of the sprite and basically just go from here to so I probably shouldn't have gone this big but it's okay yeah up sort of staying in the same spot hovering a little bit and then down a little bit and then landing and then going to the same thing again so basically copy frames two three and four to do the same thing so this is what we've got right Redman is going to become bloom in but this could be the start of our animation right now before you go any further the questions you have to ask yourself is is this the speed that I want right is this the pacing this is the beat this is like a step step step step right so if you if you go any further you'll be animating to this beat right you can go faster and slower but imagine if I divided the speed if I slowed this down like way way way way way slower it wouldn't work right because gravity is different you can't just speed up an animation and have it look right so at least get close to the speed that you want in this case I think for a sprint let's go like way faster so what's going this fast and since I'm doing that I'll probably make him lean forward a little more and even now you can sort of start to see things coming together because you're imagining if you're me what I'm doing I'm imagining this character you know putting that head here and thinking about how the legs work right but thinking if I'm pretending I'm imagining somebody running now it's a little it's a little jarring I'll probably bring these three frames and these three frames down a little bit I think it's he's it's a little high do you change the frame rate of the sprite animations so there are different frame rates in the same game now that's not a violation of purity I do that all the time every animation has a different frame rate and I probably I'll probably take these animations now I'm know what I'm doing is I'm grabbing all the frames that I want to do a thing with and I want to move them and I'm just gonna make make a good left and right okay so now it's like running left and right left and right you know this isn't perfect I'll probably make this one like move over to the right a little bit make this one move over to the left a little bit now I've got like a figure eight as it's running right that's pretty good that's that's for a start like for like the first five minutes of an animation that's great next thing I probably want to do is the either the legs or the arms so I'll make a new layer I'll grab a let's go yellow something completely different and think about this so now this beat that we were talking about right implies something it implies the foot lifting right when it when it goes up that's because they've stepped off so the hips heaps of friends to play with okay so I'm going to put the onion skin or negating okay this frame here is like passing through up here down land maybe like maybe spraying the land let's put the difference here and then this is like back maybe it's like up here up high and then swing through yeah that's good okay so what I'm doing is that so the first land right the first time the head is down on the ground then it goes up then on the second beat this is the foot that's being dragged forward through the air right like if this is what could be running it's like on the next time this is the finger that we're talking about the middle one the next time it goes down this is the leg that's passing through so this is the passing through frame right and you can see it already that's like a looking really good drinks me shapes during the sketch is kind of cool yeah for sure you need you need the smears all the time in fact I usually remove this smears as I'm animating I think the smears are most useful now because they keep you mindful of sort of like what's happening anyway if I want to be really lazy I'll take this whole layout right and duplicate it and they'll take everything I just did I'll shift the color to like let's just go back to red right I'll take the back half of the animation I'll put it in front I'll take the whole thing and I'll pull it back again so what did I do I offset it by half now we have two legs if you want you can even offset them visually on the screen so like actually take this one and like move it like this looking like a run now isn't it now this will look a little better once we've got the actual knees do you wanna do the knees now or the arms probably the knees is probably bit more better a bit more illustrative I should say I'm just gonna like get creative with this and just sort of like see how it goes that's better now ideally you'd probably do this stuff that like shin at the same time as you do like sorry before you do the copy-paste because now I have to do that again right so let's just and I never got this in fact this one should be back now let's do some arms we just upload this straight to YouTube it's not even worth like editing I'll take it green for the arm so arms are really straightforward right you just swing the opposite so when you run this on the same side as a leg you just you just have it go in the opposite direction so as this leg is swinging forward right this arm on the same side so this is our front leg that we're thinking about here this is gonna swing back so that when this knee is up this arm is back now he is a he's a little here's a little trick not everybody knows this if you haven't studied Anatomy I don't even know if I study I didn't study Anatomy I'm just like gonna give you some knowledge right now poses tend to look really good when the limbs on the upper and lower body are at perpendicular and parallel angles so on this frame here this is parallel with this I don't know how to explain why that's important but it just seems to work note it says just wondering how to smooth the keyframes out at the end and start of the animation in unity because I've been following along but I don't know how to do it when you say it's smooth the keyframes you're saying when we loop so remember I was thinking I broke this down into four frames right so I had the land right here and then I had four frames to get to the back right because it's half of the animation so count from frame 1 1 2 3 4 you should be at the opposite place to where you were at the beginning if on frame 5 and frame 1 you're not at the opposites then you're either too slow or too fast you should just line up after that right so like we're looking at this red leg here for frames later it's gone from all the way to the front 2 all the way in the back you just have to think of it like a rithmetic like that right you didn't get the perpendicular thingy I'll explain it when I finished animating their arm so this take take this base is like the lower the lower arm from the elbow down should be parallel to the knee down I'm just gonna animate this from the bottom now for a second the other thing you can do so like like I was saying the the arm moves in the opposite direction to the leg that's below it but by that definition it also moves in time with the leg that's opposite it so opposite arms move in time with opposite legs so this green arm can actually move in exact time with this yellow leg so it's smooth a little bit hey so we've got a bit of a run there okay these are smear this probably needs to be more angled for it maybe okay even further over and this could be more flat I think now I did just animate a kind of running animation like two weeks ago so this isn't all necessary locked in my head this way all the time so now you could probably do the same thing with this as we did with the legs just copy and paste offset by half pull it back change the colors excuse me no don't asked and then offset it a little bit so it's not too obvious what we're doing and now I've got some kind of animation it's gonna look really repetitive right it's gonna look like that's the same first half playing over and over again mostly because we don't have a torso in the way blocking the back arm but now you can see it's pretty I mean to add it to also to this is search reveal right it's just a big blob let's think of the chest the chest is really just didn't even look at that I just there you go there are some tricks that I'm adding here when I'm doing this and I'm not explaining for example look at how the head and this shoulder slash chest thing that I've just done look at how they animate a little bit offset so see how like the head came up and the chest follows that's called secondary animation right so it's kind of like the chest is like a frame behind the head like it's being pulled up sort of like like a like it's sort of like following generally generally the second end of the secondary animation aspects are the bits that are extended further away from the where the power is coming from if I have like a big length of rope and I lift the length of rope you can see the energy sort of like traveling through the rope as it lifts the stuff later and it creates a nice bounce basically yeah it just makes it look less rigid because it's true your body's not super rigid especially whether a joints so now we can sort of just and remember we can look at our reference like that's how big the chest is okay I'll just do this what might actually be a really smart idea I have never done this before but I'm going to try it is to duplicate this layer that we just worked on and then drag it down and that's our tour so we just connect the dots now it's not perfect because the torso that spine can compress and expand as well but as a starter it's nothing wrong with that let's give it another different color so that doesn't get confused with the with the arms there we go so now we can make sure that this back arm is behind the torso I don't really know which one that also is because I'm not really managing my layers here but we'll call this torso yeah okay that's a pretty good sprint the heads a little the heads a little off so now we can sort of tune the torso to match just dragging it right so just using the V tool to just like literally I think got what they had to be secondary to the torso so I'm going to reconfigure it a little bit there we go and I'll bring it in line a little bit because the anatomy is not quite right but notice this is the other really important thing is that I've I'm doing these changes right these anatomical changes as far as like the height of certain elements I'm doing this now when I can very easily drag them around frame to frame and I'm not ruining anything right they're all in different layers I haven't connected anything up so I could make this character as tall or short as I wanted just by grabbing the head dragging all the frames that it exists on and making it taller see no that says do you have a discord yeah of course I do join us on discord right here that goes for you too youtuber links in description so yeah I mean there's your sprint I think they're back the back and the the backswing on the arm probably could be a little better I think rather than coming down it probably should go out so this probably could be rotated you know a little better like that and it's sort of like a pendulum the hand is sort of like following the elbow afterwards what do you think goes and is there anything else you want to see the rest of it is really just sort of connect the dots so like think about where you're you know shoulder should be here maybe we'll just go through the torso and just think about the shoulders for a second right the shoulder rotates in 3d space you want to know about perpendicularity so okay look at this yeah look at this frame right let it sound like the arms are parallel and the legs are perpendicular on this frame I don't know how to explain why that's the case but it just is is it just for run cycles I mean I think it's for any locomotion I would imagine I could see this actually being more like this sort of more that's better this could be more towards his chest the fists tend to do that I mean if you look at someone walking look at this it's like perpendicular perpendicular so like it's actually it's actually that the the this leg the thigh sorry you can't see that the thigh of this leg is perpendicular to the shin of this leg you see that that's just a walk cycle and it's the same thing and it's not at every point it's at the points of I guess extension you I guess you could call it the keyframes right I actually like this a lot let's alright let's let's just finish it with the the backs so usually what I'll do is give my this will expose me actually I usually use the same layer but just pick a different color I pick a different brightness for like the additional joints but this is so look at this I'm just literally connecting the door to it like it doesn't this takes zero brainpower here you go oh that's a sprint there are some issues with it like I think though this leg here is too extended on like pretty much all of these frames but that's okay you can just drag them all back it's okay maybe the this leg this on this frame you know you could tidy this up a little bit make this a little more forward and rather than being so high it could be a bit flatter there you go that's better a sprint how long did that take now give it six more legs tada take away this is a sprint thank you so much for watching this video and thank you particularly to the patrons who support my channel and and this channel here on YouTube thank you - jacob young - bigoted Ron - Jared Barbosa - Alex jaded cat rhyme Oh Robin Fritz Gerald and Jo constant guys much love if you would like to become a supporter of the stream please see the links below thank you all and catch you next time [Music]

Channel: AdamCYounis

Views: 107,052

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

Id: PEyQP5_CYf0

Length: 25min 39sec (1539 seconds)

Published: Sun Jun 30 2019