How to create a "retro" pixel shader for transformed 2D sprites that maintains pixel fidelity?
- by David Gouveia
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.
