How to remove jitterness from Phaser's Sprite / Background

Question

I setup an example jsfiddle to illustrate this with proper assets.

When your character is moving and the camera starts to pan, you will notice the background has a small "jitterness". This can be disabled by setting game.camera.roundPx to true.

However, if that is disabled and you move the character. Your character starts to jitter. Some things I've found in this adventure:

• This only happens when moving with body.velocity.x, under both P2 and Arcade physics.

• If you move the character with body.x or just x it's absolutely fine.

• If you remove the tilemap texture you can literally see the jitterness happen behold your eyes when moving. Example here -- Make sure you move far enough for the camera to pan.

• I've also tried game.renderer.renderSession.roundPixels = false; with no prevail.

• This happens under CANVAS and WEBGL render modes

Answer 1

Great Question! These jitters are caused by subpixel rendering.

Phaser can use non-integer values for the positions of sprites when game.camera.roundPx is false. According to the documentation for roundPx:

If a Camera has roundPx set to true it will call view.floor as part of its update loop, keeping its boundary to integer values. Set this to false to disable this from happening.

view.floor:

Runs Math.floor() on both the x and y values of this Rectangle.

When drawing to non-integer positions, the browser tries to interpolate to make it appear as if a pixel is placed between two pixels. This can cause a single pixel of your source image to be displayed as two physical pixels. The switching between these two states when the camera pans is what is causing the jittering. Here's an example:

That's why setting game.camera.roundPx = true fixes it.