# How to create a “retro” pixel shader for transformed 2D sprites that maintains pixel fidelity?

The image below shows two sprites rendered with point sampling on top of a background:

• The left skull has no rotation/scaling applied to it, so every pixel matches perfectly with the background.
• The right skull is rotated/scaled, and this results in larger pixels that are no longer axis aligned.

How could I develop a pixel shader that would render the transformed sprite on the right with axis aligned pixels of the same size as the rest of the scene?

This might be related to how sprite scaling was implemented in old games such as Monkey Island, because that's the effect I'm trying to achieve, but with rotation added.

Edit

As per kaoD's suggestions, I tried to address the problem as a post-process. The easiest approach was to render to a separate render target first (downsampled to match the desired pixel size) and then upscale it when rendering a second time. It did address my requirements above.

First I tried doing it Linear -> Point and the result was this:

There's no distortion but the result looks blurred and it loses most of the highlights colors. In my opinion it breaks the retro look I needed.

The second time I tried Point -> Point and the result was this:

Despite the distortion, I think that might be good enough for my needs, although it does look better as a still image than in motion.

To demonstrate, here's a video of the effect, although YouTube filtered the pixels out of it:

http://youtu.be/hqokk58KFmI

However, I'll leave the question open for a few more days in case someone comes up with a better sampling solution that maintains the crisp look while decreasing the amount of distortion when moving.

• That's supposed to be a skull...? – DeadMG Apr 7 '12 at 15:48
• @DeadMG An ox skull, I guess? – David Gouveia Apr 7 '12 at 15:54
• Nice effect, looks better than I thought it'd look (I tried it on EXTREMELY low res and palette, 40x30 EGA.) That's pretty much the look you'll get making your own postfx shader. BTW, I doubt there's a better sampling solution that keeps the effect as you intend. NN is pretty much what gives that crisp look, any other sampling will blur the final image (just guessing anyways.) – kaoD Apr 7 '12 at 16:45
• @kaoD But remember that I'm applying two passes. The second pass which upsamples the image will still be nearest neighbor to preserve the retro feel. But I think there might be some benefit in trying different sampling techniques for the first pass. I'm currently looking into Scale2x! – David Gouveia Apr 7 '12 at 17:00
• @kaoD Nah, I give up. Changing shader parameters between each sprite call with SpriteBatch requires me to use Immediate mode, so it's not worth the trouble. I'll go with this :) – David Gouveia Apr 7 '12 at 18:07

• Yes, I'm not using any shaders yet. It's just regular sprites with very low resolution textures, rendered with XNA's default SpriteBatch with point sampling turned on. But a post-fx might really work out. For starters, I'll try rendering with linear sampling to a render target, and then render the entire render target to the backbuffer with point sampling. – David Gouveia Apr 7 '12 at 15:06