Jump to content

[Snippet] - Smooth Camera Movement!


WombatTurkey
 Share

Recommended Posts

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:

c4ed53ab9cd6f0d3246ae8ddd01a80af.gif

 

With Smooth:

 

a9cd01ff601b9f8da6b8e70e347ae2ee.gif

 

Much better!  Hope you guys enjoy!

Link to comment
Share on other sites

  • 2 weeks later...

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.

Link to comment
Share on other sites

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

 

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

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...