The Pixel's the Limit
Saturday, January 31, 2015 at 5:57 PM
Adorkable Games in devlog, fantasticjack, fantasticjack

As we've discussed before, we're trying to design a system to display transitions back and forth between real and fantastic--that is, imaginary--environments. And whatever system we choose has to fit the pixel art style of the game.

Part of this system must account for changing the sky. Recently while walking to lunch I was watching the sky, trying to figure out how to make our sky morph into different shapes while maintaining the limited color palette, when I remembered Dan Fessler's tutorial for dynamically converting regular Photoshop art into pixel art. I realized that we could adapt that technique to work in our game!

It's actually a really simple technique. Just paint a grayscale image with as much detail or softness as you want, then let the computer automatically flatten it into a few shades of gray. Afterward, you can swap those shades of gray with a custom color palette.

The tutorial focuses on how you can use this to paint images more quickly, but I had a hunch that we could use it to transition between completely different images during gameplay.

I also selected a color gradient for each image. So while the images are blending together, their color palettes blend together too.

Technically, the flattening effect removes definition from the images, arguably reducing their quality. However, I find that the borders between flat colors form interesting and aesthetically pleasing shapes. Moreover, I was pleasantly surprised to find that those shapes morph dynamically if I just let the underlying images crossfade into each other. It feels almost like cheating, and if I turned off the color flattening effect it would be pretty boring to watch images crossfade back and forth. Eventually, we probably will add more moving elements to the sky to make it even more dynamic, but for now I'm pretty happy with the effect.

–John

Article originally appeared on Adorkable Games (http://www.adorkablegames.com/).
See website for complete article licensing information.