{"id":69,"date":"2014-05-04T18:50:47","date_gmt":"2014-05-04T22:50:47","guid":{"rendered":"https:\/\/dorcgames.com\/blog\/?p=69"},"modified":"2014-05-05T13:17:24","modified_gmt":"2014-05-05T17:17:24","slug":"developing-a-palate-for-palettes","status":"publish","type":"post","link":"https:\/\/dorcgames.com\/blog\/?p=69","title":{"rendered":"Developing a Palate for Palettes"},"content":{"rendered":"

\"Super<\/a><\/p>\n

 <\/p>\n

What do kitschy paint-by-numbers kits, Japanese kimono design, animated beer signs, and mood rings have to do with old school video games?\u00a0 The answer, if you’ve been paying attention, is palettes.\u00a0 In this post, we’ll look at how and why palettes exist, what affordances they offer, and insight into this lost art.<\/p>\n

<\/p>\n

Though rarely used in today’s development, palettes–color look up tables built into the video display hardware–played an important role in early 8- and 16-bit hardware, and continued to be used well into the era of 3D-acceleration.<\/p>\n

As an analogy, think of a paint-by-numbers kit:<\/p>\n

\"I<\/a>

“I Painted it Myself!” Courtesy of the Paint By Numbers Museum<\/a>.<\/p><\/div>\n

The image is made up of regions, identified with numbers, each of which correspond to a particular color.\u00a0 This makes it very easy to reproduce the image, and even easier to store it.\u00a0 If we move this into the realm of the digital, we need only store the color’s\u00a0index<\/em> for each pixel rather than the individual red, green, and blue components that make up the image.\u00a0 The video hardware does this look-up as it draws the screen, translating the index into signals to the electron gun inside the TV.<\/p>\n

When people use the term “palette swap,” what they’re talking about is specifying a new set of colors for the indexes.\u00a0 In the image at the top of this post, Mario and Lugi use the exact same paint-by-numbers values in Super Mario Bros.<\/em>, but simply change how those numbers are interpreted.<\/p>\n

\"TODO\"<\/a>

The concept of pre-selected color packages wasn’t anything new, of course.\u00a0 One of my favorites is Sanzo Wada’s 1933 Haishoku Soukan<\/em><\/a>, a 6-volume set which laid out palette selections for kimonos and other Japanese fashion.<\/p><\/div>\n

The classic graphics text by Foley & Van Dam cites palettes as a commonly used technique in display processor technology:\u00a0 Barring the gory details, palettes reduced the memory footprint of images significantly and also eased memory bandwidth issues.\u00a0 For cheap hardware in the 80s, maximizing the CPU was paramount, which meant offloading work into auxiliary chips and keeping the memory bus freed up.<\/p>\n

As an example, the IBM PC VGA standard could display 18-bit colors (6 bits each Red, Green, Blue).\u00a0 A 100×100 pixel image at 18-bits turns out to be 22,500 bytes.\u00a0 However, if we use an 8-bit palette (256 entries, each entry mapping to an 18-bit color as before), our 100×100 image turns out to only need 10,000 bytes…a dramatic savings!<\/p>\n

So while our overall number of unique<\/em> colors decreases, we can employ some of the same tricks that newspapers learned long ago:\u00a0 by putting colors adjacent to each other, we can trick the eye into seeing more than is actually there, or even to seemingly generate new colors altogether.\u00a0 Known as “dithering,” this artform can produce some staggeringly deep visuals using only a handful of unique colors.<\/p>\n

\"Dithering<\/a>

Dithering used to great effect in Castlevania: Circle of the Moon<\/em>.\u00a0 This image uses only 5 colors!\u00a0 For more dithering magic, check out Dan Fessler’s amazing Photoshop plugin<\/a>.<\/p><\/div>\n

Some machines had hard-coded color values:\u00a0 On the ZX Spectrum, palette entry 0 was always black, palette entry 1 was always dark blue, etc.\u00a0 Pac-Man<\/em> has its color palette stored in a special PROM.\u00a0 Other devices allowed the programer to specify the mapping of index to color value and dynamically change them at runtime.\u00a0 This led to cool special effects such as fading the screen to black (interpolating all colors in the palette towards black), flashing a character white when struck (by setting all of their colors to white for several frames before restoring them).<\/p>\n

One could even achieve animation through palette changes.\u00a0 A mood ring, for example, changes the surface of the ring as the bearer’s mood–ahem–changes.\u00a0 By isolating color values in the palette in a video game, you can make a sword pulse with magical energy by making just<\/em> that color index change over time.\u00a0 If you ever saw a character steadily change to red as he was injured in a game, you saw this technique being used.<\/p>\n

Motion can also be conveyed through palette changes.\u00a0 The old Hamm’s beer signs<\/a> (I knew you were waiting for that one) rotated colors to give the illusion of flowing water, or day turning into night and back to day again.\u00a0 By dedicating a swath of colors in the palette, we can use color cycling to emulate motion.<\/p>\n

\"LivingWorlds\"<\/a>

Joe Huckaby and Mark J. Ferrari use palettes to fantastic effect for animation and time of day.\u00a0 Be sure to visit their Living Worlds<\/a> site to play with this interactively!<\/p><\/div>\n

More ambitious coders pulled off strange tricks to display more colors than would normally be possible:\u00a0 waiting for a specific scanline and then re-loading the palette with a new set of colors.<\/p>\n

\"Charles<\/a>

Charles MacDonald’s 64 Color Palette Test Program<\/a> draws the top half of the screen using 32 of the available colors, and then reloads the palette registers midway down the screen to draw the other 32.<\/p><\/div>\n

The mappings were also limited to what the device could actually display:\u00a0 the NES was only capable of outputting 64 colors drawn from the NTSC standard, and of those, only 54 were unique.\u00a0 The Genesis could output 512 colors from the RGB spectrum (3 bits each Red, Green, and Blue).\u00a0 Some 3D accelerator cards had oddball palette support, such as 5-bits red, 6-bits green, and 5-bits blue.<\/p>\n

As the hardware evolved, we started to see more and more specialization:\u00a0 Moving objects (“sprites”) used their own palettes (or section of a larger palette) while the grid-like background (“BG”) used another one.\u00a0 On the NES, the sprite and background palettes are totally distinct:\u00a0 sprites use one of 4 4-color palettes, and each BG tile uses one of 4 totally different 4-color palettes.\u00a0 The Master System allowed BG tiles to use either of its two 16-color palettes, but sprites could use only one of them.\u00a0 To make matters weirder, palette entry #0 is often used as a hardware “clear” color for sprites only<\/em>, letting the background show through.<\/p>\n

In terms of how these palettes were used in practice, here are the most common approaches:<\/p>\n