Tuesday, May 28, 2013

Pixel Art Evolution

I've been working on a dungeon crawl cooperative ARPG with my children in the evenings. Our emphasis is on design and interaction, not graphics. To keep art time low and accomodate the very small characters, I chose a 2D pixel-art style. I began by purchasing low fidelity 8x8 sprites from Oryx Design Lab and upsampling them using hq4x (in this case, using Darnell's Depixelizer). This enabled me to bring the implementation to playtesting  in a few hours. Having reasonable initial graphics was important for my co-designers, who aren't as willing to identify with programmer art.

As the game became more refined, I revisited the sprites and redrew many of them to add increased detail and match the features of their corresponding character portraits.




The images above show the evolution of two characters: the human female Ranger (currently named d'Arc) and the dwarven male Builder Crefftwyr.  This is frame 0 of each of their idle animations. The in-game shots are less sharp because the engine renders at fixed high resolution and then filters down to the current screen resolution. The result reminds me of the early game consoles of my own childhood when displayed on 1980's television.

To make the Ranger appear female, I narrowed the waist by one pixel on the upsampled size, pulled in her right cheek, and added long hair. To make the hair stand out, I traced a thin dark outline around her cowl. The final touch was adding a small mouth. Many of the other male characters (not shown) look acceptable without mouths, but somehow defining the mouth increased a sense of delicacy and precision in the face.  I tried adjusting the neckline of her shirt, but at scale it just read as a larger head and not an exposed neck.

The challenge in drawing the Builder was emphasizing the classic fantasy dwarven racial characteristics at small scale.  I pushed his head down so that he fit in 8x7 instead of 8x8 and then cheated and shaved another pixel off his legs in the upsampled 32x24 version.  Making the right-side eye triangular and drawing in an eyebrow gave the appearance of a large nose.  I thickened his arms by one pixel and raised the shoulders to increase the hunchback appearance.



Morgan McGuire is a professor of Computer Science at Williams College and a professional game developer. He is the author of The Graphics Codex, an essential reference for computer graphics that runs on iPhone, iPad, and iPod Touch.