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

Question

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.

Answer 1

You should apply your shader AFTER your sprite has been rotated.

If the whole scene has not been shaded yet and your sprites are actually pixelated, what you need is some kind of post-FX filter for your whole scene. Averaging regions of pixels will work ok. It's not exactly what you intend (it'll look kinda dithered when moving/rotating) but it might do the trick.

The only way to keep that retro look truthful to what you want is to actually draw your sprite rotations yourself. It has nothing to do with how scaling was implemented: the resolution was actually poor, speaking of which, did you try with extremely low resolutions? It might also do the trick and will look more natural since, well, it's actually what caused the effect you're looking after. And it's cheap! VERY cheap! In fact it'll be cheaper than what you already have (less fragment shader executions.)

The effect is ruined in your sample image because your resolution is high compared to your sprites, so it lets you see the real pixels on the scene.