Phaser.Scale.RESIZE and nontrivial zoom together

Phaser 3
1

In Phaser 3.17.0, I seem to get incorrect behavior when my scale config looks like this:

{
  mode: Phaser.Scale.RESIZE,
  zoom: 2
}

Specifically, if I add this scale config to the “create circle” example, I get the proper resize behavior (mostly… the scrollbars seem to pop in and out of existence as I resize), and you can tell from the aliasing that pixelArt is set to true from the zoom, but there seems to be no actual zoom occurring. Is there a way I can use Phaser.Scale.RESIZE and zoom at the same time?

Here’s the full code:

<!DOCTYPE html>
<meta charset="utf-8">
<style>body { margin: 0 }</style>
<div id="parent"></div>
<script src="https://cdn.jsdelivr.net/npm/phaser@3.17.0/dist/phaser.min.js"></script>
<script>
var config = {
    width: 800,
    height: 600,
    type: Phaser.AUTO,
    parent: 'phaser-example',
    scene: {
        create: create
    },
    scale: {
      mode: Phaser.Scale.RESIZE,
      zoom: 2
    }
};

var game = new Phaser.Game(config);

function create ()
{
    var circle = new Phaser.Geom.Circle(400, 300, 100);

    var graphics = this.add.graphics({ fillStyle: { color: 0xff0000 } });
    graphics.fillCircleShape(circle);
}
</script>
1 Like
2

The workaround is to set the scale mode to NONE and then manually resize the canvas in a resize event:

{
    mode: Phaser.Scale.NONE,
    width: window.innerWidth/ZOOM_LEVEL,
    height: window.innerHeight/ZOOM_LEVEL,
    zoom: ZOOM_LEVEL
}

window.addEventListener("resize", () => {
        game.scale.resize(window.innerWidth/ZOOM_LEVEL, window.innerHeight/ZOOM_LEVEL);
    },false
);

See topic: Dynamically change canvas size