ZX Spectrum and Palettizer Layer Effects
In our first article we covered how we can write a simplified Photoshop-style API for displaying multiple textures on the screen, and we have since extended the code to several extra features:
Adding Parallax scrolling to your XNA code
Adding video layers to your XNA code
Reporting performance statistics in your XNA code
Adding 2D Pixel Effects to Layers
Collection of Layer Effects
I was going to hold off on showing you any more pixel shaders, but I recently wrote one which seems cool enough to show you now!
One of our original ideas for a level in Lunar Panda was for Mr Panda to disappear down a ‘wormhole’ at some point, and enter a ‘retro’ universe. We’d change our screen art so it was pixellated and had a limited color palette, making it look like it would in the ‘old days’ of gaming.
Alas that was never implemented, and shelved for a future game, but that didn’t stop me from investigating whether we could automatically achieve this effect using a pixel shader. It turns out we can get pretty close!
ZXSpectrum
Here’s a couple of screenshots showing the new ‘ZX Spectrum’ effect:
This one shows a level from Lunar Panda, looking suitably ‘retro’. The HUD font isn’t readable, but in practice we would put that on its own Layer, enabling us to further tweak how it would display.
The pixel shader does two things:
- It reduces the effective render resolution to 256x192, using the same technique as the PixelateEffect we saw in the previous article.
- It then goes on to reduce the color palette by rounding each RGB channel to have a value of 0, 0.8, or 1.0. This is as close as I could get to mimicking the palette of the ZX Spectrum without exceeding the limit of how much code we can be put in a pixel shader (whilst keeping compatibility with the majority of video cards).
Unfortunately I didn’t have the ‘space’ to recreate the famous ‘color clash’ seen on the Speccy. Maybe in the future I’ll find a way to add it…
Use the ZXSpectrumEffect class to add this to your code. As always, send us screenshots if you find it useful!
Palettizer
Rather less impressive than the previous effect, but useful nevertheless. This pixel shader reduces the effective color depth so each RGB channel value is limited to how it would look with a specific number of ‘bits’ assigned to it.
The example above shows our ‘London’ image with an effective BitsPerChannel value of 2. (I.e. A maximum palette of 64 colors.)
See the PalettizerEffect class and it’s BitsPerChannel parameter.
You can download the full source from the link below.