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

**URL:** <https://phaser.discourse.group/t/roundpixels-is-causing-jittering-with-cameras-main-startfollow/11880>\
**Category:** Phaser 3\
**Created:** [June 16, 2022, 3:16am UTC](https://phaser.discourse.group/t/roundpixels-is-causing-jittering-with-cameras-main-startfollow/11880 "2022-06-16T03:16:40Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![mschilli](https://avatars.discourse-cdn.com/v4/letter/m/d26b3c/32.png) [@mschilli](https://phaser.discourse.group/u/mschilli)\
**Post date:** [June 16, 2022, 3:16am UTC](https://phaser.discourse.group/t/roundpixels-is-causing-jittering-with-cameras-main-startfollow/11880/1 "2022-06-16T03:16:40Z")

</div>

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](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/8/8371143eb0db2773f08501f9404e21b454a8ca40.png)

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](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/a/aa4c00b59a0e8c2db705a89f8441347d823d2397.jpeg)

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](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/9/986a76fa50f6842b7aa339c149f3bcde77ceca54.gif)

**Jitter**  
 ![withjitter](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/5/5f5abe18226c38898831cf89be593412c64af978.gif)

**Phaser config**

```javascript
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**

```javascript
 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

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

```

Here is the code for player movement with tween

```javascript
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?

---

<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:** [June 16, 2022, 3:33pm UTC](https://phaser.discourse.group/t/roundpixels-is-causing-jittering-with-cameras-main-startfollow/11880/2 "2022-06-16T15:33:23Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mschilli](https://avatars.discourse-cdn.com/v4/letter/m/d26b3c/32.png) [@mschilli](https://phaser.discourse.group/u/mschilli)\
**Post date:** [June 17, 2022, 1:51am UTC](https://phaser.discourse.group/t/roundpixels-is-causing-jittering-with-cameras-main-startfollow/11880/3 "2022-06-17T01:51:14Z")

</div>

@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)

---

<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:** [June 17, 2022, 3:42pm UTC](https://phaser.discourse.group/t/roundpixels-is-causing-jittering-with-cameras-main-startfollow/11880/4 "2022-06-17T15:42:08Z")

</div>

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

BTW `pixelArt: true` includes `roundPixels: true`.

---

<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:** [June 18, 2022, 7:34pm UTC](https://phaser.discourse.group/t/roundpixels-is-causing-jittering-with-cameras-main-startfollow/11880/5 "2022-06-18T19:34:31Z")

</div>

https://codepen.io/samme/embed/preview/KKQYXxr?default-tabs=js%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=KKQYXxr

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

---

<div class="post-metadata">

**Author:** ![mschilli](https://avatars.discourse-cdn.com/v4/letter/m/d26b3c/32.png) [@mschilli](https://phaser.discourse.group/u/mschilli)\
**Post date:** [June 18, 2022, 8:32pm UTC](https://phaser.discourse.group/t/roundpixels-is-causing-jittering-with-cameras-main-startfollow/11880/6 "2022-06-18T20:32:01Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![mschilli](https://avatars.discourse-cdn.com/v4/letter/m/d26b3c/32.png) [@mschilli](https://phaser.discourse.group/u/mschilli)\
**Post date:** [June 21, 2022, 12:47am UTC](https://phaser.discourse.group/t/roundpixels-is-causing-jittering-with-cameras-main-startfollow/11880/7 "2022-06-21T00:47:37Z")

</div>

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.

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

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

```

```javascript

```

---

<div class="post-metadata">

**Author:** ![mschilli](https://avatars.discourse-cdn.com/v4/letter/m/d26b3c/32.png) [@mschilli](https://phaser.discourse.group/u/mschilli)\
**Post date:** [June 22, 2022, 3:28am UTC](https://phaser.discourse.group/t/roundpixels-is-causing-jittering-with-cameras-main-startfollow/11880/8 "2022-06-22T03:28:17Z")

</div>

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.

```javascript
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

---

<div class="post-metadata">

**Author:** ![Kosmoon](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/kosmoon/32/4855_2.png) [@Kosmoon](https://phaser.discourse.group/u/Kosmoon)\
**Post date:** [June 22, 2022, 9:06pm UTC](https://phaser.discourse.group/t/roundpixels-is-causing-jittering-with-cameras-main-startfollow/11880/9 "2022-06-22T21:06:31Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mschilli](https://avatars.discourse-cdn.com/v4/letter/m/d26b3c/32.png) [@mschilli](https://phaser.discourse.group/u/mschilli)\
**Post date:** [June 23, 2022, 2:13am UTC](https://phaser.discourse.group/t/roundpixels-is-causing-jittering-with-cameras-main-startfollow/11880/10 "2022-06-23T02:13:27Z")

</div>

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.