# The camera system is not smooth

**URL:** <https://phaser.discourse.group/t/the-camera-system-is-not-smooth/12531>\
**Category:** Phaser 3\
**Created:** [November 9, 2022, 6:41pm UTC](https://phaser.discourse.group/t/the-camera-system-is-not-smooth/12531 "2022-11-09T18:41:59Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![nrctpl](https://avatars.discourse-cdn.com/v4/letter/n/f14d63/32.png) [@nrctpl](https://phaser.discourse.group/u/nrctpl)\
**Post date:** [November 9, 2022, 6:41pm UTC](https://phaser.discourse.group/t/the-camera-system-is-not-smooth/12531/1 "2022-11-09T18:41:59Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [November 9, 2022, 6:55pm UTC](https://phaser.discourse.group/t/the-camera-system-is-not-smooth/12531/2 "2022-11-09T18:55:11Z")

</div>

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.

> [@nrctpl](#):
>
> `camera.setViewport(0, 0, 1920, 1080);`

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

---

<div class="post-metadata">

**Author:** ![nrctpl](https://avatars.discourse-cdn.com/v4/letter/n/f14d63/32.png) [@nrctpl](https://phaser.discourse.group/u/nrctpl)\
**Post date:** [November 9, 2022, 7:00pm UTC](https://phaser.discourse.group/t/the-camera-system-is-not-smooth/12531/3 "2022-11-09T19:00:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [November 9, 2022, 7:14pm UTC](https://phaser.discourse.group/t/the-camera-system-is-not-smooth/12531/4 "2022-11-09T19:14:56Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![GN-c](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/gn-c/32/9310_2.png) [@GN-c](https://phaser.discourse.group/u/GN-c)\
**Post date:** [November 10, 2022, 12:29pm UTC](https://phaser.discourse.group/t/the-camera-system-is-not-smooth/12531/5 "2022-11-10T12:29:07Z")

</div>

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