Wyv and Keep is a grid-based action/puzzle game following two young treasure hunters into the land of Amazonia. Take control of the duo and use teamwork to solve mind-bending puzzles, navigate challenging action sequences, and find hidden riches deep within an ancient temple. Play by yourself, with a friend locally on one keyboard, or online, dodging fiendish traps, evading cannibalistic pygmies, shopping for hats, and even exploring an active volcano. Even create and share your own puzzles with the included cartographer. All this summer in Wyv and Keep!

Report article RSS Feed 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 ajollycorpse on Apr 26th, 2011
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!

Post comment Comments
mikejkelley
mikejkelley Apr 27 2011, 6:59pm says:

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

+3 votes     reply to comment
DeeCheRay
DeeCheRay Jun 25 2011, 8:40pm says:

Nice tutorial mate !

+1 vote     reply to comment
Post a Comment
click to sign in

You are not logged in, your comment will be anonymous unless you join the community today (totally free - or sign in with your social account on the right) which we encourage all contributors to do.

2000 characters limit; HTML formatting and smileys are not supported - text only

Icon
Wyv and Keep
Platforms
Windows, Mac, Linux, X360
Developer
a jolly corpse
Engine
Custom Built
Contact
Send Message
Official Page
Wyvandkeep.com
Release Date
Released Sep 3, 2011
Game Watch
Track this game
Tutorial
Browse
Tutorials
Report Abuse
Report article
Related Games
Wyv and Keep
Wyv and Keep Single & Multiplayer Puzzle Compilation
Related Engines
Custom Built
Custom Built Commercial Released Sep 1, 2007