2
\$\begingroup\$

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.map.addTilesetImage('tiles');


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

Code to zoom

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

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

In the update function

        if(this.input.keyboard.isDown(Phaser.Keyboard.Q)){

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

        }
        if(this.input.keyboard.isDown(Phaser.Keyboard.A)){

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

        }

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

        this.layerScaleGroup.scale.set(this.layerScale);
        this.input.scale.set(this.inputScale);

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.

\$\endgroup\$

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.