roundPixels is causing "jittering" with cameras.main.startFollow

Phaser 3
1

I originally started using this.cameras.main.roundPixels = true to fix an issue with random lines appearing between tiles from my tile map. I have posted an image below of what I am talking about.

linesbetweentiles
linesbetweentiles832×582 264 KB

I have also added pixelArt = true in my phaser config, and this seemed to reduce the lines a lot but they can still be found.

lineshowing
lineshowing1079×1572 364 KB

setting this.cameras.main.roundPixels = true fixes all issues with “random lines”. however now sprite seems to jitter a lot on movement.

No Jitter
nojitter

Jitter
withjitter

Phaser config

const phaserConfig = {
    type: Phaser.AUTO,
    parent: "game",
    physics: {
        default: 'arcade',
        arcade: {
          gravity: { y: 300 },
          debug: false,
        },
      },
    pixelArt: true, // I think I need this
    width: window.innerWidth ,
    height: window.innerHeight,
    backgroundColor: "#5DACD8",
    scene: [MainMenu, myScene]
};

Camera call from scene-one.js

 this.cameras.main.startFollow(this.playerMap[id])
 this.cameras.main.roundPixels = true;

I have also tried these settings as well in my scene-one.js

 this.physics.world.setFPS(60); 
 this.cameras.main.zoom = 1;

Here is the code for player movement with tween

var tween = this.tweens.add({
            x:x,
            y:y,
            targets: player,
            duration: duration,
            ease: 'Linear',
            yoyo: false,
            repeat: 0,
        });

Any ideas on how to get the best of both worlds , eliminate the random lines but also have no jitter on my sprite movement?

2

I’ve tried this and I get no sprite jitter unless camera interpolation is on.

3

@samme doesn’t the startFollow function always use camera interpolation.

I should have been more clear.

If I don’t use startFollow there is no jitter. But if I use startFollow along with the roundPixels = true there is a jitter.

I believe that the default lerp settings of startFollow have lerpX and lerpY both set to 1. Changing this value doesn’t fix the jitter. Is there any way to have a camera follow the sprite without camera interpolation (I don’t think so)

4

By camera interpolation I mean following with lerpX or lerpY less than 1.

BTW pixelArt: true includes roundPixels: true.

5

I don’t see any jitter on the first camera.

6

I think I have found the source of what was actually causing the jitter.

In my phaser config I have width: window.innerWidth and height: window.innerHeight , If get rid of those two lines the jitter goes away. My best guess is that I am setting the width and height to a floating point number instead of an integer?

Edit:
I made sure width and height where integer values.

Do the with and heigh need to be a certain aspect ratio?

If I use a width of 656 and a height of 683 I see jitter , but if I make the canvas a square I don’t.

7

After some testing I think I know what causes the issue. If the canvas width or height is not divisible by two I am getting the jitter.

I haven’t been able to see any jittering with this quick fix.

var myWidth = window.innerWidth
var myHeight = window.innerHeight

if((myWidth % 2) != 0) myWidth--
if((myHeight % 2) != 0) myHeight--
8

I don’t know if I should continue on this post or start a new one , but I am going to add this here because I believe it pertains to the same issue.

I added a listener to resize the game. There is not jitter till resize occurs, than it starts immediately , however I am using the same work around that I did to make sure that the pixel width and height are always divisible by 2.

window.addEventListener('resize', function (event) {

  console.log('Hi from mitchells listener')
  let newWidth = window.innerWidth
  let newHeight = window.innerHeight -5

  if((myWidth % 2) != 0) myWidth--
  if((myHeight % 2) != 0) myHeight--

  game.scale.resize(newWidth , newHeight)
 }, false);

Edit: actually if you look above I an using newWidth and myWidth. sorry for being silly , I looked at it today and of course it wasn’t working

9

make sure your scene.cameras.main.scrollY and scene.cameras.main.scrollX are always round numbers

10

Thanks for the hint , but I was just being silly and not paying enough attention. If you look above I made an edit. My original solution works.