How to change the game size

Phaser 3
1

How can I change the game size / gameSize? I’m trying to set the game size to window’s size on resize event.
I tried to dig in to the game object to change the width and height but i guess those are just read only.
Thanks

2

https://labs.phaser.io/index.html?dir=scalemanager/

1 Like
3

but is there a way to directly change the game size?
I’m in the middle of a project and i have already implemented my own scale manager, the only problem with it is that if you start the game with small window size and then increase the windows size, the game size will not increase.

4
4 Likes
5

How would you change the scaleMode afterwards? I’m looking for something like .scale.fullScreenScaleMode was in Phaser 2 to switch from FIT to HEIGHT_CONTROLS_WIDTH. Or another way to show only wanted part of the game on fullscreen mode, but use the whole screen.

6

I think you can just assign to this.scale.scaleMode.

7

I’ve tried that, but it’s only a variable and nothing is using it after start. Something more is needed. I’ve tried updateScale and refresh too, but they don’t seem to be for this.

resize (gameSize, baseSize, displaySize, resolution)
{

    if(this.scale.isFullscreen) {

        console.log('set scalemode: ',Phaser.Scale.ScaleModes.HEIGHT_CONTROLS_WIDTH);

        this.scale.scaleMode = Phaser.Scale.ScaleModes.HEIGHT_CONTROLS_WIDTH;

        console.log('scalemode now : ', this.scale.scaleMode);

    }
}
8

Hey @Mikko_Torniainen Could you be able find any solution about this ?

9

It looks like ScaleManager#refresh() is for that, if you need to force an update.

Have you verified that the “new” scale mode gives the results you want at all, without any manual changes?

10

I was not able to change the scaleMode with refresh(), but I was able to change the centering. It was sufficient for my purpose. Here’s what I did.

this.scale.on('resize', this.resize, this);

resize (gameSize, baseSize, displaySize, resolution)  {
    if(this.scale.isFullscreen) {

        if(this.scale.autoCenter !=  Phaser.Scale.Center.CENTER_BOTH) {
            this.scale.scaleMode = Phaser.Scale.ScaleModes.ENVELOP; // scalemode in fullscreen does nothing
            this.scale.autoCenter =  Phaser.Scale.Center.CENTER_BOTH; // centering in fullscreen
            this.scale.refresh();

        }

    } else {

        if(this.scale.autoCenter !=  Phaser.Scale.Center.CENTER_HORIZONTALLY) {
            this.scale.autoCenter =  Phaser.Scale.Center.CENTER_HORIZONTALLY; // initial centering
            this.scale.scaleMode = Phaser.Scale.ScaleModes.WIDTH_CONTROLS_HEIGHT; // initial scalemode
            this.scale.refresh();
        }
    }
}
2 Likes