New Phaser 2.4.9 Camera Handler - Please test!

[rich]

Hi all,

There were a number of reports in the forum, and on GitHub, about 'jerky camera movement'. This would especially manifest when the camera was following tweened sprites. So I took a good, long hard look at it all today, and believe I've come up with a decent solution to the problem.

If you want to read the full thread this issue is a good one: https://github.com/photonstorm/phaser/issues/2482

However if you want to just test 2.4.9 right away, with the new Camera motion code in, please grab the files from the dev branch and let me know how you get on.

Note: It won't make much (if any) difference to Tilemap scrolling in WebGL, that's a separate issue, being dealt with in its own branch.

Here's a test case for you (you can find the assets in the Phaser Examples repo)

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update, render: render });

function preload() {

    game.load.image('atari', 'assets/sprites/atari800xl.png');
    game.load.image('backdrop', 'assets/pics/remember-me.jpg');

}

var sprite;
var text;

function create() {

    game.world.setBounds(0, 0, 1920, 1200*2);

    game.add.sprite(0, 0, 'backdrop');
    game.add.sprite(0, 1200, 'backdrop');

    text = game.add.text(130, 8, "Jittery :(");
    text.fill = '#ff00ff';

    sprite = game.add.sprite(300, 0, 'atari');
    sprite.addChild(text);

    //  Either uncomment this, and comment-out the 2 lines in the 'update' function
    //  Or leave this commented out, and use the 'update' method instead. Just don't have both.

    // game.add.tween(sprite).to({ y: game.world.height }, 3000).start().loop(true);

    game.camera.follow(text);

}

function update() {

    sprite.y += 10;
    if (sprite.y > game.world.height) { sprite.y = 0; }

}

function render() {

    game.debug.text(sprite.y, 32, 32);
    game.debug.text(text.y, 320, 32);

}

Cheers,

Rich

[Upperfoot]

Brilliant stuff! Thank you for looking into this as it was driving me nuts! It's definitely smoother!

[rich]

Since making the post above I've done a load more work on this. I've optimised the core Game loop further, improved the way the Stage update is handled, and have updated how Tilemaps render too. The new dist files will say Phaser 2.4.9 RC1 in the console when you run it, so be sure to grab the new files and re-test please. It should be even better than before.

[LTNGames]

I'm not sure if this has to do with the updated dev version but I tried it out in a platformer game I'm making as my phaser test game and I get aslow down in fps whenever the camera scrolls with the player. It's a pretty basic prototype right now, it's literally only a tilemap a little bit bigger than the screen with a sprite that animates when walking. As soon as the camera starts moving my frame rate drops a bit, sometimes the fps don't drop much and sometimes it's a 30fps drop but it's definitely there, aside from that I notice the jittering as well.  It's even more noticeable when I make the sprite jump. If I get a chance I'll upload my little test project and you can test it out, it may have to do with my code but I doubt it, like I said it's real basic stuff right now.

[LTNGames]

Disregard last post, I forgot I have been testing out the Firefox Dev Edition and though it may feel much faster than previous builds it apparently sucks for WebGL, the moment I tested in chrome everything was running much smoother, I see no jitter and fps drops maybe 1-2,  in canvas mode though, firefox dev runs it very well. 

[o0Corps0o]

Hiya, I'm trying something now with the latest Dev Build...

It might be me just being stupid, but i'm having issues where i have Arcade Physics on a sprite that bounces around a world... I am using debug.body(sprite) to see the bounding box of the body... which is fine... however for some reason when it moves out of a certain area it looks like its getting clipped (the drawing method maybe).. The physics is fine, it just seems the debug is a bit messed up maybe...

I'm using the this.camera.follow(sprite);

it looks like its masking an area of 640x640, so when it goes out of this area the body debug gets clipped.
 

My game is running at Width 640, Height 960... and looks like camera is taking the width size and not being set up to my world bounds, this.world.setBounds(100, 100, 960, 960);

But yeah, might not be a camera issue, rather a game.debug issue...
Sorry if this is confusing