Skew a sprite at runtime while preserving the pixel shape?

Questions & Answers
1

Hello,

I currently use a 4x4 transformation matrix within a vertex shader to skew (or is it shear?) my sprites. It works but it is also skewing the shape of individual pixels which gives a weird look to my pixel art.

Transformed by my current shader:
87591-circletransformedshader.png

Transformed by Gimp’s perspective tool, notice the pixels are still square:
87592-circletransformedgimp.png

  • What would be the best way of skewing
    a sprites without affecting the pixel
    shapes?
  • Is there a trick that could be used to correct the result of the vertex shader? Force all edges to be either vertical or horizontal? (that one is for you shader gurus… I know your out there!)

FYI I have also tried applying my transformation matrix to the texture coordinates but it’s giving similar results. I have also came accross an opengl article mentionning something about modifying the coordinates while doing something similar to a tex2d lookup but I didnt quite get it and lost the link :frowning:

EDIT: Hey followers!
Ok, no definitive answer but there’s lots of people following this. How about a group brainstorm? Pitch in some ideas! No matter how far fetched it sounds just pitch it in, worst case it will serve to elimiate what doesnt/can’t work. Personally my shader knowledge is limited but im sure that as a group we can manage it! I’ll update this question with our R&D results as we go.

What doesnt work:

  • 4x4 Transform matrix on the vertex also skew the pixel shape
  • 4x4 Transform matrix on the texture coordinates also skew the pixel shape and causes the texture to move outside the sprite’s mesh, making parts of it disappear.
2

If you’re going to do this at runtime, you’re probably going to need to write a specialized shader to do so.

The way to do it would be as follows:

When taking in the UV coordinates, multiply them to the target resolution and middle them (like a mix of floor/ceil, leaving you with a .5 after the decimal), then bring them back to the 0-1 UV space. This will get you a non-blended UV no matter the scale, as if you were turning off texture filtering.

From there, you can apply your skew function to the modified uv to get the lookup value from the source texture, and output it through the return value of the pixel shader.

That should allow you to get the effect you want. The most likely problem with this is that the geometry won’t change, so you’ll likely want to use oversized quads to render it with out of bounds UV values so it doesn’t skew the image right off the geometry. Just remember to sanitize the UVs in your shader and add a transparent buffer border to your images.