Line weight thickness in sprites

One of the first techniques illustrators are taught while learning cartooning is how to vary the weight of their lines. Helpful for pencilers and downright vital for inkers, it’s a trick that provides several benefits, like adding depth by simulating shading and adding visual interest by preventing every line from looking the same.

So what do inking techniques have to do with pixels? Pixel art is an entire world of unique styles and techniques unto itself (anti-aliasing, dithering, etc), but there are also ‘traditional art’ methods that can carry over and be translated into pixels with equally helpful results (color selection, exaggerated animation and so on). Line weight variation.. well, that’s not one you hear much about. In fact, there are plenty of reasons to not use it: smaller sprite styles like overhead RPG don’t have the room, and larger hi-res styles would require more work to animate them consistently. Plus, game sprites are generally seen at a distance away from the camera, and distant objects are usually supposed to be illustrated with less emphasis on lines.

But the principle of line weights can still come in handy in different ways while rendering mid-sized sidescroller or fighter sprites. For instance, toning down outlines in light areas, deepening lines in shadow areas and making inside lineart more detailed.

Giving special treatment to your lines won’t necessarily produce enormous results that’ll be readily noticed, but it will add an extra dimension of visual interest to your work.

Outline styles on sprites

There are multiple ways to treat outlines on sprites. One common method is to use a dark colored outline and use anti-aliasing to blend it in to its surroundings, a technique known by some as selective outlining.

Selective outlining, where a sprite’s outline is anti-aliased to smooth into the inside color and kept darkest near the edges to separate itself from a background

Another way to get lines to stand out is to make them black. Since black outlines mimic the inking style we’re trying to imitate, we’ll focus on that. The use of black in sprites is a whole separate topic, but the important thing to know for black outlines is that they can help keep your 16-bit sprites within their 16 colors (since you can use the same black outline along multiple colors). It can also be used in conjunction with selective outlining too, making it good and versatile.

Whether or not black outlines will look good on your sprite, however, depends on the style. If you’re going for something with lots of linework and less emphasis on shading, then it has a good chance of blending right in. But otherwise, beware. Black is a stark color that often requires extra transition colors to blend in, especially on large sprites.

1) Lots of different colors, minimal emphasis on shading? Black outlines are a go. 2) Lots of shading, minimal line work? Beware of black. 3) Even when you have a good focus on both lines and shading, black is dangerous and jarring– especially with a vibrant color palette. You have to do tons of anti-aliasing.

That’s enough for theory, now let’s see an example of what various kinds of lines can do.

Inking in full art and pixel art

We’ll take an example of some comic art and see how it works in pixel format. Jack Kirby art works well here. Inking back in his day had to be thick and extra-readable since comic pages were reduced by clunky printers that constantly lost detail in the process. And shrinking this to sprite size definitely qualifies as reduction.

resized and cleaned

Even at this tiny size, those black inks still describe their forms quite nicely. Notwithstanding the nightmare it’d be to animate that verbose inking style consistently, this would make a pretty neat sprite. The inking definitely gives it the ‘comic’ look, but notice why: it doesn’t have any shading getting in the way of the inks’ job. It’s just flat color and the (anti-aliased) inks. At sprite size, adding colored shading into that mix would clutter up the space and make that already detailed inking harder to read.

Alright, so say that you wanted a style that could be animated. No elaborate comic inking style, just salvaging the line weight technique to achieve a middle ground. Let’s focus on the skin area to illustrate. We can eliminate the inside shading and just use the blacks for outlines…

but then the sprite starts to look flat, and vital amounts of detail are lost. It definitely needs shading to complete the figure. Add that in..

and now you have a style that can stand on its own. But now we start running into other problems. The black is such a steep jump from the darkest skin shade that its pixels begin to look jagged. And if you overlay this sprite onto a dark background, you’re going to lose sporadic parts of it:

So let’s tone down the blacks by changing them to dark color. This way, the outlines won’t require extra pixels to smooth them into the surrounding color.

Ah, here we go. Still keeping the thick, juicy lines around the curves and shadow areas, and light crisp lines near the light areas — but now they don’t pull the sprite out of its surroundings. Let’s take a closeup look at how that works:

1. 1) You can use the darkest color as regular inking for inner areas like strong cast shadows.
2. 2) Don’t be afraid to give your outlines a width of more than 1 pixel, especially around the underside of curves.
3. 3) The inking of interior details can be enhanced by following the contour of a transition from light to shadow (as the inking fades off, the light-shadow edge carries it further for an even finer fade).
4. 4) You can use heavy lines that quickly fade before meeting each other to suggest a fine line in between.
5. 5) Sometimes you might want a large area in pure shadow. You can use the outline color for the whole area if it doesn’t require linework.
6. 6) Again, a small area of 2-pixel-width outline can really add a nice accent to a curve.
7. 7) The opposite of thickening your lines: letting your lines fade out. Since pixels are just points of light, they have a slight blur when displayed at their natural 100% size, so take advantage of that to simulate a line fading out smoothly. (Note: don’t overdo fades. just use 1 pixel to fade, otherwise it might look like you’re trying to dither the area).
8. 8) Fading outlines at the edge of a curve in the light can simply be a matter of changing over from dark outline colors to lighter colors.
9. 9) More examples of thick outlines adding depth the way traditional inking would. No anti-aliasing necessary.
10. 10) When a cut in the silhouette would be too much for a subtle curve, use an outline to draw in the detail.

 
Again, this isn’t a trick that makes or breaks a sprite, but when you’re dealing with a character 120 pixels high, little changes like these are a significant percentage of detail.