Dynamic layer resize

Phaser 3
1

Hello! i’m switching from phaser 2 to phaser 3 and I’m trying to dea with game resize gain. When I resize game canvas, canvas element resizes, but layer do not. If I refresh game everything goes ok.
Here is link to codepen to see it live.
Here is my similar question for phaser2. Here is function which I used to resize game and its layers in phaser 2:
onSizeChange: function () {
// fire the game resize event for the current state (make sure each state has this)
// this.game.state.callbackContext.resize();

    // var height = $(window).height();
    // var width = $(window).width();
    var height = document.getElementById('rightside').clientHeight;
    var width = document.getElementById('rightside').clientWidth;

    // game = new Phaser.Game(window.innerWidth * window.devicePixelRatio, window.innerHeight * window.devicePixelRatio, Phaser.CANVAS, 'gameArea');
    height = height / scalefactor;
    width = width / scalefactor;


    // var height = $(window).height();
    // var width = $(window).width();
    this.game.width = width;
    this.game.height = height;

    sinkLayer.resize(width, height);
    blockLayer.resize(width, height);
    sinkLayer.resize(width, height);
    flour.resize(width, height);
    this.upperLayer.resize(width, height);

    this.game.scale.setGameSize(width, height);
    this.game.stage.getBounds.width = width;
    this.game.stage.getBounds.height = height;
    if (this.game.renderType === Phaser.WEBGL) {
        this.game.renderer.resize(width, height);
    }
    this.game.scale.refresh();



},
1 Like
2

This reminds me of the tutorials from William Clarkson and how he resizes the canvas.

4

I’ve solved issue by puting this.cameras.main.setViewport(0, 0, canvasW, canvasH); to my resize function. Is it correct? No need to resize layers? Just change viewport?