[Snippet] - Smooth Camera Movement!

[WombatTurkey]

Thanks to @lewster32 for the inspiration. 

When changing the camera movement through Phaser's update method I believe it's a frame behind the physics update. So, this ends up with a small jitterness when moving around with physics enabled bodies. This fixes that small jitterness you see (it's rarely noticeable, but my game has to be pixel perfect).

 

You only need to modify Phaser's Camera.js

Under Phaser.Camera.prototype = { , add:

/**
* @constant
* @type {number}
*/
Phaser.Camera.FOLLOW_SMOOTH = 4;

 

Under follow: function (target, style, lerp) {, inside the `switch` case, add:

   case Phaser.Camera.FOLLOW_SMOOTH:
                this.smooth = true;
                this.lerp = lerp;
                break;

 Above that switch case, add:

if (lerp === undefined) { lerp = 0.10 }

 

 

Now, go down a bit and find updateTarget: function () {

Replace the last else condition at the bottom with:

  else
        {
        
                if(this.smooth){
                                this.x = this.x - (this.x - (this.target.x - this.game.width / 2)) *  this.lerp; 
                                this.y = this.y - (this.y - (this.target.y - this.game.height / 2)) *  this.lerp;      
                }else{
                         
                                this.view.x = this._targetPosition.x - this.view.halfWidth;
                                this.view.y = this._targetPosition.y - this.view.halfHeight;
                                
                    
                }

        }

 
Now, you can enable it like you would normally do with a Phaser Camera:

game.camera.follow(sprite, Phaser.Camera.FOLLOW_SMOOTH);

 

And then you can add a 3rd parameter to change the smoothness. 0 to 1 and 1 being really fast. So, for example, 0.05 would be a really slow drag. 0.10 is about perfect for me.

 

Difference in movement:

w/o Smooth:

 

With Smooth:

 

 

Much better!  Hope you guys enjoy!

[WombatTurkey]

Also, if you guys have played treasurearena their camera movement is additive around the player's cursor location too. Which is really cool. I will be releasing that snippet soon too (if someone doesn't beat me to it!). I just figured out now I should be inside Camera.js and not the update method

[rich]

Hey: https://github.com/photonstorm/phaser/commit/dba84d5931e21d6b76c72acf468eb4ade4b23b19

[staff0rd]

Hmm, this is good timing.  I'm getting a jitter with the camera following a sprite due to what looks like sub-pixel rendering and setting roundPixels = true just seems to be exacerbate the issue.  I've had to use the dolly solution mentioned by @rich and others elsewhere on the forum to resolve it, but I'll give this a shot too.

[WombatTurkey]

On 4/9/2016 at 5:08 PM, rich said:

Hey: https://github.com/photonstorm/phaser/commit/dba84d5931e21d6b76c72acf468eb4ade4b23b19

 

Oh great. Thank you Rich! I think it will be a great (and useful) feature.

On 4/9/2016 at 5:37 PM, staff0rd said:

Hmm, this is good timing.  I'm getting a jitter with the camera following a sprite due to what looks like sub-pixel rendering and setting roundPixels = true just seems to be exacerbate the issue.  I've had to use the dolly solution mentioned by @rich and others elsewhere on the forum to resolve it, but I'll give this a shot too.

Yeah, same thing was happening to me as well. I had this same exact code in the update method and it was being jittery. I then saw lewster's post and just added the code inside the Camera constructor and boom, jitteriness was gone. I'm on 2.4.3 though still. (if that matters). Let me know if this fixes anything