Image Jitter with Diagonal Sprite Movement

Phaser 3
1

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!

2

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
3

Still haven’t had any luck identifying what this problem is. I’ve attached a video of what it looks like in my actual game – watch as the player moves diagonally, and the trees move back and forth relative to the background.

4

I am experiencing a similar issue, but with horizontal movement, in my platformer game.
Did any of you figure out the solution to this problem, yet?