Post tutorial RSS Through the Magnifying Glass: Part One

The first in a series of tutorials identifying and attempting to deal with some of the problems in creating very small sprites. Useful (hopefully) for amateur and indie game developers who are going for retro looks in their games!

Posted by on - Intermediate UI/HUD

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 artistsfar 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!

mikejkelley - - 874 comments

Cool cool cool! Very informative and helpful! I have a greater respect for sprites now! :)

Reply Good karma Bad karma+3 votes
DeeCheRay - - 2 comments

Nice tutorial mate !

Reply Good karma Bad karma+1 vote
Post a comment
Sign in or join with:

Only registered members can share their thoughts. So come on! Join the community today (totally free - or sign in with your social account on the right) and join in the conversation.