Blurry / Rippling / Wavy effect on Sprite when rotating + rotating around objects

Phaser 3
1

I’m working a project set in space where I have a space station (and planets and other bodies) orbiting a star and also rotating. Here’s a quick example:

rippling

As you can see, while the sprite rotates and orbits (using sprite.rotation += and RotateAroundDistance()) there is a rippling/wavy effect. What can I do to mitigate this visual artifact for a clean looking rotation and orbit?

The above is shown at a camera zoom level of 1 and sprite scale at 1, although, I was planning on being able to zoom in/out and have bodies at different sizes. In addition, the sprite asset is exported at 2560x2560, but is drawn at 256px.

In my config I have roundPixels: false, pixelArt: false, and antialias: true - which I believe are the settings I want (I think? roundPixels: false means textured game objects are drawn at non-whole integer positions and antialias: true means WebGL uses linear interpolation. I believe these are the settings I want for smooth, crisp looking sprite rotation and orbiting?). I have played around with those values, but it hasn’t changed the outcome.

How do 2D games normally achieve smooth rotation and movement with minimal visual artifacts?

2

The mipmap filter setting may help, but I think it requires power-of-two texture dimensions.

3

Thanks for sharing. I think I looked at this and thought it was set by default, but i see now there are more options.

I reduced the sprite back down to 256x256 and the mipmap filter made it significantly better. Even without the mipmap filter change it looked a lot better. There must have been another setting I changed after increasing my sprite size 10x when I should have tried it with the original 256 size.

However, with the mipmapfilter set I noticed that upon camera zooming out, my “Star” - which was set as a sprite with a generated texture via a graphics object (just a random solid color) would disappear. Zooming in again would make it reappear.

Most likely I’ll end up using some sort of sprite I make by hand, but now I have additional questions:

  • Why would the sprite, using a graphic.generateTexture() disappear? Also to note - if I use sprite.texture.setFilter(LINEAR) it does not disappear.

  • Can you set the mipmapfilter on individual game objects vs. at the global game config level?

    • Is this what sprite.texture.setFilter() does? If so, why does it only accept NEAREST or LINEAR and not the other options?