23.03.2005 - "First Fighter Sprite"

Lets check out this sprite as it was submitted here. Check out the general proportion measurements in pixels. The legs look way long compared to the torso, dont they?

• This is our original submission peice from Richard. Not a bad peice if you ask me. Just at first glance, this 'muscly guy', who I feel like naming "Richard" (he sort of looks like a Richard to me), appears to have some nice technique and color choices. The first noticable problems Richard might have is his anatomy. The damndest thing about anatomy is, you could have the best pixel techniques in the world and your fighting sprites could look awkward because of ill-knowledge of proportions, muscle groups, etc.

So have a look at some of the pixel ruler lengths for the segment of the body. The overall proportions look okay, the torso is about 30 pixels tall which is just about perfect for a sprite at this height (about 125 px tall). However, there are some problems with the length of the appendages. Most noticably, the arm on the left part of the sprite (the sprites right arm) is looking very short considering his torso length. Arms hanging down, they should come down roughly to the middle of your thighs. In this particular sprite, its only coming down to his waist. Also, it appears to me that while the length of his legs are fine, the length of his upper leg, above the knee (quadirceps) are too short in comparison with the lower half of his legs, below the knee. Finally, while the sprite colors and technique itself look decent enough, his stance and posture in general just feels 'uncomfortable' to look at.

Lets proceed from here by breaking this guy into 2 groups, his upper and lower body, for easier dissection and digestion of what is going on at the moment.

Check out the length of the leg segments. The original example had quadriceps which were about the same size as the lower half of the leg beneath the knee. Your quadricep muscles should extend a few pixels further down, giving them a longer length than your lower leg segment.

• Lets begin with the lower leg. We see here a comparison between the original sample (left) and the beginning of an overhaul on the leg structure and cloth folds (right). Check out the proportion bars to the left of each pair of legs. In the original example, the yellow bar looks much longer than the orange bar above it (signifying the lower leg is longer than the upper segment). In all fairness, you have to keep in mind that I have included the foot in the yellow region of the leg in both examples, so its not fair to say 'the shin in the original example is actually longer than the quadricep muscles', but it would be accurate to say that the shin and quads are about the same length.

What we want to do is extend the knee down about 3-5 pixels in this example to make those quad muscles longer than the shin and foot region, or at the very least, make them almost the same length, favoring an extra pixel or two for the upper leg lenth. What this does is ensures that your sprite does not appear to be 'walking on stilts' as I like to put it.

Next, note how ive pretty much stripped the legs of all detailed cloth folding. We are going to employ some dynamic cloth folding to these swishy looking pants to give them a natural look and feel while they are hanging off the character's leg. What I HAVE done was generally shaded the pants to block out the major muscle groups and structure of the leg. The quadriceps above the knee are shaded in an orangish highlight tone while the shin area underneath the knee has a bit of a faded out maroon tinge. This would be a good time to point out that I'm also going through the liberty of simplifying the amount of colors used. This way you can easily keep track of all your highlight and shadow tones. At the moment, Im using 1 'highlight' tone (the orange used to highlight the quads), a single midtone (being employed to the cloth hanging off the shin area below the knee) a shadow color (which is ever so generally blocking out some places where i will employ cloth folds), and finall an outline color (the darkest color being used to punctuate the outline between the two legs where shadows dwell heaviest). Also note the shoes have been simplified and squared off so that the back foot appears planted on a level surface.

Next step is to block in some more cloth folding elements. Notice the angular nature of the direction in the cloth folds...they all run parallel.

• Time to add a little depth into these pants here. Lets block in some of those nice cloth folds you had implemented on your pants. Im just going to go through a very general style of cloth folding for this sprite, for it could easily turn into its own lesson (and probably will show up in its own tutorial one of these days).

Check out the pants with those funky looking arrows. This is the general ebb and flow of the diagonals used to create the folds in the cloth. Notice how they have a nice steep, angular slope. It implies gravity is doing its job, yet the cloth has stitches in the seams that are holding it in place regardless of gravity's influence. One important thing to note is that cloth folds happen more often (and dramatic) than not in the areas of the pants where the objects underneath the cloth, otherwise known as 'the legs' in this example, DO NOT brush up against and give support/structure to the hanging cloth. These areas in pants are commonly found in the crotch area, behind the knee, and around the ankle where the cloth is usually much thicker than the bony ankle structure. Areas that are not so much affected are where the quads fill out the pants above the knee, and the calf muscles sticking out below the knee, towards the anterior facing of the leg. Notice how the areas listed that are more prone to cloth folds have more influence from the illustrated diagonal lines than the protruding structures.

