Image Jitter with Diagonal Sprite Movement

Hello all,

In one of my latest test projects, I noticed when the camera follows a sprite being moved diagonally via the “cursor keys” setup, any images in the background visibly jiggle. Disabling the camera follow revealed that the sprite itself jitters.

My project uses matter.js for player movement, but I see this happening even more so when x/y coordinates of the sprite are set directly.

This is a difficult one to explain in words, so here is example code, with the option to move the player character with either matter.js or x/y coordinate movement:
https://codepen.io/giniwren/pen/xNvxOO

I suspected roundPixels was the culprit at first, but it doesn’t have any apparent effect on this (as shown in the codepen).

Some technical information:
Phaser version: 3.17.0
Browser: latest versions of Chrome and Firefox
Operating System: Mac OS X

Is this a WebGL issue? Is there any way for me to fix or smooth the effects of this?

Thanks for any help!

I just ran into this today, as well. I thought it was the combination of pixelArt: true and zoom level, but if I disable roundPixels, pixelArt, and leave the zoom at 1, the jitter is still visible… I don’t know how to fix it –and I don’t recall this happening on Phaser 2–, so if anybody does, pls share how :slight_smile:

1 Like