Tilemap zoom in and out

[entiendoNull]

Hey there,

I've ran into an issue which I really can't get my head around.
I've made a tilemap in Tiled and I've successfully rendered it with Phaser.
I can move the map around using arrow keys and mouse and the next I wanted to do is to add a zoom in and zoom out feature (and that's where I'm lost).

In the first screenshot the tilemap is shown 100%. The pink area is just a filled polygon that I mapped out in Tiled.
In other words, it doesn't fill any purpose for what I'm trying to accomplish with the zoom what so ever.

 

In the second screenshot I've changed the view to 50%.
My intention is to make the map zoom out, but still use the entire canvas. Right now, I see the same piece of map as in screenshot 1. Just smaller.
I wish to see more of the map.

 

How can this be accomplished? Any help and/or advice is much appriciated.
Here's what I've got.

 

var game = new Phaser.Game(800, 600, Phaser.WebGL, 'my-map', { preload: preload, create: create, update : update, render : render }); 

function preload() {
    game.load.tilemap('mymap', 'assets/map.json', null, Phaser.Tilemap.TILED_JSON);
    game.load.image('My Map', 'assets/vala_map.jpg');
}

var map;
var layer;
var cursors;

function create() {
    game.stage.backgroundColor = '#787878';
    map = game.add.tilemap('mymap');
    map.addTilesetImage('My Map', 'My Map');

    layer = map.createLayer('mymap');
    layer.resizeWorld();

    cursors = game.input.keyboard.createCursorKeys();

    poly = new Phaser.Polygon(map.objects.storelayer[4].polyline);
    graphics = game.add.graphics(map.objects.storelayer[4].x, map.objects.storelayer[4].y);

    graphics.alpha = 0.2;
    graphics.beginFill(0xFF33ff);
    graphics.drawPolygon(poly.points);
    graphics.endFill();
}


function update() {

    if(this.game.input.activePointer.isDown) {  
        if (this.game.origDragPoint) {
            // move the camera by the amount the mouse has moved since last update      
            this.game.camera.x += this.game.origDragPoint.x - this.game.input.activePointer.position.x;     
            this.game.camera.y += this.game.origDragPoint.y - this.game.input.activePointer.position.y; 
            }   

        // set new drag origin to current position  
        this.game.origDragPoint = this.game.input.activePointer.position.clone();
    }
    else {  
        this.game.origDragPoint = null;
    }

    //this.game.world.scale.setTo(0.5, 0.5);

     // zoom
    if (game.input.keyboard.isDown(Phaser.Keyboard.Q)) {
       this.game.world.scale.setTo(1, 1);
    }
    else if (game.input.keyboard.isDown(Phaser.Keyboard.A)) {
       this.game.world.scale.setTo(0.5, 0.5);
    }


    if(cursors.up.isDown){
        game.camera.y -= 4;
    }
    else if(cursors.down.isDown){
        game.camera.y += 4;
    }

    if(cursors.left.isDown){
        game.camera.x -= 4;
    }
    else if(cursors.right.isDown){
        game.camera.x += 4;
    }
}

function render() {

    game.debug.cameraInfo(game.camera, 32, 32);

}

 

Regards,

entiendoNull

[entiendoNull]

Sorry to be replying to my own question. But hopefully, we'll get this sorted and it can help others with similar problems.

I've found this simulating the exact zoom effect that I'm after. I've actually been able to play around with it and had most of my original ideas from the first post solved by it.
However, it does use an old version of Phaser (2.2.2)

http://jsfiddle.net/pdx0px0w/

When I upgrade to Phaser 2.6.2 the behaviour becomes very different.

http://jsfiddle.net/pdx0px0w/86/

I suspect it has with the following piece of code to do:

if (prevScale.x != nextScale.x || prevScale.y != nextScale.y) {

    var scaleAdjustX = nextScale.x / prevScale.x;
    var scaleAdjustY = nextScale.y / prevScale.y;

    var focusX = (game.camera.position.x * scaleAdjustX) + xAdjust * (rescalefactorx);
    var focusY = (game.camera.position.y * scaleAdjustY) + yAdjust * (rescalefactory);

    game.camera.focusOnXY(focusX, focusY);
}

Any ideas on how to get this to work on Phaser 2.6.2 as well? Do anyone uses the code in the fiddles?

[evilmolen]

Hello everyone!

I know this is old thread, but I have the same problem as OP. Can someone help to solve it or have any advices?

[m7_b5]

I have the same essential issue trying to resize layers using layer setScale.  From what I can see the framework at the current moment doesn't support it.  At least in 2.6.2.  I haven't looked to see if Phaser CE is any different.  But at this point I don't see any way of accomplishing this without debugging what is going on under the hood and then modifications to the engine.  Myself, I'm going to try to get away without having to deal with it by having tilemaps that use different size tiles.

If anyone has this type of issue solved, by all means I'd be glad to hear about it.

[evilmolen]

Well. the problem is tilemap engine renders only visible area of the map. Last two days I trying to modify that area width and height, but to no avail.

For now I can see only one way to solve that problem - write my own render function which allows to modify rendered area and make bigger than viewport size. It helps me to solve another problem with render wide sprites that are located outside the screen and only part of them should be visible.

If anyone has any tips on how to do it, which class and method I should extend, please let me know.

Thanks in advance

[Bal]

I had this problem, and it only started when moving from Phaser 2.6.1 to 2.6.2.  So if you wanted this to work in a slightly more up to date phaser, use 2.6.1.

I hoped this might be caused by the tile layers autoCull attribute, but alass it didn't work.

layer.autoCull = false;

 

[evilmolen]

there are still no solution or any tips?

[bapho]

Not sure if this'll work. Have you tried creating a group and adding the tilemap object to it? The scale the group?