HTML and CSS Reference
In-Depth Information
Color Cycling
A very particular problem in video game development is how to display animations over large areas. As you have seen
earlier in this chapter, it's neither practical nor efficient to create a spritesheet of a large sprite because of the cost
associated with having to repaint the entire background. Another big problem with the spritesheet-based approach is
the massive memory requirements to store it.
In the past, game development companies such as Maxis or LucasArts relied on a technique called color cycling
(also known as palette shifting) to display animations in backgrounds in games such as SimCity 2000 or The Secret of
Monkey Island.
As the name implies, the technique consists of cycling colors of certain pixels through a given palette to give the
impression that something is moving on the background. In order to implement it, you'll be using a texture similar to
that shown in Figure
8-13
.
Figure 8-13.
The word “HTML5” seems to be painted with five different colors, which you'll use as your palette
In order to implement color cycling using the texture shown in Figure
8-13
, the portion of the texture that will be
changing is painted with six particular colors. Usually, color cycling requires a custom file that not only allows you
to store color information, but also additional metadata. The metadata is used to indicate which pixels are grouped
together, in what order, what palette to use, and how that palette should be cycled. For example, in Figure
8-14
, each
number corresponds to a given color in your palette.
Method 1
1
2
3
4
5
6
123456
Method 2
1
2
3
4
5
6
5
4
3
2
1
Figure 8-14.
In this figure, each number corresponds to a given colour in your palette
For the sake of simplicity (discussing the creation of a custom image format is outside the scope of this chapter),
you're going to generate the metadata dynamically by cycling through every pixel of your texture. As such, it needs
to be said that one of the biggest downsides with this technique is that it's only fit to be used with 8-bit images (256
colors). Another word of caution is that, as you need to dynamically discover and change the palette, your approach
will be considerably slower than with using a custom image format.
