Choppy Scrolling

Phaser 3
1

My side-scroller game is running at around 65 fps (I still haven’t figured out how to fix it at 60) and the scrolling of the tile layers is very stuttery/choppy. I tried to record it to show as an example, but it looks smooth on the playback. It drives me crazy seeing the world move one small step at a time instead of at a consistent pace. I have reduced the size of the level.json to as small as 20KB and this happens even when the game is the only thing running on my computer, with 6BG of ram available.

My paralax backgrounds seem to scroll smoothly (maybe because of them scrolling slower)

I have:
arcade physics
roundPixels: true
fixedStep: false (when this was true, the characters and entire game stuttered even more)
this.cameras.main.startFollow(player);

What else could be causing this?

2

I dont know if this is helpful but I also had some problems with scrolling. But in my case there were some weird “scanlines”. I could fix it by using a Point element, whose position is always the same as the player’s one. And the camera has to follow the Point instead of the player. I don’t really know why this is better, but it fixed my issues :'D

// In any scene
const cameraDolly = new Phaser.Geom.Point(player.x, player.y)
this.cameras.main.startFollow(cameraDolly)

// If you set the player's position, also set dolly's position
player.setPosition(1, 10)
cameraDolly.setPosition(1, 10)
3

Thank you, but that didn’t seem to make a difference.

4

  1. Make sure you are using latest version of Phaser - 3.55.2 as there have been issues with choppy scrolling in certain versions.

  2. In config make sure you have.

  render: {
    pixelArt: true,
  },
  1. roundPixels does need to be true. Set as second argument when calling startFollow.
this.cameras.main.startFollow(this.player, true);
5

Those changes didn’t make a significant difference either.

However, I just realized that when I unplug my extra monitor and run it just on my laptop, the scrolling is perfect. Any idea why that could be? I don’t want my players to have to unplug their monitors.

7

You could try adjusting lerpX and lerpY e.g.

this.cameras.main.startFollow(this.player, true, 0.5, 0.5);
8

Can you verify the FPS (Chrome has a meter somewhere) on both monitors?