Change Game Size does not handle new aspect ratio correctly

[sudhirquestai]

Version

• Phaser Version: Master

• Operating system: Mac OS

• Browser: Chrome/Safari

Description

This is my use case. I have two scenes that are of different dimensions. I am starting on Scene 1 and set the size and use Scale Manager with WIDTH_CONTROLS_HEIGHT. When screen size changes e.g. goes below 700px, then I switch to Scene 2. Now I need to adjust the game size so that it uses the new game size but still uses Scale Manager to scale. I expect this to do the job:

this.scale.setGameSize(375, 1869);

However this does not work fully -- the canvas size is not set and the aspect ratio is wrong. In order to fix it I had to "hack" it with the following code:

let canvas = document.querySelector("canvas");
canvas.width = "375";
canvas.height = "1869";
this.scale.setGameSize(375, 1869);
this.scale.parentSize.setSize(this.scale.canvasBounds.width, this.scale.canvasBounds.height);
this.scale.displaySize.setAspectRatio(this.scale.baseSize.aspectRatio);

I expect this should be done (correctly of course to handle all cases) by the set game size.

Example Test Code

Instead of just using the following to be able to resize the game:

this.scale.setGameSize(375, 1869);

I had to use (basically a hack to test):

let canvas = document.querySelector("canvas");
canvas.width = "375";
canvas.height = "1869";
this.scale.setGameSize(375, 1869);
this.scale.parentSize.setSize(this.scale.canvasBounds.width, this.scale.canvasBounds.height);
this.scale.displaySize.setAspectRatio(this.scale.baseSize.aspectRatio);

Additional Information

[sudhirquestai]

Another side effect I noticed -- please let me know if that is a different issue. If I set the size initially to say 1000 x 2000 and then change the size (using my workaround) to say 800 x 2500 -- then the webgl will not render anything beyond 2000. In canvas mode it works fine. Assuming these are related, please make sure the fix will address that.

[photonstorm]

Thank you for submitting this issue. We have fixed this and the fix has been pushed to the master branch. It will be part of the next release. If you get time to build and test it for yourself we would appreciate that.

[PavelMishin]

The issue is still there. At least after screen rotation with scale mode FIT, if you check scale.displaySize.aspectRatio, it will be always equal initial value.
Should I open new issue?

[Kitsee]

I can also confirm that this is still an issue in 3.22.0.

[photonstorm]

I just tested the originally opened issue on 3.22 and it works fine, so whatever you're finding it needs opening as a separate issue with a reproducible test case.

[Kitsee]

Sorry, I assume it was exactly the same. In my scenario I'm starting up the game with the following settings

width: 1777,
height: 999,
scale:
{
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
},

. In my primary scene I'm listening for the 'orientationchange' as the code snippet below shows

    this.scale.on('orientationchange', (Orientation)=> {
        console.log(Orientation);

        if (Orientation === Phaser.Scale.PORTRAIT) 
        {
            this.scale.setGameSize(999,1777);
        } 
        else if (Orientation === Phaser.Scale.LANDSCAPE) 
        {
            this.scale.setGameSize(1777,999);
        }
    }, this );

When orientation is set to landscape and the setGameSize arguments match the original game size, everything works fine, however in portrait mode the resulting height is completely incorrect, resulting in a actual size of 980x550 on my device for a game size of 999x1777. I dont fully understand the code however I believe the issue is stemming from the "constrain" function. On line 76998
height = width / this.aspectRatio;
this.aspectRatio appears to still be the old aspect ratio of 1.7 instead of 0.5 resulting in the incorrect height.

As stated before this is on phaser version 3.22.0.

[Kitsee]

Sorry, mis-read your comment, i will open a new issue now