Intro
From first establishing basic proportions, It’s been a long journey to get these characters into fighting shape. We’ve put our patience and focus to the test, but now, we’re ready to step into some real action with flying fists and feet. Don’t let the excitement catch you off guard, we must maintain a disciplined approach to face this challenge straight.
Before getting into the nitty gritty, I must reiterate a disclaimer about the art direction of this anatomy series. While the underlying purpose is to gain proficiency in human anatomy, the animation style is dictated within the context of a hypothetical arcade action/beat em’ up game. Moreover, I’m building from real life references and combat sports principals, but filtering through an arcade game design lens in concern for gameplay and economy. I describe the style as hyper realism, which is much more akin to a Streets of Rage, than a Prince of Persia.
You have to learn to walk before you come out swinging. All of the following attacks flow out of the idle fighting stances established in the previous lesson. If you are new to this series, I recommend brushing up with the previous installments.
Human Anatomy
Walk Cycles
Idle Fighting Stance
Male Dummy Punches
JAB
Described as the most basic, yet most useful punch in the sport of boxing, the jab is the ultimate ice breaker when talking with fists. Based on the fighting stance, the lead hand fires straight forward from chin level, driving to the full extent of the arm with minor lean in and hip twist. This punch should strike quick without any wind up that can easily be telegraphed, and it should minimally compromise the fighting stance, so guard can instantly be recovered. A low risk/reward attack, good for leading combos, and creating openings for stronger strikes. With minimal input delay, it’s your safe button masher attack.
Smear: The first frame is the ‘smear’, which captures the velocity with abstract traces at the strongest point of motion. Keep colors simple in the smear for better legibility. The main key position of the striking pose is essentially achieved in the smear, less the actual smear. The front fist drives straight out from the shoulder, while the head drops 1 pixel. The front knee bends down 1 pixel and the back foot pivots out from the body. The torso leans forward 2 pixels at the groin, and more dramatically by 3 pixels at the chest level.
Hit: Further leans the entire body forward a few more pixels, subtly bending the front knee, and lifting the heel. Note the frame timing, displayed in milliseconds next to each frame. The hit frame is slightly longer to enhance the sense of impact.
Follow Through: The ‘follow through’ is almost the same as hit, but it extents the arm forward 1 more pixel from the shoulder pivot.
Recover: Shifts the legs nearly back to idle position with the punching arm bending back about half way to the idle position.
Overshoot: The overshoot frame is identical to the first frame of the idle, but shifted back 1 pixel to create an energetic snap back effect after every punch.
CROSS
The cross, or straight punch, drives out from the dominant hand for a more powerful attack. To garner more power, this punch includes a brief wind up relayed through the initial ‘pull’ and ‘load’ frames. While this creates a slight delay from input to impact, the risk is compensated with greater damage potential. I’d probably make it a combo finisher that automatically triggers after a couple jabs, rather than a stand alone input.
Load: Rolling out of the idle position, the animation starts with the ‘load’ frame, which raises both fists, and swings out the elbows like chicken wings, with a sharper degree on the punching arm. The knees slightly straighten to raise the entire figure from the knees up. The back heel subtly rotates the foot out from the body, foreshortening the foot with a 1 pixel shift in of the toes.
Pull: Nearly identical to load, except the punching forearm (defined by the bright green color) is pulled back 1 pixel.
Smear: The hips twist bringing the entire figure into a side profile view. The front knee bends and moves forward 4 pixels, while the back knee travels forward 9 pixels and down 6 pixels. The back heel dramatically lifts off the ground, place the foot at a 67.5 degree angle. The punching arm drives straight out to near full extend, while the head drops by 2 pixels. The back arm swings back, so the elbow can be seen jutting behind the torso.
Hit: The whole torso and front arm leans forward 1 more pixel while the back arm moves back 1 more pixels. The back knee and heel shift back 1 pixel, yet the ball of the foot stays planted.
Follow Through: Nearly identical to the hit frame, but the punching arm drives forward 1 more pixel from the shoulder pivot. The chest also rotates forward 1 pixel with sub pixel movement.
Recover: The back heel plants down on the ground, bringing the front knee back 3 pixels, and the back knee moves back 3 pixels and up 2 pixels. The torso shifts back and the hips rotate back about halfway to the idle stance. The punching arm pulls back in toward the body while the back arm moves forward, both about halfway to the idle position.
Overshoot: Very similar to the first frame of the idle, but the knees are shifted back 1 pixel, and the entire sprite is shifted back 1 pixel from the idle foot placement.
Female Dummy Kicks
FRONT KICK
The female fighter takes advantage of a lower center of gravity than her male counterpart, and comparative leg strength by utilizing fast ranged kicks. The front kick can easily be sprung from either leg, yet packs surprising power depending on execution. It’s performed by first raising the knee straight up - the higher the better. Many kicks in martial arts are prepared, or ‘chambered’ in this manner, as it puts the leg in position for a variety of strikes while maintaining centered balance. Once the knee reaches the apex, the foot is snapped straight out to the front.
Smear: To provide a quick basic attack with minimal delay, the animation snaps right into the leg snapped out in front, with the chambering only implied in the smear. From the idle stance, the hips twist, so the figure is seen from a side profile. The back leg is straightened and brought forward, raising the overall height 5 pixels from the first frame of the idle sequence. The arms are raised up, so the fist of the front arm goes the top of the head level, and the fist of the back arm is about shoulder level.
Hit: Very similar to the smear, but the smear effect is removed, the entire kicking leg moves forward 1 pixel from the hip pivot, and further straightens in form, raising the foot by 1 pixel. The back knee and hip slightly shifts forward by 1 pixel but the height doesn’t change. The momentum shifts the breast forward 1 pixel.
Follow Through: The front leg ripples back to the position of the smear frame, minus the smear. The back leg remains the same, but there is a slight depression in the buttocks. The front elbow is lowered 1 pixel, while the back arm is moved backward 1 pixel. The breast moves backward 1 pixel.
Overshoot: The overshoot frame is identical to the first frame of the idle, but shifted back 1 pixel.
SIDE KICK
The side kick garners more power than the front kick by utilizing more hip movement, and allows a higher strike point to knock foes right in the noggin. Paralleling the male’s cross punch, the side kick includes 2 prep frames to imply greater power. Also, it uses delay, screen shake, and a heavier hit effect to emphasize the thunder in those thighs.
Load: The first frame of chambering the kick moves the kicking leg and forward arm far from the idle position, warranting smears. Since the motion flows into the direction the kick will snap towards, the smear works well. However, if it were counter to the motion, as in the case of the load frame of the cross punch, the smear would detract from the motion. The knee moves straight up while the the foot curls in toward the body to increase the motion for it to spring out when the kick is delivered. The back leg is partially straightened, but still has a slight bend while the foot slightly rotates away from the body. The top of the head is raised 1 pixel from the first frame of the idle sequence.
Spring: The knee of the kicking leg is further raised, as the foot swings down in line with the knee. The supporting leg further straightens and rotates out from the body, raising everything from the hips up 2 pixels. The front arm raises up and begins to straight out while the back forearm slightly rotates up.
Smear: The kicking leg snaps out and upward, and the supporting leg pivots forward to a straight up position while rotating outward from the body, further foreshortening the foot. The hips twist into the kick, revealing most of the back and buttocks, while the whole torso pivots back about 45 degrees. The front arm straightens and extend outs parallel to the kicking leg. The back forearm maintains relative position while rotating back with the torso.
Hit: Very similar to the smear frame, but the whole body except the back forearm, leans forward 1 pixel from the pivot of the knee of the supporting leg. The hit effect starts on this frame.
Follow Through: The kicking leg bends inward and down 1 pixel from the pivot of the knee, while the foot slightly rotates downward. The back forearm moves back and down 1 pixel.
Recover: The hips twist back, bringing the whole figure into a side profile, while the torso rotates straight up. The front forearm rotates back, as the elbow remains raised up. The back arm swings up in a similar position, so both fist are about eye level. The kicking leg swings back down, and the knee lowers. The back leg bends backwards, and the foot rotates forward, bringing the back butt cheek back 6 pixels.
Overshoot: The overshoot frame is identical to the first frame of the idle, but shifted back 1 pixel.
Male Clothed Punches
Following the dummy animation, we suit up the figure with our good ol’ fisticuffs seeking salaryman. Much more than a palette swap, the physics applied to the details of the fabric and hair must be carefully considered. There’s not much more I can say than the tips I’ve given in previous lessons. Use references, go through the motions in front of a mirror and analyze the direction of the folds in the fabric. Try to add lively motion to the hair, and where the fabric hangs loosest. Keep details simple and focus on one area at a time, one frame at a time. Start with solid color and and motion of the main forms before the sub pixel animation. It’s better to preserve the legibility of the movement with minimal colors and details, than create complex details that cause jumbled noise when in motion. It will require trail and error to get satisfying results.
Pretty much the same story here. The suit is form fitting and doesn’t add much extra motion to the overall forms, but the sub pixel details greatly enhance the depth, and visualize movement that could only be implied in the dummy version. For example, the seams down the legs help illustrate the hip twist and rotation of the body into the punch. The hair flop adds character while increasing the sense of speed and impact.
Rapid combo with no inbetween idle frames
Female Clothed Kicks
The skimpy form fitting dress of our femme fatale doesn’t require much detail in the way of folding fabric dynamics. However, special attention is given to the hair and skirt of the dress, which adds a surprising amount of expression over the dummy counter part. Also note how the high heels increase height and distort the shape of the feet.
Trial and error with a basic vision for the physics at hand is the primary method. I kinda just played around with the hair until it felt right. The way it flops down at the end of the kick, then flips back up in the recover is the key to the sell. Furthermore, It wasn’t until I made this version I realized how a little ass jiggle adds to the momentum. Pulling off these moves in high heels might be a bit fantastical, but surely a heel to the face could do some damage.
Final Thoughts
Raw talent for character animation is rare, and I'm no exception. If you’re struggling with the subject, I want you to know I am too. However, the wisdom gained from struggle provides the most enduring lessons. Looking back, I must acknowledge how far I’ve come, but not become overly proud in the competency I’ve developed, and continue pressing for improvement. Basically, I’m saying we all suck before we git gud. I hope my thorough approach provides some insight, and inspires you to take on the challenge of character animation. Afterall, you can’t learn this stuff through osmosis. Shall we continue the series? Jumping, aerial attacks, damage, death… so much is still on the table.
Resources
Please consider supporting my work by becoming a Patron. Among many other rewards, Patrons can download the assets featured in my tutorials. But, most importantly, you allow me to continue making new content!
Many of my popular assets are also available to purchase from my digital shop
Alternatively, you can support me by making a one-time donation
Assets featured in this Pixelblog are available in Punches and Kicks Assets Pack
Source files used in the making of this Pixelblog are available in Punches and Kicks Source Files
Get caught up on all my downloads
You made it to the end of the article. Thank you for reading!
-By Raymond Schlitter