Pixel Art Class - Attack Animations: Everything You Need To Know

this being more recent than that i like to thin this out so that you've just got sort of more of a streak closer to the fist welcome everyone to a new video today we're going to be covering animating attack animations in pixel art uh these animations will be particularly directed towards action games so attack animations where the player is actually pressing buttons and these animations are really dear to my heart since i am making an action game so i'm going to go into a lot of detail around the whole process of how these are implemented mechanically or at least the mechanical implications of these attacks and we're going to show how to make one so strap in and let's get to it okay attack animations these are animations that are pretty straightforward you can explain what they are they're animations that have some sort of hitbox or collision implication such that at the peak of the impact there is some sort of area where if an enemy or something is standing inside of it it takes damage the first thing i want to cover about these animations are the animation phases so here is an animation that i've borrowed from street fighter 3. this is makoto this is her fierce punch i'm going to show you the animation very very high detail animation these are considered some of the best fighting game animations in the pixel art era or at least classically there have been games since street fighter 3 in the king of fighters series in another series that still use pixel art but this is kind of like one of the greats so the animation is broken down into three phases we have the anticipation these are the frames that actually lead into the animation uh where there are no there's no hitbox here right there's no you don't do any damage prior to this we have the impact these are the frames where something's happening and then we have the recovery so as you can see there are three phases and they serve three distinct functions let's go through them now the first is anticipation basically this creates weight in the animation the longer the anticipation frames are the more telegraphed the attack is that's what the anticipation is for it builds anticipation for the attack we have impact the impact frames other frames where stuff gets done the character reaches the full extent of the attack uh in this phase often these take place over a single frame of animation in the case of street fighter we have one key pose but there are things like the headband that are waving in the wind but we can consider this one frame even though it's drawn over five then we have the recovery frames so the recovery frames return us back to a balanced position or a neutral position uh they also communicate weight so without the anticipation and recovery frames just showing the impact frames generally doesn't give a very strong sense of weight you need the recovery and the anticipation to actually communicate that visually these manage the player control as well and they are often cancelable so those two points at the end speak to the mechanics of these kinds of animations so let's talk about those next so because these are animations that feature in games there are mechanical implications and it's a pretty straightforward process basically from the player input there's usually a button or a command that the player has to execute in order to start the animation so we call this the input then during the anticipation phase there is a delay right so the players press something because they intend for something to happen they expect to get to you know to this frame here where there's some actual action happening but there's some time they have to wait then we get some feedback on the impact frames generally speaking there is a point during this impact phase where the animation if there is some sort of combo system in the game is cancelable so if the player has pressed a button by this point then generally speaking if there's another attack that extends beyond this one then we cancel the animation from here into that next animation so that would be a combo cancel point and then later on in the recovery frames there would be a point where the animation is move cancelable and what this means is if the player tries to move they can actually cancel the animation early in order to move the character left or right if this didn't exist then the player would have to wait till the very end in order to move their character or the animation would be cancelable by moving at any point which is not very balanced in games where we have action mechanics so those are the break points it's fairly straightforward but playing with these break points really changes the properties of the animation and when we talk about these animations we don't always talk about them in the context of the player sometimes these animations belong to enemies and there's a bit of a breakdown of how we think about the difference between these animations when they are designed for players or enemies and what kind of games they're designed for so in this instance you know a single player games player animation those should generally have fewer anticipation frames unless they're designed to be very heavy attacks they have long active frames and not a lot of recovery frames this is a very very broad abstraction but it's generally the case that this sort of relationship between these animations exists so in pvp games like street fighter there needs to be some build up to the animations because the animations need to be blockable by the other player the other player needs to at least in some way see them coming and they need to be punishable right if you miss you need to be stuck in your animation for a little bit so that the other player can punish you for it right otherwise the games aren't very fair and everyone's just spamming buttons right if we're talking about enemy animations so animations that are driven by the computer generally speaking especially in a single player game you want these animations to have a lot of lead up time and a lot of recovery frames because these give the player more opportunity to understand what's happening and to react accordingly so enemies in in single-player games they don't have as much agency and the game is often about teaching the player what to do when they see certain things it's a bit of a simon says game so that feedback between the animations and the player depending on who's driving these animations kind of compel us to change how the animation is is created and what those timings are so the point of these animations is to actually do some damage and there is in 2d games always a point between the parts where the animation misses and where it connects and those are defined by what we call hitboxes so let's look into those now so hitboxes are the core of any action game they are what serves as the regions that define whether you get hit or not or whether you hit the enemy or not and if you're making an action game these will be something that you have to deal with one way or another we're not going to cover that in this video but you could spend a long time uh building out a system that drives these but the basics of them are you have your origin of the player this is defined as a point in space and this generally represents the center of mass right it's it's usually the center of the chest down that's kind of where you place that origin you can draw a line virtually you know through the character or at least their center of balance from the origin up then we have herp boxes these are regions where if some incoming hitbox hits these regions you take damage and then of course we have the hitboxes themselves and these are regions where if we hit the opponent they take damage there's a concept here of range that comes into play you see the the point from where the origin is to the very last extent of that hitbox that's the range of the attack and stronger moves have more range they have larger hitboxes and those hitboxes do more damage a stronger move can also come out faster so it can have less and fewer anticipation frames and it might even have fewer recovery frames so all of those give the player an advantage there's also something to think about here which is movement some attacks in games actually move the player and the character and in our makoto animation here we can actually see that the transform for this character moves over the course of the animation it does return back to its neutral position or at least close to it but this is something that's also really worth considering when you're thinking about the active range of your attack you know maybe you want the character to slide forward and that can also really improve the sense of feedback as well if the character shifts left or right or forward during the animation so those are the fundamentals let's look at actually building these animations and as i'm doing so i'll show you the tips and tricks and features of what goes into making something like this so let's get into it okay so here we have a little character that i've designed just for the purposes of this video uh he doesn't feature in a game or anything like that but uh he is going to be our temporary fighting game character well think of this as a character that's actually in a single player game maybe like a beat em up something like scott pilgrim or streets of rage anything like that the ninja turtles games before we get to the actual final building of this animation the first and preliminary stage is actually to prototype it and put it in the game so these first phases will be dedicated to getting you to a point where you can do that basically um the only way to really prototype something like this is to build the most bare bones version of it and then extend from there so what i'll do is i'll delete this character we'll turn on onion skinning and we'll put it in front of the sprite so new layers uh are behind the onion skin we can see where it is also just make sure that you've got your onion skin here set out so that we don't see in front we only see the frame behind that's how i like to set it up anyway and we can keyframe this out and then do our straight ahead animation so the second keyframe would be something that looks like this right we would have our character he is going to be pivoting and on this foot here and we're going to have some big punch and as i'm doing this i'm just thinking about uh basics of like where his balance is where the force is pushing him i'm thinking i want him sort of really prioritizing the extension of his arm and so he's going to be reaching with his sternum and his torso in that direction and the point of this isn't to actually be our second frame of the animation the point of this is really just to give us something to test in our game and it really doesn't have to be very detailed it actually should be a silhouette if anything you don't want to spend too much time in this phase you know putting in too much detail because we're actually not we're not even deciding on any of that stuff yet so once we've got this second frame we've actually got pretty much everything we need to prototype the animation and what you would do is in your game engine you would take this frame you would take this frame and you would put them in your sprite animation and from there basically play out the frames you know add your velocity or whatever else you want to do on on hit and you know watch it play out and you would come back and if you need to add frames to add fidelity maybe you want to do some sort of anticipation and you don't think that you've been able to really read the animation without the anticipation frame then you can add that in too so we can maybe do that now i'm going to put this underneath us so that we can see a little bit better kind of like having a permanent layer behind that's just less opaque so that we can kind of have a perpetual onion skin basically okay it took me a while but i think i think i have the frame or at least some some part of it so we've got our neutral anticipation follow-through or impact and we can play that out and it doesn't look very good yet but these are the basic states of the animation that we're playing out and you might not feel like at this stage that you need to go through with the recovery frames all we're really doing is creating something to put in the game so that we can determine the basic properties of the attack once you're comfortable with these early keyframes you've got them in your game and you've actually been able to build out an animation in the game with hitboxes and colliders you know if the character moves or not then you want to come back here and you start working on your motion so this is where we get into the animation process and this is where i like to do the quick and dirty stuff the whole point of this process is really communicating the weight that's being transferred and the impact and this is probably where we're going to be defining our exact amount of frames so look forward to that i guess okay so basically the way that i do this is i'm just going to create a bunch of empty frames and assuming like that these lines dictate the starting position and the edge of the hip box so we've got some extents to work with we can then build out our animation and what i'm going to do here is focus on actually building out from the most dynamic thing in the actual animation which is the fist so we're going to animate the fist on its own once i'm going to do this in a new tag so i'm just going to call this punch and this will keep our other frames safe while we're working on this space here's my fist make sure you get it pretty much exactly where it needs to be and i'm just going to draw it on every frame with a nice brush about the same size as the fist so we're going to go in across then we're going to go straight over with the impact so those are our anticipation frames that's our impact and give myself a bit more space so once we've got a basic outline like this the next thing you want to do is start thinking about how it feels and tune it by removing frames uh tweaking frames until it has the right cadence that you want you can actually put this in the game right with the same information and data that you use for these previous attack frames and just see what it's like and you know if you have to wait one two three four five frames and that feels too long right then you would remove some anticipation frames a lot of this is going to be about iteration and just going by feel in this case i think i'm going to try to drag this down to about three anticipation frames and in my mind i'm kind of imagining what he's doing so in my mind he's stepping forward but i guess we could even plot some of these frames on here so this frame could kind of go across here here here here and then this frame kind of goes across here here here here and i guess here i would sort of start returning back usually i don't i'm not this explicit i just draw the whole thing out but i think for you guys it's probably more easy to visualize like this you can't really see what i'm thinking of in my mind so it's a bit easier this way now you've got something obviously this would need a lot of work but at least you have something to visualize you would put this in your game and then test again to see how it feels it's it's good to think about sort of how you're actually going to get from point a to point b if i really want the attack to go this far well it makes sense for the character to end somewhere and then reset so i need to think about how that's gonna happen and having these frames here at the very least gives us some indication that okay this this makes sense to get from here to here right and here's fine how do we get from here back to this pose so you might you might instead have uh like this foot is right so we're pivoting here that makes sense but we might have a couple of frames where instead of this you know we're bringing our foot back around and we're standing up something like that it gives us an idea at least of what needs to happen so basically when i'm evaluating this i am using my eye but there are some things that i think about that are really useful for getting a good sense of how to understand what looks good and what's bad and we'll go through those now so animation curves are how i rationalize this stuff uh what animation curves relate to are thinking about a point that's moving through time and space so time space from origin to destination you might have heard of these as things like easing curves or animation curves basically something that looks like this you would consider linear so it's moving at the same speed over time something that looks like this you would call an acceleration curve so it's getting faster over time we also have deceleration so we start fast and then we slowly slow down until we reach the end there's also what we call ease in ease out so acceleration deceleration curves personally the words ease in and ease out are really confusing to me so i usually just use the words acceleration and deceleration so this is an xld cell curve where it starts slow it goes fast in the middle and it ends slow you could also have something that starts fast slows and then is fast again this is a bit odd and then you could think of things like um like a rubber band so something that reaches its destination overshoots it and then comes back and forward and back and forth and back and forward so something that does that like an arrow hitting a wall um or even a punch over extending is very common in these basically i like to break it down by whatever it is that i'm using to to attack with with a punch we're using our fist and a fist is really light so the goal would be to communicate that we can move it really quickly and you would have an anticipation that's not got a very like light acceleration into a d cell so mostly deceleration curve and then there's our big impact and then we either like go backwards a little bit and then rest or we you know come back to our starting position sometimes you would decelerate if we passed through something right we punch and then we go over and then we think about returning to back where we were so that would be like a punch right where we we really want to highlight this this is like the most interesting thing that's happening right it's contrast between the point just before the punch and the punch itself if we were swinging a hammer though you might want this to be more like this where there's like this build up and you can see it building up where the hammer is like gearing up and then it really uh you know strikes when you see the the big like uh bang right that would be this part here and then usually you would cap that off if we like third into the ground or something and then maybe there's a point where it has to be like uh you know lifted slowly and returned back to the starting position so if we're thinking about this with our makoto animation you can see the speed of the animation by how much of the previous frame you can see right how little overlap there is is the same thing as how fast we're moving so if there's lots of overlap then we're basically not moving at all if there's no overlap then we're moving very quickly so again this is a really fast frame and then we slow down slow down slow down almost come to a stop and then we bang look at the distance between here and here so much travel in the upper body that's our impact frame then we overextend we rest there's actually a little bit of a rubber band here so you can see this um this fist if i go back i'm going one fully extended two we're back three we sort of go back to the middle between those two four we come back so the the fist itself is doing this it's actually doing this right the extension point is further than what's comfortable so it snaps back and then bounces until it comes to a rest and then it stays put then we have our recovery frames you can see the movement here uh has a bit of a start up to it the hips move move move faster faster and then slower and stop so they the hips actually do this right they build in they take longer to accelerate and longer to decelerate that's the way i like to think about it it's not perfect but that's a nice model right speeding up slowing down light things can move very quickly and they can change direction very quickly heavy things take longer they require acceleration and deceleration it takes a lot of force to move a very heavy thing very far in a short amount of time you always want to make sure that you communicate that it took a lot of force in the frames around that impact frame in the lead up in the anticipation and in the recovery if those parts of the animation don't communicate weight then the speed that's happening in the antis in the impact frame isn't going to mean anything the speed only really means anything if it took a lot of effort to get there so the fact that we decelerate just before this these slower frames make this big frame feel bigger feels like more force was used that's how i think about it let's now move into the layering so from this point on i really want to start visualizing the thing and this is where i start adding layers and yeah blocking it all out i'll keep this red layer as like just a little guide and i might also just start one frame after delete that and again i'm actually using those animation curves as my like visual model so i want it to feel like we're actually like decelerating from here fast slower slower and then we we could have one frame here so maybe we actually like you know add a frame that gives us just a little bit of a hint that we're about to punch this is probably less of an action gamey thing but you know if you were doing an rpg or if this was an enemy attack you could add frames just before the actual impact that are like a little bit of extra anticipation you can see they they give a lot of weight to it and i might just bring this up and over i'm really just plotting out where i think the fist will need to go cool so now you know we could take that layer here we call this hand we move up we call this one maybe head we'll work on the head and we could just pick another color take our head make sure we're basically on the same size and we want to get from here to here and we're going to use the same model of the deceleration into that slight acceleration into now this distance covered we for the fist are using what's called a smear to allow the eye to follow the travel from where it was to where it's going can smear more than just the hand but the more you do that the more you end up with this big blurry frame that looks just like this which you don't really want so i do like a selective smear and only do the things that i want the player to feel a part of the attack and the rest i just skip from here to here and i'm watching as i'm playing with this so i can just drag the head around on a per frame basis to see you know do i want him to lean down before he lunges or do i want him to lean back and then lean down you know there are these little tiny little decisions that you can make at this level just by dragging things around i like this idea of the head leaning forward while the hand is still coming back makes it look like there's a bit of a whip right okay so that's the head let's move on to the body probably going to be underneath the head pick another color maybe a dark blue here and we'll fill the body in for this first frame might make it a bit darker so we can see it a bit easier and wherever i'm not sure i like just blocking stuff in just to see like what my eye tells me it's easier to judge if something is good or bad if it's there on the canvas sometimes it doesn't even matter and i don't like these frames here i feel like uh what i want to see is from this frame i want to go straight to here so i'm going to take the smear on this frame take it with me paste it here and just delete this frame all together i don't like it you start to see the inconsistencies now one thing to note is very often it will be the case that when you're working this into your game on this impact frame you would have some kind of hit stop if the character actually hits something and that will really help accentuate the impact of the animation we can simulate that here by adding you know a couple frames worth of time it's a little too much and generally what you would do here is you would take your you know we might say duplicate this for this frame so we have two instances of where everything else is the same and then we might take all of this and instead of using it as a smear we actually have this be like some kind of you know wind or something like that and we would actually animate that so let's give this a bit of an impact here and what i like to do is just to show that time is elapsing here and that there's sort of like a relationship between this being more recent than that i like to thin this out so that you've just got sort of more of a streak closer to the fist or whatever it is the sword and i would also make this whole layout transparent and what i tend to do is i think of these as particles so i would actually take some of this stuff and shift it forward on the next frame you know some of these little blobs to make it feel like there's travel in the air almost like he's left he's got some sort of like slipstream or like called some wind could even have like some shot wind passing forward as well and often you would animate this stuff with like a higher frame rate so having that little bit of impact those particles appear and and resume playing on this stopped frame really increases the idea of their being impact and that's what we call hit stop let's work on the the legs now and again what i always like to do when i'm animating legs is i just animate the lower portion of the leg and i resolve you know if this is the hips then you can just connect the dots later for the thigh and this leg is actually going to be this leg for the sake of continuity even though it becomes the front leg you know we'll call it front leg and what i'm doing is i'm i'm noting the frames where the leg is planted and even though i want motion here i don't want the feet to slide so i'm actually going to keep this point here conserved and i'm going to bend the leg away from this point we're pivoting here see and i guess we'll i guess we'll do it this way and we'll push that forward so that we over extend pivot to the left and then find our place there now for the next leg usually my scheme for this kind of thing is i'll take a joint and i'll make the upper joint uh a darker color or a brighter color than the lower joint but i'll keep them the same the same ramp so in this case like when i do the thigh you know i might take this red and do that just to allow me some way of remembering what's what so the idea here is that we're sort of sliding into place on this back foot and that the weight of us shifting our momentum is enough to slide this foot between these frames and i might even create a bit more space there okay nice and it helps if there's a little bit of over here so because these feet never cross over or at least when they cross over you never see them intersect it's nice to do something like this to allow the eye to register the fact that they're crossing so i'll just think about that a little bit more so we can do the hands now the other hand yeah maybe oh maybe we'll do the forearm underneath it might be a bit easier that way too i'm not sure what this is i think that the arm should extend out i guess that's right so yeah that's a bit much but that's the right idea we can actually trace with our eye the elbow moving that's probably a bit too much and we can trace the hand moving yeah much better great so this is basically everything we need as far as just like the pose we could do the forearm maybe of this hand yeah that'd be right yeah now there are some schools of thought which would say that we could actually merge these two frames so that we show instead of this frame we show the hand across both frames and we go straight to this i do this a lot of the time with my sword animations so swords are really interesting because you can track the sword's motion across a path and imply that the character has swung all the way around but we never actually see the character swing right we see him up we see him down but we don't see him we don't see him with his hand outstretched it's a little bit different with a punch because we sort of want to see this impact point now i i'm not honestly like it's something that you could experiment with so it works but it's nice to i think it's nice to have this pose to see the impact depends on what you're doing again if this is like a fighting game you really want to stop on this frame to appreciate the hit and you want to see the hit it helps the players understand where the hitboxes are but if this is just like a single player action game it's not that important and again we didn't have anything when we started here remember you're making adjustments in order to you know feel out that impact get it exactly where you want get the crunch you know as maximized as you can all that stuff it comes in the process it doesn't happen when you're drawing the keyframes you won't get it immediately so i'm making slight changes now slight changes that are appropriate because we're in a place here where we can do micro adjustments to limbs we can place the foot a few pixels forward a few pixels back without breaking anything we wouldn't have known that the foot needs to be a little bit here or a little bit there if we hadn't drawn the very very first frame where we just you know had the key pose in and we wouldn't have known what the key pose needed to be if we hadn't worked out where the hitboxes were going to be in that first phase which you would have done nice i really like this this flex pex flex really sets that up really nicely now before we start detailing this the last thing we want to do in the layering is the secondary motion and i'll explain what that is in a sec so secondary motion is anything that moves as a result of something else moving before it in this case i'm talking about the hair right if i move my head you can see the hair is moving after it's sort of delayed that's secondary motion and anything that's attached to stump to something else is usually subject to some secondary motion so in this case the coat is attached to the chest and the hair is attached to the head so those things move slowly after now i what i want to do is i want to see my character so i'm going to move him yeah out in front and make him more opaque so i don't get the design wrong here and i'm just doing the parts of the coat that are free-flowing now the way that i animate this for those of you who haven't seen this kind of tutorial before is what i like to do is just track the very bottom layer that's the thing that takes the longest to move everything else follows that or at least is ahead of that so you can do this right and we can watch it rest and this kind of thing really likes to follow those you know accelerate decelerate curves right because it takes time to it's like a pendulum takes time to pick up speed and it takes time to slow down and this kind of stuff is it's really really important at conveying that extra motion seeing someone's hair like whip back when they lunge forward or you know run out in front of them when they finish their motion they come to a screeching hole watching their hair flip forward to me that's like a real really really good opportunity to help communicate what's going on and on this frame you know we'll have the code like i think we should have it like flick back like this and then maybe like swing forward you could even just cut straight to the fact that it's to the part where it swings forward nice looking good cool so the next piece of secondary motion that we've got is of course the hair uh what i will do in this instance is i'll take the head and we'll make this its own thing called head detail and this is where i i'm very picky about getting this right so what i'll do is make sure it's perfectly aligned and i'll just try to manipulate what's here to reflect where it needs to be basically i've talked about this in earlier episodes the head is so important because it's how we identify the player so you don't really want to change the orientation of some of these pixels unless you have to because that's how we know who this person is you know if you take away like one thing now it feels almost like a different character so you know as far as secondary motion goes it's just about bringing the hair up and out so the hair is following behind it takes a little longer to respond here on these frames because of air resistance things like that and then it takes a little longer too coming back the other way so the head pushes forward but the hair is still behind and this doesn't have to be this is really important these these changes that we make to the hair they don't have to be accurate to this we can't really tell what's going on here so all that really matters is that it's consistent with itself because how are we going to track that to that anyway how would our eyes be able to tell can't really cool so once we're at this stage we're almost ready to start doing our detailing let's uh first going to the obvious next step it's coloring so i've shown you this a hundred times it's really straightforward you just got to take your color first make sure your dude is here make it nice and visible and we're just going to start replacing the colors so this color across all of these frames is going from this to this from here to that so what i'm doing again for those of you who haven't seen this before i'm clicking on the body part because i've got auto select layer on i'm then clicking the layer that shows up back leg pressing shift r i drag the color that i want and i drag the color that i want to go to but basically there at this point we just need to make sure that everything is correct proportion wise so now that we've got the colors right we can start tidying up some of this just watching any one part of the body on on a given layer and at this stage because like my upper and lower legs are basically the same i'm just going to merge them down this is all about just staying on model just doing what we need to to make it look nice and consistent try to stick to one layer at a time as well across a whole animation so that you don't miss anything out just stick to the one layer go through the whole animation on that layer like here we can watch and see oh we've got some pixels going awry here fix them up on this making very very specific changes so once we're done with this face we can move on to the next phase which is detailing detailing is a pretty straightforward thing basically you're just trying to make every frame look like this frame that's it in this case uh there are some easy things we can do with the shade brush between these two colors here i'm just going to drag them like that and then toggle on the layer that i want and just for the shoes you do get these funny frames where things just don't look the way they should and it's often not too hard to resolve them but and there are some things you can do like on this frame we could we could just take this and shift it forward and then darken this off here just to make it look like he's turning all right we darken out the eye we even bring this out bring this in and these frames here i want to look a little a little more buff and i might do a little bit of a change here now that we're at the end the perfect time to make changes to extend this a little further out let's do that there's one more thing i think that we don't have which is the shading on the shirt should be easy enough and then there was a bit of darker shading as well and i want to use this shading to show that we're leaning over so here it's just there because we're leaning kind of back and then as we start to lean over i want it to creep in so you could do so much more with this uh let's let's do one more thing we can always we can always add a bit more right let's let's add some dust around the feet and i want this to kind of be blown forward it's kind of like a rush of air coming underneath it's blowing this up and away i will make a tutorial on how to do this kind of thing one day this is this is taking me a long time to get anywhere with so it's going to look really messy and then it's going to look better and i can't really explain i can't really explain why it's kind of one of those particle system things okay that is going to round out this tutorial this was a really long one probably the longest tutorial i think i've ever filmed so uh thank you all for watching i had a great time hope it a great time too i will see you in the next one and happy attack animationing hey pal thanks for watching and thanks most especially to the patrons and twitch subs who support this channel and my gamedev project insignia to find out more click the links in the description below and if you like 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 thanks again and until next time

Channel: AdamCYounis

Views: 124,577

Keywords: game development, pixel art, game dev, game, video game, indie games, stream, Fighting, attack, combo, combat, animation, tutorial, hit

Id: nJbzBSVy1u0

Length: 51min 22sec (3082 seconds)

Published: Sat Jan 09 2021