I'm writing a simple game using Phaser 3.5.1. I made a 20X20 over world tile map for my hero to walk around on with the camera following the hero. I was able to implement tile based movement using tweens. This works but whenever the camera moves 1 pixel lines flash on the tile map perpendicular to the direction I move. Example uses a static map layer:
As you can see I was also getting some weird artifacts on my sprite even when the camera wasn't moving, but after reading about rounded pixels I was able to eliminate that on my sprite by setting
roundedPixels: true in my game config, but now the sprite jitters when the lines appear. Example uses static map layer with rounded pixels:
I also experimented with static vs dynamic layers for my map. When I have a dynamic map layer without rounded pixels the result is the same as my static map layer without rounded pixels.
When I use rounded pixels on a dynamic map everything gets really jittery. Interestingly when the camera doesn't move the map shakes, and when the camera does move the sprite jitters.
Regardless of the map type or rounded pixels setting, the longer the tween's duration the worse the problem gets. In my examples I used 2 second tweens to emphasize the problem.
How do I fix this problem? In a perfect world I'd like to keep using tweens for tile based movement, keep a static map, and just update some config value. If that isn't going to work what approach should I take?
I'm happy to add code to my question if people think it would be helpful.