[RuneLancer]

I've posted this on a few boards I frequent and figured I'd post here too. Kinda curious what other people's sprite-drawing techniques involve.

I've found myself forced to scale the sprites for Endless Saga slightly because they looked too pixelated to be appealing. I described the method I used to make it look smooth on the ES boards, and figured I'd go all out and share both my method for drawing sprites and for resizing them without losing any quality. Enjoy. :)



1- The face. U-shaped for male characters, V-shaped for female characters. This is a male character, so it's U-shaped. We draw the outline, then fill it in with a flesh tone.

2- Eyes. Easy to draw. Pick a dark color and draw two vertical strips 2 pixels high, 1 pixel wide. Note the placement: bottom pixel touches the intermediate jaw pixel. Add a white pixel next to the eye for the whites, then add eyebrows (just two lines over the eye; usually, the right one is three pixels long but I made it two for this one, to help with the shadows I plan on tossing in in that region.)

3- Shading. This character has no hair so I won't have to edit this, so I might as well do it right now. |_ -shaped edges usually get drawn a pixel darker than the rest of the face. You wouldn't need this many shades, but I plan on making this guy's face slightly obscured.

4- The body. This character has a robe. All's that matters now is the outline, we'll get to additonal bits later. Fill it in with the basic color you plan on using.

5- The arms. Two pixels wide, with shoulders about at eye level. This would look weird IRL, but works fine with sprites. Chop the arms with a black line to give them sleeves and add flesh-colored pixels there to make hands. Those are usually 2x2 pixels or 3 triangular pixels (as is the case here.)

6- Some details. I added shoulder pads (just two 3x1 lines on the shoulders) and a belt of sorts (a slightly curved line crossing the waist.) I've also shaded the hands using the same corners-are-darker technique than used with the face.

7- Figured the pads and belt wouldn't change, so I finalised them by adding a darker and a lighter color.

8- Started adding details to the robe. I picked a darker version of the base color and drew a few outlines to make the "belt" stand out. Also, I drew a seperation for the legs.

9- Added highlights (lighter color than the rest of the image.) The arms got a bit of it, as did the chest area (pecs!) The legs did, too, to give this guy some knees and have them fold the robe "outwards."

10- The sprite seemed too bland, so I added another color, slightly darker than the base color. I just followed through with the highlights and shadows, keeping a roundish form in the lower region and a curved shape around the top part.

11- Time to give this guy a hood. I trimmed a few pixels and made it rounder. Hoods aren't square.

12- Like with the clothing, I gave this guy's hood shadows. I mainly used them to make it look pointier and less rounded, puffing-out.

13- I wanted this guy's hood to have a bit of a pattern to it, so drew some sort of , | , pattern on it with the highlights. Since it's mostly at the bottom, that part seems to stick out a bit.

14a- Like with the robe, I added an intermediate color that follows the basic shape the light and dark pixels give the hood. The sprite is complete!

14b- ...But it's too small so we scale from 16x24 to 32x48. Since the entire gif is 48x72, you don't see the scaling, but the pixelisation's there. :P

15- This requires a bit of judgement. Going over every pixel, I add corner pixels to make the image rounder. Sometimes I trip a pixel here and there when it looks weird. It's mostly a matter of adding and removing pixels to get rid of the blocky pixelisation, nothing too complicated.

16- Finally, I go over every pixel and add an in-between color to make it smoother. The robe, for instance, went from 4 shades to 7.
Old Colors: A B C D
New Colors: A(X)B(Y)C(Z)D

Tadah. :) Your turn. Share your techniques.
_________________
Endless Saga
An OpenGL RPG in the making. Now with new hosting!

[tcaudilllg]

Sprite resizing is difficult no matter what. And hard. Any standardization of technique has significant drawbacks, because every pixel really does count. I can easily spend hours resizing a 16x16 sprite to 32x32.

[Rainer Deyke]

I use scale2x for all my scaling needs. It's not perfect, but it's cheap and easy and my source images are of sufficiently high resolution that I can get away with it.

[RuneLancer]

Rescaling is pretty easy. It ALWAYS requires judgement if you want good results, though, which does take time.

The way I do it, I go through the sprite in two passes. First pass, I depixelate things by adding or deleting intermediate pixels. This is REALLY easy when scaling 3x, but 2x involves a little judgement.

Next step, I simply draw intermediate colors between large obvious areas, to make the transition smoother. Scaling up kinda forces you to increase the color count. ;)

Takes me a good 10 minutes to go from 16x24 to 32x48. Then I have a base sprite I can copy off of, and the others take a handfull of minutes. :)
_________________
Endless Saga
An OpenGL RPG in the making. Now with new hosting!

[tcaudilllg]

Does anyone know of a good HQ2x standalone filter, like precompiled for images?

[Unknown]

RuneLancer how this Pixle art look? (Im kinDa a newbi So Please feel free to Critiqe/comment/suggest ANYThinG *_^)
[img] http://www.members.aol.com/shadowed10566/art [/img
_________________
Most people would succeed in small things if they were not troubled with such great ambitions.

[Unknown]

[RuneLancer]

That looks pretty good. You should look into shading your sprites and tiles, though: a single color can make them look a little flat. Try adding a bit of lighter or darker color here and there to give some form of depth to the images (and try to avoid the gradient tool; that's the "easy way out" and the easy way out never looks too good. :P)
_________________
Endless Saga
An OpenGL RPG in the making. Now with new hosting!

[BadMrBox]

Yuore pretty handy with thoose pixels Runelancer. Me like :).
_________________