These characters aren’t just standing around to chew bubble gum, they are prepared to beat up hordes of scumbags.
Intro
Welcome back to another edition of my ongoing human anatomy series. In the pervious two entries (Pixelblogs 49, and 50), we covered basic male, female anatomy models, and walking animations. In this edition we take a detailed look at idle fighting stance animations. Calling them ‘idle’ animations makes it sound like there’s not much going on, however, a character’s idle loop is one of the most effective means of displaying personality, and bringing the sprite to life. Furthermore, minute changes from frame to frame amount to a surprisingly nuanced challenge. While small sprites can evoke expressive movement with few frames, larger sprites afford the pixels for smooth, hyper realistic motion, but require more frames to execute with satisfying results. In this lesson, I take my example sprites that encompass a size of 48x92px, and maximize fluidity of motion with a reasonably economic 8 frame idle loop.
While the main purpose of this series is to develop general proficiency with human anatomy, the underlying design perspective is driven by the concept of creating a 2D character action/beat em’ up game. Ultimately, I don’t know how far I’ll take this series, but it’s important to understand the foundation my design decisions come from, as we move more into the animation. Moreover, the goal is not rotoscoped realism, rather a stylized hyper realism within the context of action based gameplay.
Male Idle Fighting Stance
We start with the general pose of the color coded dummy based off the anatomy established in previous lessons. For the male character, I use a basic boxer’s stance to suit a character who will rely heavily on upper body strength with an arsenal of mostly punches. In this stance, the hands come up to protect the face while the neck scrunches down into the shoulders to further shield the vital head target. A soft bend in the knees keeps the fighter light on his feet, ready to quickly shift weight into a punch, or evade a strike.
Putting this pose in motion adds a gentle bounce to everything in a breath like up, down rhythm. Through the entire motion the initial pose is maintained while the force of gravity acts upon alert, yet relaxed pulsing muscles. Everything is anchored to the steady motion of the torso.
Frame 1 to 2: The Head and torso raise 1 pixel on account of the legs slightly straightening, which shifts the knees in 1 pixel. The shoulders, elbows, and outer fist raise by 2 pixels, while the inner fist raises by 4 pixels. Note the subtle shift in the forearm orientation, which is most apparent on the inner arm with the more pronounced fist movement.
Frame 2 to 3: The feet slightly bend raising the heels, which moves the entire body up 1 pixel, but nothing else changes in the pose. This is the greatest height the figure reaches through entire sequence.
Frame 3 to 4: The heels go back flat to the ground, dropping the torso, legs, and outer fist by 1 pixel, but the head stays at the same level. Shoulders, elbows, and the inner fist drop 2 pixels.
Frame 4 to 5: The knees bend, moving out 1 pixel, which moves the thighs, torso, head, shoulders, and elbows down by 1 pixel. The outer fist moves down 2 pixels, and the inner fist moves down 3 pixels. Note, the subtle change in the orientation of both forearms.
Frame 5 to 6: The knees continue to bend, moving out 1 more pixel, which moves the thighs, torso, head, shoulders, and elbows down by 1 pixel. Both fists move down by 2 pixels. Note, the subtle change to inner forearm orientation.
Frame 6 to 7: The bottom portion of the legs compress, dropping the knees, torso, head, shoulders, and elbows by 1 pixel. Both fists drop by 2 pixels. This is the lowest height the figures reaches through the entire sequence.
Frame 7 to 8: The bottom of the legs stretch back out, moving the entire body up 1 pixel, except the head remains at the same level.
Another detail to consider is the playback speed. Frames 1-4 play at 100 milliseconds/0.1 seconds, while frames 5-8 play faster at 50 milliseconds/0.05 seconds. This accentuates the force of gravity by speeding up the downward motion, and subtly slowing the motion at the max height of the bounce.
Adding clothes and design details to the dummy is more than just a color swap. While the suit is fairly form fitting, it hangs off the figure and slightly thickens the overall profile. You must consider the tension on the fabric imposed by the body position, and gravity in order to properly fit the clothing. Furthermore, the shoes thicken the feet, and raise the overall height by 1 pixel. The hair also slightly increases the overall height of the sprite.
When in motion, the fabric conforms to the figure, while making small sub movements in the wrinkles, and where it hangs loose. Additionally, the hair permits sub movements to further bring things to life. Capturing a natural feel to the flow of the fabric and hair definitely takes some trail and error. Part imagination, part reference study(mostly bouncing in front of a mirror), and a good dose of experimentation are required for satisfying results. I suggest starting with a form fitting design for the overall animation, then carefully work in the sub movements one area at a time.
Female Idle Fighting Stance
Moving on to the lady character, we take the same approach, starting with the pose of the dummy figure. For this character, I went with a karate stance to take advantage of the female’s lower center of gravity, and strong legs. From this posture she is poised to effectively strike with kicks, while defending attacks with clever spacing, and counter grapples.
The motion follows the same bouncing formula as the male, with subtle differences.
Frame 1 to 2: The outer knee shifts up and in 1 pixel, while the inner knee moves straight up one pixel. This moves the torso, breasts, and head up 1 pixel. Both arm units move up 2 pixels.
Frame 2 to 3: The feet bend, raising the heels off the ground, moving the entire body up 1 pixel.
Frame 3 to 4: The heels move back down flat on the ground. moving the torso and legs down 1 pixel. The head and breasts remain at the same level. The shoulders and elbows move down 2 pixels, but the hands only move down 1 pixel. Note the change in forearm orientation.
Frame 4 to 5: The outer knee moves out and down 1 pixel while the inner knee moves straight down 1 pixel. This moves the upper legs, torso, breasts, head, shoulders, and elbows down 1 pixel. The hands move down 2 pixels. Note the subtle shift of the forearms.
Frame 5 to 6: The outer knee moves out and down 1 more pixel. The inner knee moves down 1 pixel. Note, the compression movement in the legs. The lower legs, torso, head, shoulders, and elbows move down 1 pixel. The hands and breasts move down 2 pixels. Note the shift in orientation of the forearms.
Frames 6 to 7: A compression occurs in the lower legs moving the knees, legs, torso, head, shoulders, and elbows down 1 pixel. Note the subtle changes in the form of the legs. The hands and breasts move down 2 pixels. Note the shift in orientation of the forearms.
Frames 7 to 8: The lower legs decompress, moving the entire body up 1 pixel, except the head remains at the same level.
Same as the male, the frame timing plays at 100ms on frames 1 to 4, and 50ms on frames 5 to 8.
There is less fabric to go around on the female design, but there is a more dynamic contrast between the tight fit, and the loose portion at the bottom of the dress. Furthermore, there is obvious sub movement in the skirt area of the dress, and a subtle stretching of the outer shoulder strap, but everything else is skin tight. The high heels dramatically modify the feet shape and lift her height by 4 pixels. The hair jostles as she bounces to imply its relative lightness. Of course, jiggle physics are enabled.
Final Thoughts
I started this blog with the intention of including some simple melee animations as well. However, just breaking down the idle animation for for both models, along with the clothed designs, turned into a substantial amount of content. Moreover, it would be a waste to gloss over this crucial part of animated character design without a detailed explanation of the nuanced movement, as even a skilled visual learner may struggle to notice all the subtle changes between frames. I hope the information digests smoothly.
In the next edition, we’ll finally get to those melee animations. I’ve already started on multiple attacks for both characters. Stick with me, and do not fear the oncoming challenge. I’m on this journey with you, and we’ll be taking our time, so no one gets left behind.
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 Idle Fighting Stance Assets Pack
Source files used in the making of this Pixelblog are available in Idle FIghting Stance Resource Files
Get caught up on all my downloads
You made it to the end of the article. Thank you for reading!
-By Raymond Schlitter