In Phaser 3, there’s a zoom property that can be added into your game config, like so:
export default {
type: Phaser.AUTO,
parent: "phaser-example",
width: window.innerWidth,
height: window.innerHeight,
pixelArt: true,
roundPixels: true,
zoom: 2,
physics: {}
}
I’m trying to recreate this in 2/CE and I don’t see an existing property in the game config properties. The closest I’ve seen is resolution, which doesn’t produce the same result as zoom. At least, not on its own. Here’s some of the ways I’ve tried so far:
game.camera.scale.x = 2;
game.camera.scale.y = 2; //produces zoom with incorrect placement of game objects
game.scale.scaleFactor.set(2,2); //nothing
game.world.camera.scale.x = 2;
game.world.camera.scale.y = 2; //produces zoom with incorrect placement of game objects
game.world.scale.x = 2;
game.world.scale.y = 2; //produces zoom with incorrect placement of game objects
game.world.worldScale.x = 2;
game.world.worldScale.y = 2; //nothing
game.world.worldScale.set(2,2); //nothing
This is the result of the zoom property in Phaser 3:
And this is what happens when I try to scale it up in 2/CE:
As you can see, the 2/CE result is blurrier (even with crisp: true and roundPixels: true in my game config) and the sprite is no longer aligned with its Arcade physics body, and it no longer stands on the platforms correctly.
So here’s my question: what, in your opinion, would be the best way to recreate the effect of Phaser 3’s zoom property in 2/CE? Here is my source code if it helps, but IMO this is really more of a general “how would you approach this?” question.