Sprite rotation

Godot Version



When rotating a 2D sprite, “staircase” artifacts start to appear along the edges of the sprite. How can this be fixed? It’s a browser-based 2D game. PNG images are used for the sprites.

If you want your sprite to still have visible pixels and not blend and blur, there is no easy solution. Manually make more rotations of your sprite and switch the sprite frame to match the object rotation for example. There are complex algos that can rotate a sprite better, but you’d have to implement them in a shader. There is no one-click solution for this.

As the above said, certain rotations based on the math that rotates the sprite will result in issues artifacting the sprite sometimes, and you may just have to draw additional rotations, or dive into shaders.

You can probably play around with anti-aliasing or something too, but I don’t think that is likely to fix things as you desire.

Unfortunately, this sounds like a situation of needing to create something to facilitate this.

I’m not having any luck with shaders yet. And smoothing, I don’t know if there’s anything functional for Compatibility. Also, is Forward+ rendering currently suitable for browser games?

I don’t believe there are any specific incompatibilities with Forward+ and web builds no.

1 Like

I think there’s a bug with using subviewports and that’s it. Nothing you should worry about until you actually encounter it, which is unlikely.

1 Like