Jagged Edges of 2D Art while moving

[Guarapicci]

Perfect excuse for me to recommend Signed Distance Fields!

Split your card textures into the white background and the black pixel-art engravings, convert them to SDF alpha channel using a tool like this one and render them rotated using an SDF material. Try some higher resolutions like 128x128 or 256x256 since you want extra-sharp pixel-art angles.
Of course, since with this method you end up with a two-layer card, make sure the engraving is a child of the white background so you don’t have to move the two separately.

[renevanderark]

@Guarapicci

convert them to SDF alpha channel

Is this a step that can be executed at runtime on a CanvasItem like Polgyon2D or Line2D? Or would that be too compute heavy?

(Not using compute shaders, because targeting OpenGL/web)

[Venidici]

@Guarapicci

render them rotated

What do you mean by this? Am I supposed to just create 2 sprite 2Ds with the SDF generated textures of the card in place of the 1 sprite 2D with the base texture?

@Guarapicci

Try some higher resolutions

Do you mean create higher quality base textures or use the SDF alpha channel tool to upscale the textures?

[Guarapicci]

I’ll show rather than tell.

Oversize input, use 128x128 or higher on output

Here is a 16x17 sprite of quote from cave story fed through the SDF tool:

blurry from the mandatory bilinear sampling, not enough pixels for a correct sillouette.

And here is the same sprite, input integer-scaled to ~20x (320x240) → output SDF 32x34:

at that small size, bilinear is still blurring it out.

input 320x340 → output SDF 128x136:

Now it’s pretty crisp on the edges, however the inside still ends up a bit smoothed. Hopefully it’s close enough.

split single sprite into multiple transparent sprites on top of each other

You scale the sprites up before SDF so the algorithm has enough pixels to work with.
Then you split the card into background card and foreground card print because SDFs only sharpen transparency boundaries, and splitting the print into its own texture will introduce a LOT of transparency that the SDF shader can sharpen.

To illustrate, here’s quote again! However in this special case i erased the color of his face leaving transparency around the left pupil.

notice that it’s nice and crisp. It’s now sharpened because i gave it transparency that the SDF shader cut out into a sillouette.