The camera system is not smooth

Phaser 3
1

Hi guys im building a game in phaser in which i ve to zoom in and zoom out in some structures of the map, this is the code:

building1.on('pointerover', function (event) {
  this.setTint(0x7878ff);
  camera.pan(686, 225, 800);  
  camera.zoomTo(1.2, 800);
});

building1.on('pointerout', function (event) {
  this.clearTint();
  camera.setViewport(0, 0, 1920, 1080);
  camera.zoomTo(1, 800);
});

The problem is that the camera system during the time of the effect it’s not smooth, it is jerky…
How to solve it?

2

I tried this with one sprite and it looks smooth to me. But if you’re moving the pointer from one sprite to another I suppose it could get jerky.

This seems wrong here. I would guess you want another pan(…), if anything.

3

I just tried again and canceled the first move with the same command instead of using setVieport:

camera.pan(960, 540, 800);

But it still goes a bit jerky. The point that maybe is important is that this is a 1920 * 1080 canva. Could it be a performance problem? ( and im using matter physics ) ( but i tried also with arcade but the problem is the same)

Anyway im only doing a zoom into a structure and then a zoom out to the normal view of the map

4

If it really looks choppy, maybe, you would have to check your browser’s CPU tools or this.game.loop.actualFps.

Try adding

this.input.enableDebug(building1); // etc.

and temporarily remove all of the pointerout handlers, see if that makes a difference.

5

maybe during camera’s pan & zoom animation, “pointeout” event gets emitted causing revert zoom and pan which causes jerky motion