phaser zoom: scaleGroup flickers

[midda]

Hi,

i searched the forum and found some hints, but none of them worked, so i hope some of you can help me.

I am about to build a top-down 2d game with phaser and am not using tiles. i use hammer.js to get the gestures, and a scaleGroup to zoom the world.

My Problem is, sometimes you can see some flickers while you zoom (like some "ghosts"). i think it's the timedifference between change scale of the scaleGroup and calculate new camera-size/position, that causes this problem.

does anybody has some ideas? is there a better way to do the zoom (without flickers)?

//create
//...
scaleGroup = game.add.group();  //each object that has to be scaled has to be member of this group
scaleGroup.scaleLevel = 1;    //start with 100% scale
scaleGroup.maxScale = 2.5;  //maximum Zoom
scaleGroup.minScale = 0.5;  //minimum Zoom
if (game.height > game.width) { aspectRatio = game.height / game.width; } else { aspectRatio = game.width / game.height; }
scaleGroup.orgHeight = Math.sqrt(4000000 / aspectRatio);      //gamebounds
scaleGroup.orgWidth = scaleGroup.orgHeight * aspectRatio;
scaleGroup.scaleWidth = scaleGroup.orgWidth * scaleGroup.scaleLevel;  //this will be calculated in changeScale()
scaleGroup.scaleHeight = scaleGroup.orgHeight * scaleGroup.scaleLevel;//this will be calculated in changeScale()
//...
//set the bounds of the world, so the camera won't scroll out of the world
game.world.setBounds(0, 0, scaleGroup.orgWidth * scaleGroup.maxScale, scaleGroup.orgHeight * scaleGroup.maxScale);
game.camera.bounds.width = scaleGroup.scaleWidth;
game.camera.bounds.height = scaleGroup.scaleHeight;
//...

//call: mousewheel or hammer.js
function changeScale(newScale) {
    if (newScale < scaleGroup.minScale) { newScale = scaleGroup.minScale };
    if (newScale > scaleGroup.maxScale) { newScale = scaleGroup.maxScale };
    if (newScale == this.scaleGroup.scaleLevel) { return };

    this.scaleGroup.scaleLevel = newScale;

    var oldView = { 'x': game.camera.view.x, 'y': game.camera.view.y, 'width': game.camera.view.width, 'height': game.camera.view.height };
    //set anchor in the middle of the screen
    oldView.x = (oldView.x + oldView.width / 2) / this.scaleGroup.scaleWidth;
    oldView.y = (oldView.y + oldView.height / 2) / this.scaleGroup.scaleHeight;
    this.scaleGroup.scaleHeight;
    //scale all relevant objects
    this.scaleGroup.scale.set(this.scaleGroup.scaleLevel);
    //calculate new ScaleSize
    this.scaleGroup.scaleWidth = this.scaleGroup.orgWidth * this.scaleGroup.scaleLevel;
    this.scaleGroup.scaleHeight = this.scaleGroup.orgHeight * this.scaleGroup.scaleLevel;
    //set new gameSize
    //game.world.setBounds(0, 0, this.scaleGroup.scaleWidth, this.scaleGroup.scaleHeight);
    game.camera.bounds.width = this.scaleGroup.scaleWidth;
    game.camera.bounds.height = this.scaleGroup.scaleHeight;
    //reset camera position
    game.camera.setPosition(oldView.x * this.scaleGroup.scaleWidth - oldView.width / 2, oldView.y * this.scaleGroup.scaleHeight - oldView.height / 2);
};

Thanks!

 

[VitaZheltyakov]

This is a bad example of zooming the world. See examples on GitHub (section "camera").

[midda]

Thanks for the fast reply.

im really sorry, but i can't find the examples. would you please be so kind and give me a link to the section?

(i bet it's really obvious and i just don't see it :/ )

[VitaZheltyakov]

16 minutes ago, midda said:

Thanks for the fast reply.

im really sorry, but i can't find the examples. would you please be so kind and give me a link to the section?

(i bet it's really obvious and i just don't see it :/ )

https://github.com/photonstorm/phaser-examples/blob/master/examples/camera/zooming%20the%20camera.js

[midda]

thanks a lot! and sorry for my blindness!