How to remove jitterness from Phaser Sprite / Background

Question

I am creating a jsfiddle example to illustrate this with appropriate resources.

When your character moves and the camera starts panning , you will notice that the background has a little "jitterness". This can be disabled by setting game.camera.roundPx to true.

However, if it is disabled and you move the character. Your character begins to tremble. Some things I found in this adventure:

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

• If you move the character with body.x or just x , this is absolutely normal.

• If you remove the tilemap texture, you can literally see how jitterness contemplates your eyes when moving. An example here - Make sure you move far enough to pan the camera.

• I also tried game.renderer.renderSession.roundPixels = false; without prevailing.

• This happens in the CANVAS and WEBGL rendering modes.

Answer 1

Great question! These inconveniences are caused by subpixel rendering .

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

If the camera has roundPx set to true , it will call view.floor as part of the update loop, keeping its border intact. Set this value to false to disable it.

view.floor :

Runs Math.floor () for both the x and y values ​​of this rectangle.

When drawing to non-integer positions, the browser tries to interpolate so that it looks as if a pixel was placed between two pixels. This can result in a single pixel in the original image being displayed as two physical pixels. Switch between these two states when the pan of the camera causes what causes jitter. Here is an example:

This is why setting game.camera.roundPx = true fixes it.