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.