iOS camera jitter

[Cameron Foale]

I'm still getting a jittery camera on iOS - it seems to be caused by the time between requestAnimationFrame renders being inconsistent, particularly when the frame rate is < 60fps.

 

I can't repro on Chrome or FF on desktop - the time always appears consistent.

 

Short of switching to a fixed physics timestep, I'm currently working around the issue using this (in a PhaserPatch.js):

Phaser.Time.prototype.original_update = Phaser.Time.prototype.update;Phaser.Time.prototype.update = function (time) {    //  More aggressively clamp the delta    if (this.physicsElapsed > (1.0/15))    {        this.physicsElapsed = (1.0/15);    }    this.lastPhysElapsed = this.physicsElapsed;    this.original_update(time);    // lowpass filter the physics to smooth out the jitters    this.physicsElapsed = (this.physicsElapsed * 0.1) + (this.lastPhysElapsed * 0.9);};

This lowpass-filters the time between each physics update, and greatly improves the experience when using camera.follow.

 

It feels like a very hacky solution though - is there something else I should be looking into?

 

I've tried:

- Disabling dead zones in the camera by just using camera.follow

- Not rendering my character avatar at all, just rendering using debug.renderSpriteBounds()

 

The only thing that fixed it straight up was explicitly setting physicsElapsed to 1/60 seconds, which doesn't really work well either with variable frame rates.

 

Any suggestions? The same behaviour is happening on both iOS6 & 7

 

It seems like the camera position is updating based on the previous frame's position, or something like this.

[rich]

I don't think your lowpass filter is hacky at all, if anything it probably ought to be merged into the core.

 

The Camera is positioned in the World.postUpdate function, which occurs after any Sprite movement has taken place. So I don't believe it's using an old position value.

[eliasku]

Hi there!

 

I want to share my solution to the problem:

postUpdate() {    super.postUpdate();    this.position.x = Phaser.Math.truncate(this.position.x);    this.position.y = Phaser.Math.truncate(this.position.y);}

I noticed that camera somehow rounds view's position, but Body updates Sprite with physics positions,

So for high velocities i just need to cut the fractional part of PIXI.Sprite position property just after Phaser.Sprite postUpdate call.