Phaser 3. Change dimensions of the game during runtime

Question

Hi please help me to find out how trully responsive game can be created with Phaser3.

Respnsiveness is critical because game (representation layer of Blockly workspace) should be able to be exapanded to larger portion on screen and shrinked back many times during the session.

The question is How I can change dimentions of the game in runtime?

--- edited ---

It turns out there is pure css solution, canvas can be ajusted with css zoom property. In browser works well (no noticeable effect on performance), in cordova app (android) works too.

Here is Richard Davey's answer if css zoom can break things:

I've never actually tried it to be honest. Give it a go and see what happens! It might break input, or it may carry on working. That (and possibly the Scale Manager) are the only things it would break, though, nothing else is likely to care much.

// is size of html element size that needed to fit 
let props = { w: 1195, h: 612, elementId: 'myGame' };

// need to know game fixed size
let gameW = 1000, gameH = 750;

// detect zoom ratio from width or height
let isScaleWidth = gameW / gameH > props.w / props.h ? true : false;

// find zoom ratio
let zoom = isScaleWidth ? props.w / gameW : props.h / gameH;

// get DOM element, props.elementId is parent prop from Phaser game config
let el = document.getElementById(props.elementId);

// set css zoom of canvas element
el.style.zoom = zoom;

Answer 1

For Phaser 3 the resize of the game now live inside the scale like this:

window.addEventListener('resize', () => {
    game.scale.resize(window.innerWidth, window.innerHeight);
});

But if you need the entire game scale up and down only need this config:

const gameConfig: Phaser.Types.Core.GameConfig = {
    ...
    scale: {
        mode: Phaser.Scale.WIDTH_CONTROLS_HEIGHT,
    },
    ...
};

export const game = new Phaser.Game(gameConfig);

Answer 2

Resize the renderer as you're doing, but you also need to update the world bounds, as well as possibly the camera's bounds.

// the x,y, width and height of the games world
// the true, true, true, true, is setting which side of the world bounding box
// to check for collisions

this.physics.world.setBounds(x, y, width, height, true, true, true, true);

// setting the camera bound will set where the camera can scroll to
// I use the 'main' camera here fro simplicity, use whichever camera you use

this.cameras.main.setBounds(0, 0, width, height);

and that's how you can set the world boundary dynamically.

Answer 3

window.addEventListener('resize', () => {
    game.resize(window.innerWidth, window.innerHeight);
});

Answer 4

There is some builtin support for resizing that can be configured in the Game Config. Check out the ScaleManager options. You have a number of options you can specify in the scale property, based on your needs.

I ended up using the following:

 var config = {
            type: Phaser.AUTO,
            parent: 'game',
            width: 1280, // initial width that determines the scaled size
            height: 690,
            scale: {
                mode: Phaser.Scale.WIDTH_CONTROLS_HEIGHT ,
                autoCenter: Phaser.Scale.CENTER_BOTH
            },
            physics: {
                default: 'arcade',
                arcade: {
                    gravity: {y: 0, x: 0},
                    debug: true
                }
            },
            scene: {
                key: 'main',
                preload: preload,
                create: this.create,
                update: this.update
            },
            banner: false,
        };