How Mark Ferrari made 8-bit worlds move with color

At Lucasfilm Games, Mark Ferrari began with the fixed 16-color EGA palette. Early on, he says, the team could not compress dithering: arrangements of different colored pixels that suggest intermediate colors. After he showed what dithering could do, Ron Gilbert helped make it compressible. Ferrari used it to suggest more blues, atmospheric depth, sunsets and sand in work including The Secret of Monkey Island.

Ferrari does not want to return to EGA, but says some of his most creative work came from its restrictions. His argument is personal: a small set of resources can be explored deeply, whereas a constant stream of new tools can leave little time to master any one. He spent roughly ten years with Deluxe Paint 2 and found uses he believes its makers had not anticipated. Watch from 00:44.

An indexed-color image stores a palette position for each pixel; the palette supplies the color at that position. Change the colors assigned to a sequence of positions repeatedly, and the pixels stay put while a pattern appears to travel. Ferrari's animated landscapes use this color cycling, without additional animation frames. Snow and rain can look transparent even though the picture is a single 8-bit layer with no actual transparency. Joe Huckabee's HTML5 emulator made old examples viewable on the web.

This distinction matters: the artist must design both the static arrangement of pixels and how the palette will change. Ferrari's discussion of available software and a hoped-for future tool describes the time of the talk, not a current software recommendation. Watch from 05:51.

10:21View full image

The same indexed picture can also be given a different palette to suggest a different time of day or weather. Ferrari describes an installation whose scene followed the viewer's time of day. For an X-Men game constrained by storage and processing, he reused one background as a valley, clouds and a city, each at three times of day. The underlying shapes do not disappear: a careful viewer can still recognize trees in the clouds. The result is an economical illusion, not nine independently drawn scenes. Watch from 10:21.

For Thimbleweed Park, Ferrari worked with Ron Gilbert, Gary Winnick and David Fox on backgrounds intended to evoke remembered adventure games. The team wanted the feeling of the old games alongside improvements in interface and design. The images shown were works in progress.

Ferrari calls the Photoshop art 8-bitish: visible low-resolution pixels and a VGA-like appearance, without counting colors or enforcing a 256-color ceiling. It aims at the art the team wished it could have made in that era. The distinction separates a visual goal from a literal hardware specification. Watch from 15:32.

Ferrari starts with a rough room sketch and checks difficult features at the intended resolution: a machine may have only a few pixels in which to communicate its parts. He blocks in color, makes templates for pools of light, selects their regions and adjusts color balance. By adding yellow in successive nested selections, for example, he can make a light pool brighter toward its center.

For crisp pixels, he recommends creating the file at its intended size, using the pencil tool, disabling anti-aliasing on tools and selections, and choosing nearest-neighbor interpolation wherever resizing or transforms offer it. Nearest neighbor preserves hard pixel edges rather than blending adjacent colors. He can still soften a jagged line deliberately: select it, offset the selection by one pixel, subtract the overlapping part and adjust the exposed pixels' color.

Hand-placing dither across many backgrounds proved too slow, so the team moved much shading to concentric bands of color. Ferrari also finds it efficient to fill a region and adjust color balance or hue and saturation instead of choosing each color separately. Watch from 20:16.

Ferrari argues that software does not supply artistic understanding. He recalls helping an artist whose desert shadows looked like black blotches. The useful question was where light in the shadow came from: warm sunlight illuminates exposed surfaces, while blue skylight can fill shadowed areas. Once the artist thought about the scene rather than just interface controls, he could adjust it.

Ferrari paints the sky and distant landscape first because they establish the light that informs foreground colors. He looks for contrast in three dimensions: light and dark, saturated and muted, and warm and cool. Even a predominantly blue-green underwater scene can benefit, in his view, from a small warm accent. These are his working principles, not automatic rules supplied by Photoshop. Watch from 30:08.

A day-to-night picture requires planning before the first palette change. Ferrari blocks out the scene, paints one time of day and iterates the same file through the others. If light must travel down a rock, an apparently single highlight can contain several nearly identical palette colors. They look alike in the morning, but can diverge as the light moves.

He generally budgets around three to seven apparent colors for an object and 16–32 for a sky. He tries to reserve half the palette for cycling ramps: a range of palette entries that changes together. Reusing those entries on a static tree would make the tree flash too. A smooth sky can use a longer ramp with subtle steps so the dither is less conspicuous. Watch from 37:30.

In the audience Q&A, Ferrari distinguishes EGA from stricter per-tile arrangements: he says its 16 colors could be used anywhere in the image. For artists working today, he encourages experimentation without assuming the old commercial deadlines and storage limits still apply. Watch from 43:46.

For a repeating pattern, Ferrari makes it once and stamps it; irregular transitions can still require hand work. Old CRT screens blurred and blended dither more than modern sharp displays, so the same pattern may look more visibly dotted today.

For Photoshop, he keeps grayscale dither templates as layers. He selects one gray in the template, returns to the artwork and adjusts its color, then repeats for the next gray. A template can be generated in an indexed-color tool and imported as a bitmap. A contour gradient that follows an irregular shape may require generating the fill in such a tool and bringing it back as a template. These are workflow descriptions from the talk, not claims about current software capabilities. Watch from 41:03.

Ferrari's waterfall begins with a repeated vertical gradient. Short segments at the lip travel fewer pixels during a cycle; longer segments below travel farther in the same time, giving the impression that the water accelerates. Transition colors bridge seams where the end of one gradient would otherwise meet the beginning abruptly and flash.

51:40View full image

Next, a checkerboard interleaves slightly offset copies of the cycling pattern. Alternating pixels suggest overlapping transparent water, although there is no transparent layer. He remaps the same aligned pattern into light and dark ramps to shade the falls without breaking its motion. At the edges, colors alternate between rock and water so the boundary appears to waver.

54:10View full image

The foam introduces another problem: identical cells cycling in phase flash together. Ferrari offsets their starting positions in the ramp so they brighten and darken at different times. Mist uses separate gradients matched to rock and water beneath it. In the original game, the construction also had to fit reusable character-grid tiles. Watch from 50:32.

For snow, Ferrari creates equal-length, synchronized ramps. Each contains a white snow color, while its other colors resemble a particular background family. He stamps aligned copies of the same pattern through masks over dark brown, green and other regions. White dots appear to fall over the picture, but are embedded in it; close inspection can reveal background-colored trails. Rain uses a similar approach.

62:30View full image

A one- or two-pixel border cycling between foreground and background colors can make a fish tail, coral or a reflection appear to waver. Flames use ramps of different lengths and speeds to avoid synchronized flashing. For firelight and storm clouds, aligned moving textures remapped into different brightness ranges create the impression of a transparent moving layer over a shaped surface. Watch from 61:18.

Ferrari estimates that an old image could take two days to a week and a half, depending on complexity: roughly a day and a half for moving water and as much as a week and a half for falling snow. One Spyro scene also had to be built from roughly 200 reusable 8×8 characters. For the Storm backgrounds, he saved palette space for effects such as wind.

For a small object, he suggests roughly one to three highlight colors, one dark turning-edge color and one to three shadow-side colors affected by reflected light. Arrange them as a ramp from highlight through the darkest turning edge to shadow, and a gradient fill can shade a tree trunk efficiently. Larger forms may need more colors.

The process can be automated in part. Ferrari recalls a friend's tool that matched prebuilt cycling gradients to the background under the cursor, allowing an artist to paint falling snow. He is candid that manual work is tedious. The original technique answered storage, processing and refresh-rate limits; its continuing value, in his view, is the creative thinking that comes from working within a manageable system. Watch from 69:08.