I'm working with the Phaser framework and I'm struggling with a camera/rendering issue when scaling a tilemap layer to simulate a zoom feature in my project.

The camera size is set to 1024x768px.(Same as the stage size) I then create a tilemap and a tilemap layer that is 3072x2304px.

    // Create the tilemap and the tilelayer
    this.map = this.add.tilemap();

    this.layer1 = this.map.create('layer', 96, 72, 32, 32);

Code to zoom

        this.layerScaleGroup = this.add.group();

        this.layerScale = 1;
        this.inputScale = 1;

In the update function


            this.layerScale -= .2;
            this.inputScale += .2;


            this.layerScale += .2;
            this.inputScale -= .2;


        this.layerScale = Phaser.Math.clamp(this.layerScale, .33, 1);
        this.inputScale = Phaser.Math.clamp(this.inputScale, 1, 3);


When completely zoomed out I need the tilemap layer to be shown in the camera, but instead it seems like the camera or a camera follows the scale of the tilemap layer, even though the original camera is still 1024x768.

Here is a video showing the issue. https://youtu.be/e2mRfigq98I

When you are zoomed out you can still draw a tile onto the tilemap, but it is not rendered.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.