next »

[Jesse]

Hi all! Jesse here from http://www.jollycorpse.com

Have just begun a short tutorial on spriting the very very small, and thought I would share. There'll be three more parts upcoming. Enjoy!

Through the Magnifying Glass: Part One

The most challenging part of creating small sprites for retro games, and what makes it an extremely difficult skill to master (I'm still working on it constantly...), is that you have a very limited area in which to work, and are forced to convey details within a tiiiiny space. It necessitates looking at things in a whole new way, and deciding what it is really that you need to communicate in a particular work. It requires extreme patience, and a sharp eye for "pixel pushing". Pain in the ass? Well.. sure. But small sprites are still used just about everywhere, so it's an excellent thing to practice, and one that'll help in all your art, big and small.

If you're not familiar with the basics of spriting, such as outlining, coloring, and shading, I'd direct you to check "spriting tutorials" on Google, because many artists far better (and let's face it, far smarter) than I have already written a multitude of step-by-step tutorials on the subject. Specifically Derek Yu's is great, as it explains each step in detail, and doesn't involve Pokemon, a theme that seems to pervade many of the others...

Here though, we're dealing specifically with the very very small. In Wyv and Keep's case, 16x16 small! 256 may be a big number for some things, like Final Fantasy games, or kicks to the groin, but for pixels it is not. Wnk's engine runs on a slew of little 16x16 tiles stuck together, and while the new build allowed me to add a couple dots to the heroes themselves, they're still confined to a general space of 18x18, which ain't much bigger.

The Problem

Working at this scale I quickly found that many of the normal rules become difficult to apply. For instance, how does one outline something that's a mere three pixels wide? Or how about two, or even one? It's impossible in the conventional sense, as the outline soon becomes equal in size to or even larger than the main color itself, effectively altering their roles. Let's look at an example:

Here we have a beautiful antique clock not unlike the kind that you might find in the Time Wizard's castle. Outline-only on the left at 128, 64, 32, and 16 tall. Right, colored and shaded at the same.

At 128 both look great! Reduced to 64, they're still in quite decent shape, though there's already some noticeable problems in the more complicated areas. At 32 and especially at 16, the simple outline versions quickly become entirely incomprehensible. The colored sprites fair a bit better, but have changed shape and lost virtually all detail. Getting too small we soon lose our way, and end up with something that looks nothing like we want.

These problems arise because we always rely on the amount of space, i.e. number of pixels, given to a certain color in order to establish it as the main hue, the shadow/highlight, or the outline. So when all these attributes are fighting over single pixels, it's easy to lose not only your way, but your mind as well...

Here you can see the old versions of Wyv and Keep, and that I've seemingly succumb to some of these problems, resulting in a lack of contrast and detail, and quite lazy outlining.

I thought they looked decent enough at the time, but as I began to draw Wyv and Keep full size, and we continued to update the look of the game, it soon became clear that the sprites weren't good enough. I decided to see what I could do about these pesky problems, and how I could efficiently get better looking sprites at such a small level.

In Wyv's case, I was let off easy, 'cuz he's a bit pudgy, making him a pretty simple sprite. A few minor additions and a bit of playing with the outline and shadows and he was good to go.

What method did I use? Well, at this point I hadn't yet been forced to develop a method. But when I set about trying to convey the leggy, shapely, feminine wiles of our heroine Keep all within a mere 18x18 pixels, I was confronted with a far trickier task. As you've seen, my first try was neither leggy, shapely, nor feminine...

So how did I get to the current version? Well, turns out you can draw just about anything as small as you want. Stay tuned for part two to find out how!

[Derakon]

It took until I saw the "buttons" label for me to realize that Wyv is a guy in a red coat, not a dwarf with a red beard. One of the dangers of tiny spriting, I guess.

Best of luck with the rest of the series!

[Jesse]

Haha! Maybe I need to take a bit of my own advice? 

I've added a few more frames from his animations to clear that up!

[allansson]

This was a really interesting read. Can't wait for part two...

[Jesse]

Through the Magnifying Glass: Part Two

Welcome back! Last time we looked at the problems in trying to draw small sprites. So this time let's dive right in and start looking at how to solve 'em!

Overemphasizing

The first important step, I found, in doing especially tiny sprites, and what I'd been unsuccessful in doing the first time around, is deciding what it is that really needs to be emphasized in the art. When you have a lot of pixels to work with, it's easy to add as much detail as you want. But when you have a severely limited space, you must decide which details you can live without, and which you need to exaggerate in order to keep the overall look, and more importantly, the overall feel of the sprite.

Of course, what you'll want to emphasize depends on the style of your game. If you're going for a realistic style, the most important things may be color, lighting, natural proportions, etc. In Wyv and Keep we combine a semi-realistic painted style of background sprites together with cartoonish characters and animations. For this tutorial, we're focusing on how to make something extremely tiny but still instantly visually comprehensible. To do this, we first use a process called overemphasizing.

Let's look at our clock again. What are the things that need to be emphasized in order for it to translate well to a 16x16 sprite?

First, and most important, is the actual clock face, because we must be able to tell what the item is right away. We can see the 16 and 32 pixel tall sprites have already failed here, as imagining seeing them for the first time they look more like an olde tyme rocket and a bundle of TNT. The pendulum is nearly as important, as it conveys much about what type of clock it is, balances strongly against the clock face, and uses the nice gold color to contrast. The pendulum's been underemphasized in the 32px sprite and completely lost in the smallest. The spiky decorations at top and bottom contribute much to the overall feel, so we'll need to find a way we can translate this fine detail into a tiny space, which we already know we haven't been able to so far. And we'd like to keep the ridges as well, as they frame the object, providing it structure horizontally. These have been lost in the smallest version, and are not even so clear in the 32px version, despite being outlined.

Perhaps even more important than these is the overall shape of the object. The long ridges near the top and the bottom extend past the body of the clock, making a sort of concave lens shape. The decorations add triangles to the top and bottom. This is the shape we need to mimic in the small sprite. So why is it difficult to get the clock to keep this shape when you resize it down? Well, the problem comes in trying to keep ratios inside the sprite consistent. Because the original large sprite is quite tall and thin, we try to keep this proportion but inevitably lose the horizontal detail because there simply aren't enough pixels. Notice how the red arc loses shape completely by the smallest version. What's the answer? Overemphasize the shape, too!

What's NOT important? Well, the actual shape of the spikes isn't such a big deal, as long as we can figure out how to keep the impression of them. Neither are the specific curving, layered details in the columns to either side, which do contribute at high resolution, but are not prominent enough to need emphasis.

Add up all these areas of emphasis, and we end up with something like this:

We can see here with everything we listed having been exaggeratedly drawn. The clock face is much larger, as is the pendulum. They're close together now, but that's okay. Each individual spike hasn't made it, but the overall effect is strong, and that's what's important. The ridges have been exaggerated too, keeping the horizontal framing and helping with keeping the proper shape, which has been overemphasized itself.

The clock has gotten slightly wider, but has gained back that concavity it lost earlier. It may look as though it's gotten stockier, losing some of the long thin shape from the original clock, but we've taken care of that by overemphasizing the other parts of it. Take a look at this screenshot (bookcases and such by Beau!). Which clock looks best to you?

Left is reduced to 16 via standard bicubic reduction, middle-left is reduced via nearest neighbor, middle-right is our first manually sprited 16x16 clock, and right is the newest version. Even at this tiny size it's crystal clear that our right version is a clock, with a pendulum and decorations on top and bottom, and that it has a horizontal frame as well. It's much closer to the original than the others. You can even make out the little gold squares at the bases of the left and right columns!

Now let's take a look at Keep. What parts of her would need to be overemphasized in order to translate her into a tiny sprite?

Clearly, Keep's defining visual characteristics start with her long, flowing, golden locks. In addition, we have her long legs, her high heeled boots, her feminine chest, and her thin arms. Believe it or not, Keep used to be a bit stockier (as evidenced by the original Wyv and Keep promotional poster), but most guys like a girl with shape, and even the ladies around me in real life didn't seem to care for the first stumpy, unfeminine version, mentioning that she was much cuter in my newer sketches than in the game itself. That's when I decided it was time to do a new sprite. I made sure to overemphasize these features when I redrew it, and we finally got the new version:

You'll notice that after going through this process of overemphasizing, Keep (unlike Wyv) doesn't really even have much of a torso anymore, save her bosoms. Her three-pixel chest goes right into her legs, which take up nearly as much space as her head. Her heels are more prominent than Wyv's shoes, and her over-stressed thighs help to distinguish her from her partner and to keep her feminine. Her arms are a bit thinner than his as well, and the final touch is adding her exaggerated locks of golden hair. The result is a much more attractive Keep that the old version can't hold a candle to, and one that provides a much more fitting counterpart to the rotund male treasure hunter.

Oops! Looks like we're out of time again for today. So as for just how we actually DRAW these sprites, I'll finally tell you next time!

follow us on facebook!

follow us on twitter!

[jotapeh]

I quite enjoy this tutorial and I think you should continue it. However I can't help but wonder if maybe your sprites might look better with fewer colors? I feel like even though you've overemphasized the details, the gradients muddy some of the detail rather than add definition.

I'm no pro spriter though so that's just my gut feeling not a professional opinion

[happymonster]

I agree, I think it would look clearer with less shading and colours.

[Jesse]

Hey guys! Thanks for the feedback! I will continue the thread, writing part 3 now. I think there'll end up being four total.

As for the number of shades, I see a lot of great pixel work on here that uses very few colors and little shading. And in fact, I normally start small sprites with a small number (gonna show that in the next part). But I don't think one necessarily looks better, and think it just comes down to the style of the game.

Wyv and Keep's background art is heavily shaded and looks slightly realistic, in contrast with the characters, so with too few colors they're separated almost too much. The slightly realistic shading on the animated sprites helps them inhabit the world a bit more. This is clearer of course when you see everything in action, but I'd hoped to do a separate animation tutorial next!

(This is 2x)



Good points, though! I didn't think about that when writing, I'll try to address it next time!

[happymonster]

It doesn't quite work, but I thought I'd give it a go anyway:

[Jesse]

Through the Magnifying Glass: Part Three

Okay! So last time we talked about how to select which features in a subject need to be emphasized in order for it to read well in the miniature, and saw that these attributes had to be overemphasized in order to make this happen. Now let’s get into the dirty of it, and make the damn things!

Beginning the Sprite: Painting

One of the common methods for beginning spriters is to start with an outline and then go from there, much as we do with a basic drawing. This is because these days a lot more of us grow up doodling with pencil and paper in classrooms and in sketchbooks much more than we paint.

For larger sprites, this is a perfectly fine method. You can see this quick pixeled outline of the larger Keep is reading fine, and we could go on from here filling in, shading, highlighting, and anti-aliasing. But when it comes to the smaller, actual sprite on the right, it’s clear that we’re going to have a massively tough time doing this. The hair and face are still mostly present, but pretty much everything else is just a mess, and we can’t tell what’s outlining what, or where color should go, or... well really anything. So it’s unlikely you’d want to even attempt to start from here when working in the miniature.

Instead, let’s forget about outline for now and start with color, painting in the the shapes.

If you paint the main hues in the basic shape of the forms, it’s much clearer what’s happening in your sprite. The idea is much easier to grasp, even with only a few colors and simple shapes. I’ve added outlining only in-between sections of purple, where I needed to separate her mask, breasts, and legs/arms. All parts of Keep are present and accounted for, in something of a decent shape. I use this technique in larger sprites as well, and for any beginners who are stuck with the outlining method, I suggest you try it out, as you may often find it easier than starting with an outline.

So, you say, that’s all well and good, Jesse, but the sprite’s not especially impressive. Right you are! It most certainly is not. On to the most important, and most difficult part.

Detailing: Combining Outlining, Shading, Highlighting, and Anti-Aliasing   

Daunting? Maybe. But hear me out, because this is simpler than it sounds.

In larger sprites, it’s easy to break all of these things into steps and then progress through them. Add main hues, add shading, add highlights, anti-alias jagged lines, etc. But in smaller ones, it’s often the case that it’s not so simple: you don’t know which of these four things a certain pixel needs to be in order to look the best. You’ll have to use a bit of trial-and-error at first.

Basically what this comes down to at first is adding an outline to the main shade, identifying problem areas, adjusting them, adding shadow and highlight, identifying problem areas, adjusting, adding anti-aliasing, adjusting, and repeating that way. And remember to zoom out and look at the sprite when it’s small! You’ll be able to look at it in a different way and get a new perspective.

It’s a bit tedious at first, but you’ll quickly build an eye for it and develop a subtle personal touch, and soon won’t have to rely on trial-and-error, but will be able to identify conflicts beforehand and retouch appropriately right away. So let’s get to it!

I’ve started with just the hair, headband, and face/mask, so that we can identify what’s going on.

(1) In step one I’ve added a simple outline, picking darker versions of main colors, and we can already see some areas that are going to be a problem. The mask is blending badly into the eyes, and the headband has lost nearly all of its color, so a full outline isn’t going to work. Let’s fix these problems as we continue to step number two and start shading.

(2) Here I’ve added some darker color to the hair and face, and while doing that, begun to do a sort of anti-alias/unshade to the headband and mask. The locations where you want to do this are those where the outline is not as important, and you imagine would blend more in real life. For example, I’ve left the outline of the headband at Keep’s forehead intact, but substituted the main shade as it goes back toward her ear. I’ve kept the dot for her nose dark purple, so it’s more prominent, and gotten rid of the mask outline under her eyes, using shading instead. We see some problems here in the hair outline now looking a tad harsh, and also on the right side of the face (her left), which I have sticking out for her ear, which makes her look a tad fat. So let’s fix these next.

(3) In the third frame we focus on highlighting, and change some of her hair outline to the lighter shade color where it would hit an above light. The headband gets a highlight from the same light, and we change some of the facial outline on our right to show her blonde hair instead, making her face less plump. I’ve also added eye shadow, some facial highlights, and a bit of her hair peeking through the headband. You can see already the head is starting to look much more like a finished sprite!

We’re going to repeat the process a bit more quickly for the rest of her, finishing up her arms, chest, legs, and high heels. Try to keep up!

(4) First we add an outline to her hands, arms (as best we can), high heels, and thighs, but we can already tell we’re gonna have problems with her legs. We’ll deal with it in shading.

(5) The biggest change here is the addition of a shadow behind our heroine, masking some of the hair and the area between her legs. This makes it easier for our eyes to focus on her heels and thighs, where they should. The purple areas on her legs get shading through most, to blend into the shadow, and make her chest more noticeable. I’ve also reshaped her gloves a tad, so they look less like she’s sticking her hands out diagonally, and retouched her arms to match the new pixel of glove creeping up into them.

(6) Here we’ve added highlights to her arms, the right thigh (her left), her heels, changing some of the outline to a highlight, and to her chest. Lastly I’ve replaced a pixel of her chest outline with flesh color, to blend her legs in better.

And voilà! Our tiny sprite is complete!

There’s still a bit of trial-and-error, and in some parts we’ve ended up with the shade that was present at the beginning, but that’s perfectly okay! It’s all part of the process. And the good thing about small sprites is that once you’re quick, it doesn’t take long at all. So emphasize, patch color, and detail, and practice, practice, practice. Next up: Animating Tiny Sprites!

...

P.S. For any of you saying "but Jesse! You didn’t do it in 16px!! This undermines your entire method!" Blasphemers! How dare you doubt me:

[Jesse]

It doesn't quite work, but I thought I'd give it a go anyway:

I like your interpretation of Keep, and arguably the proportions of the sprite are closer to the original pictures. But I think you've lost some of the cartoony feeling of the originals, mostly in the head, because you haven't overemphasized. This is one of the dangers of spriting in the miniature.

I also argue that you've lost readability, rather than gaining it, by using less colors. Consider your sprite with the same colors, but more shading and highlighting, and a tad more contrast:



I haven't altered the shape of the sprite, simply added shading and rearranged some pixels to help anti-alias. It's my opinion the second reads clearer, and also holds closer to the feeling of the original.

What do you think?

[happymonster]

Hi Jesse,

I think some bits look much better (the hair, the arms and her chest) while others lose contrast with surrounding areas in the more shaded version (the thighs/boots and face/mask).

I agree that it might be that her head needs to be bigger to work properly, but your design is very busy for a small sprite, maybe too busy?

Your breakdown of how you did the sprite is very good! However I do think the shape of your interpretation is too wide and she looks overly stocky to me.

It's your work at the end of the day though..