Palette lookup image

Posted by (twitter: @vilcans)
November 24th, 2012 6:10 am

In my charity game jam project, I’m doing real-time raytracing.

Real-time raytracing!? On a NES?

Yes. Not very realistic, I know.┬áBut at least I’m restricting the resulting image to use the palette of the NES.

What I do is for each true colour in RGB format, I map it to the closest colour in the NES palette. Well, actually I don’t do that. A GLSL shader does that. And it uses the following image as a lookup table.

Click to enlarge to 1024 x 32 pixels. Feel free to use this image if you too need to map RGB to the NES palette.

As you can see, the image contains 32 squares of 32×32 pixels each. The red component has the same value inside each square, and varies from zero in the leftmost square and full in the rightmost square. Within each square, the green value is mapped to the horizontal coordinate, and blue to the vertical coordinate.

So what you need to do to convert a color to the NES palette is to convert R, G and B to values in the range 0 to 31. (Just divide them by 8 and round down if you use 8-bit RGB). Then look up the pixel at

x = R * 32 + G
y = B

Here are screenshots of the resulting rendering from Firefox and Chrome respectively. I added some ordered noise to the RGB values before submitting them to the lookup image, to get some dithering.

(I haven’t found out how to do a 2x scale on a canvas in Chrome and have it rescaled without smoothing. This is why the Chrome screenshot is blurry.)

Oh, and a plug: If you’re in Stockholm, come join our real-world gathering for Ludum Dare 25.


Leave a Reply

You must be logged in to post a comment.

[cache: storing page]