Change the canvas dimension on screen rotation

[Thrandal]

Hello,

I’m trying to add a new feature on a HTML5 game and I can’t find a way to do it.

I try to change the game orientation during the game itself. When the player rotate the screen (Portrait > Landscape or Landscape > Portrait) I want to change the dimensions of the canvas to fit the new orientation.
I am able to do this with a refresh, but I can’t find a way to do it “live” so far.

Here is a snippet from my game config :

if(isPortrait()){
config = {
    type : Phaser.CANVAS,
    parent:'game',
    scale:{
        mode : Phaser.Scale.FIT,
        autoCenter: Phaser.Scale.CENTER_BOTH,
        width: 735,
        height: 1310,
    },
    backgroundColor: "#000000",
    physics: {
        default: "arcade",
        arcade: {
            gravity: {
                x:0,
                y:0
            }
        }
    },
    scene: [
        Boot,
        SceneIntro,
        ScenePresentation,
        SceneMainMenu,
        SceneMain,
        SceneScore,
        SceneSocialMedia
    ]
};
}
else{
config = {
    type : Phaser.CANVAS,
    scale:{
        parent:'game',
        mode : Phaser.Scale.FIT,
        autoCenter: Phaser.Scale.CENTER_BOTH,
        width: 1310,
        height: 735,
    },
    backgroundColor: "#000000",
    physics: {
        default: "arcade",
        arcade: {
            gravity: {
                x:0,
                y:0
            }
        }
    },
    scene: [
        Boot,
        SceneIntro,
        ScenePresentation,
        SceneMainMenu,
        SceneMain,
        SceneScore,
        SceneSocialMedia
    ]
};
}

the isPortrait function (pretty dumb and I suspect there is a builtin function)

 function isPortrait(){
     if(window.innerWidth < window.innerHeight){
        return true;
     }
     else{return false;}
 }

Is there a way to do it “live” ?
I already tried to resize the canvas via vanilla JS (changing the DOM properties of it) without any success.

[theNeedle]

Checkout this example. And Here is the source. Scalemanager checks if window is resized or not and will resize game according to what mode you have given. I think there is need to give different height - width in config.

[Thrandal]

Thanks @theNeedle !

But I already did this.
My game accept the rotation, the problem is I “need” (well, the marketting dep asks for it, to be honest ) to do it “live”.

What the game does (don’t mind the scaling problems with the background and stuff, it’s a WIP) :

But it works only with a refresh, if I don’t refresh the page it does this :

What I looking for is a way to resize the canvas without a refresh. I tried to modify the width/height of the canvas via JS (modifying the DOM attributes of it) and via the resize method in Phaser, unsuccessfully.

[theNeedle]

example does work without need to refresh. Maybe you have something different in html or css that is interfering with scale of game. Maybe this issue is the problem.

Check this post as well.

[Thrandal]

Hi,

I already read this resoruces and examples and it doesn’t do the trick for me. I can change the orientation with no problem and the game is rescaling like a charm but it keeps the orientation it had when the page is loaded.

What I have to do is :

I tried the examples, like I said, and I tried to get rid of the actual ScaleManager inside Phaser 3 and design my own but I felt it’s like reinventing the wheel (and it’s so time consuming).
Am I missing something ?

[LeoSolarz]

Hi, I’m having the same issue. I need to reconfigure the canvas size when a user rotates the device. It detects the rotation but I cannot find a way to reconfigure from 9:16 to 16:9

[samme]

https://labs.phaser.io/100.html?src=src\scalemanager\orientation%20check.js

[IDNMAX]

Did you solve it？