Color Cycling in Pixel Art
If you’ve ever played a PC game from the 90s, you may have seen a particular kind of animation where certain pixels on the screen quickly switched through a small set of values:
Neato! But what exactly is going on?
This technique, also known as palette swapping, works by changing the color mappings of an indexed image. To be more clear, imagine a paint-by-numbers image:
Each number corresponds to a single location in the color key table in the center. Each number has a particular color associated with it, and wherever that number is used, that color is used. Note that a single color can be assigned to multiple numbers, and each number can be used more than once.
But in digital media, we can change the color that each number cares about dynamically, which causes all the corresponding areas in the image to change too!
Note that not every number has to be cycled; we can keep some constant and have others change. However the same number always corresponds to the same place in the image. In this way, we can produce some pretty cool images, as long as we have a finite color table that provides these color mappings (saving an image in an indexed mode does this automatically behind the scenes). This image, which I completed recently, uses many different cycles all with the same length and rate to produce a neat 8 frame gif, but we’re not limited to collections of sequences that produce neat gifs:
When is this useful?
There are 4 main use cases for color cycling: saving space, as game cues, creating dynamic content, and modeling particulate matter or energy.
Saving Space
Games from decades past have faced problems trying to fit all of their content into limited memory space: Super Mario Land for the gameboy fits into an astonishing 64KB of uncompressed memory! One of the ways games can save space is by having a limited color palette. The Gameboy Color palette for example uses a 15 bit RGB system, allowing for 32,768 colors. If you suppose that a sprite has 64x64 pixels, a single sprite’s color data would take up 60KB, roughly 17th the size of the whole game! By restricting a sprite to 4 colors, color data can be stored once and then each pixel given an index offset instead, giving us 2KB for each image that uses the palette + 8bytes for the palette itself without further compression. If we restrict animations to this palette system, we can still produce some fun effects:
Game Cues
Many games that were already using indexed images found they could use color cycled animations as feedback for the player. In the Legend of Zelda, when the player attacks an enemy, the enemy animates upon being hit:
Notice how the edges of the enemy character do not change, all animation is done by color values shifting. Additionally, these sprites also have 4 colors (likely to use exactly 2 bits of memory): 3 for the art and a 4th as the transparency color.
Dynamic Content
Let’s say you want the player to have some ability to customize in game content, such as his or her avatar. How many sets of sprites do you have to make? For example, for an 33 frame animation with 2 possible outfit colors, that’s 66 different sprites. Now what if you also want 2 different skin tones? 132 different sprites! Clearly this gets explosive quickly, but with color cycling we only need the original 33 in the animation:
Particulate Effects
Finally, we can create some pretty cool effects with color cycling that would be difficult to produce otherwise, especially without an alpha channel. While color cycling can be used to produce any animation given enough time and memory, it is a tool best used in certain situations. Given the general lack of restraints in modern digital art, color cycling can be most effectively used to model particulate movements and patterns such as wind, fire, water, dancing lights, or small swaying undulations. It is less effective in animating extensive and precise movement of characters.
That’s all for this month! In my next part I’ll talk about some of the techniques and technologies for producing satisfying particulate color cycled art.
