Social

The Pixel's the Limit

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

PrintView Printer Friendly Version

EmailEmail Article to Friend

References (15)

References allow you to track sources for this article, as well as articles that were written in response to this article.

Reader Comments

There are no comments for this journal entry. To create a new comment, use the form below.

PostPost a New Comment

Enter your information below to add a new comment.

My response is on my own website »
Author Email (optional):
Author URL (optional):
Post:
 
Some HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>
« Architecture? For sure! | Main | On the Précipice »