Am I using setGameSize() wrong? - Not working as expected

Phaser 3
1

I have a problem scaling my game, mostly confusion I believe. Basically, I want the game canvas to resize in a medium range and behave like normal Phaser.Scale.FIT behaviour for low and huge resolutions. (Scale down on small screens, scale up on huge screens and do true canvas resizing in between)

For this test I’m using Phaser.Scale.FIT and want to switch the game from e.g. 800x600 to some arbitrary window size while the game is running.

Only applying this.sys.game.scale.setGameSize(window.innerWidth, window.innerHeight); does not work as I thought it would. The canvas size is updated as expected but the game is still squeezing into the old canvas size once the auto scaling via FIT takes over.

Test 1
The Code is as follows (resize controlled via a button press inside the scene):

// scale config
...
scale: {
    mode: Phaser.Scale.FIT ,
    // autoCenter: Phaser.Scale.CENTER_BOTH,
    parent: "phaser-game",
    width: 800,
    height: 600
  }
...

// scene
...
update() {
  if (this.keys.spacebar.isDown) {
    // From reading the docs this is all I thought have do do in `FIT mode
    this.sys.game.scale.setGameSize(window.innerWidth, window.innerHeight);
  }
}
...

Result:

Test 2
If I apply the following it is kinda working until the window is resized again:

update() {
  if (this.keys.spacebar.isDown) {
    this.sys.game.scale.setGameSize(window.innerWidth, window.innerHeight);
    
    this.physics.world.setBounds(0, 0, window.innerWidth, window.innerHeight);
    this.sys.game.canvas.style.width = window.innerWidth + 'px';
    this.sys.game.canvas.style.height = window.innerHeight + 'px';
  }
}

Result:

Test 3 / Hack
After some research I found this issue and tried the described workaround just for the fun and it behaves as I would expected setGameSize() would work.
I’m using 3.19.0 so it should be already fixed since v3.18.1.
I could not find the commit connected to #4482 to dive deeper into it it :confused:

So this is hack (?) is working fine but I’d rather do it the “right way” and not start my new project with a hack right at the beginning :smiley:
From reading the docs I feel like I shouldn’t be doing this but rather call setGameSize() in FIT mode and be done wirth it. Am I wrong here or what am I missing?

this.sys.game.scale.setGameSize(window.innerWidth, window.innerHeight);
this.scale.parentSize.setSize(this.scale.canvasBounds.width, this.scale.canvasBounds.height);
this.scale.displaySize.setAspectRatio(this.scale.baseSize.aspectRatio);
this.physics.world.setBounds(0, 0, window.innerWidth, window.innerHeight);

Result:

Thanks! :slight_smile:

2

setGameSize only tells the Scale Manager what the size of your game is. It then updates the canvas and other settings, so you do not need the displaySize.setAspectRatio as that is already part of the call.

The Physics World will need manually updating by you, because the physics world size is unrelated to the game size, so isn’t changed automatically.

Finally, instead of setting the parent size, you can call getParentBounds instead. Because again, it’s just the game that changed, so it isn’t going to try and force the parent to resize too.

In short, you can do:

this.scale.setGameSize(w, h).getParentBounds();

and then resize your physics world after that.

3

Thanks for your reply!
I tried the following:

var res = this.scale.setGameSize(window.innerWidth, window.innerHeight).getParentBounds();
console.log("res: " +res); 
this.physics.world.setBounds(0, 0, window.innerWidth, window.innerHeight);

.getParentBounds() returns false and the canvas CSS style is untouched until I set this.sys.game.canvas.style.[width/height]. Is this also something I have to do besides updating the physics world? This results in the same behavior as in my Test 2 But the game wont continue scaling with the new aspectratio like in Test 3 (the hacky code.)

Without setting the canvas style it still is compressed. The Codeblock above results in:

:thinking:

4

I’ve added a codepen with the demo code:
https://codepen.io/abk/pen/WNNQvVG?editors=0010
Is there no way of setting the Game and canvas Size permanently using setGameSize ?
I’d like to get the same behaiviour as here with the hacky version but “the right way”.

Solution:
Scale mode switched to RESIZE, thanks rich!
this.scale.setGameSize(window.innerWidth, window.innerHeight);
this.scale.displaySize.resize(window.innerWidth, window.innerHeight);
this.physics.world.setBounds(0, 0, window.innerWidth, window.innerHeight);

1 Like
5