Colorwise, I've introduced a new highlight to the right facing leg. This new highlight brings that leg out into the foreground moreso than the other leg, adding some extra depth to the leg structure. As for shading and AA, Richard had a good deal of that technique wise. But the colors might have been a little too contrast-ish, especially regarding that highlight orange tone. With our revised example, shading at this point is a bit more subtle and simplified, using only 4 colors instead of 6 or 7.

Time to add the finishing detail with some of the more subtle cloth folds, adding a bit of contrast in certain key areas to emphasize the current folds.

• Taking the legs a step further, Notice that the cloth folds on the new example (right) have a bit more 'punch' than they did in the previous step (left). The calf on the right leg was given a hit of a highlight tone to emphasize its presence. I used the darkest shade to give depth to the current folds near the ankles and inside areas of each leg, giving the legs in general that nice round, solid feel they need to look believable.

If you desired, you could take this a step further by adding a bit more shading to the general cloth folds already illustrated to create more subtle ebbs and flows in the cloth, but I dont like to get much more detailed than this stage for this style of sprite.

The muscle anatomy is generally correct in terms of placement and form, but some nuances keep it from looking 'correct' and solid. Anatomy and structure comes before all other shading on the ladder of precedence.

• Lets move on to this torso now. What I've done is taken the revised leg structure from the previous example and posted it onto the existing torso. As I had mentioned before, the torso on this peice is the right height for the size of the sprite, but some of the muscle structures are slightly awry. So what I'm going to do is remove all the highlight colors from this sprite, knock this baby down to 3 colors (again). A highlight color, a midtone and a shadow color, and ill reuse the outline color from the legs for the pants.

In comparing the two versions, it is easily visible that the main problem with the torso isnt so much with the torso, but rather the arms. Sadly, another thing that I could make a whole separate tutorial about is anatomy, but as 'Grath' would point out, there are numerous tutorials out there on the net for anatomy, as well as in books and magazines, so I wont go into detailing out exactly what muscle structures needed to be adjusted and how (and another reason for this is an ignorance on my part on a super detailed breakdown of anatomy, heh). Hopefully a visual comparison at this point is sufficient to point out the differences and correction. Structure at this point is everything. Dont bother doing any detail or shading on your muscle strucutres until you are very positive that the base anatomy is correct, because more often than not youll have to wind up changing or all out erasing that nice shading you've done if you find you have to change the basic anatomy later on.

Lets add some muscle detail. Notice the light sources and how it lays on top of the base anatomy to create more subtle muscle groups. As light casts highlights, it is equally important to remember that it also casts shadows.

• Now lets add a new highlight color to bring out those muscles. Check out the arrows on the right example. The white arrows pointing down indicate the source of the light hitting the sprite. The chest and shoulders are accented the most. Another area which is hit but seldom considered is not the abdomen muscles as a whole, but the lower abdomen muscles in particular.

While highlights are important, its also important to consider shadow. Specifically under the arm and around the 'lateral' muscles on the torso under the arms. As with the folds in the pants, darkening these crevices will make the sprite look more round, solid, giving it more of a realistic form. Also note i think i trimmed the top of the head a bit so there was less cranium on the top, heh. Removing that greyish highlight from the hair actually made the head look more clear.

Lets add some muscle detail. Notice the light sources and how it lays on top of the base anatomy to create more subtle muscle groups. As light casts highlights, it is equally important to remember that it also casts shadows.

• Last step in the torso that is ever so important for bulky guys such as Richard is to add the final finishing touches to the muscle structures, creating 'striations'. This requires even more knowledge of anatomy to understand how the muscle strands of a particular muscle group together to form that muscle, or at least how individual muscles form a muscle group. At this stage, we are illustrating these subtle features.

This probably isnt a perfect anatomical rendition of Richard, for example if you stare at the revision at this point his legs might look a bit long in comparison to his torso, but its a bit more accurate and believable in terms of the length and form of his appendages. He looks solid enough to me at this point to display as a casual peice.

Overall I think the original sprite was very solid, a bit more knowledge of 'the muscly stuff', a.k.a anatomy would have done Richard better from the start.

Back