[Solved] Lock orientation in browser

Hello, I was wondering if anyone could help.

I’m trying to lock the orientation of my game to landscape when viewing inside a web browser, i’ve tried screen.orientation.lock(‘landscape’); inside a JS block but no dice, I know there is an option to do this in the settings but that’s only for iOS and Android apps.

Any help would be great :slight_smile:

Many thanks.

2 Likes

You cannot block orientation sadly. But you can block your game on unwanted orientation change. Example:
Create a scene “game”.
Create a scene “portrait”
Adapt the portrait scene to show a Sprite asking for switching again to landscape
Use once the following block:

if (window.orientation == 90 || window.orientation == -90) {
    gdjs.landscape = true //set default
} else {
    gdjs.landscape = false //set default
}
window.addEventListener("orientationchange", function() {
    if (window.orientation == 90 || window.orientation == -90) {
        gdjs.landscape = true; // landscape mode
    } else {
        gdjs.landscape = false; // portrait mode
    }
});

Then in your game scene add

if (!gdjs.landscape) {
    runtimeScene.requestChange(gdjs.RuntimeScene.PUSH_SCENE, "portrait");
}

And invert it for the portrait scene:

if (gdjs.landscape) {
    runtimeScene.requestChange(gdjs.RuntimeScene.POP_SCENE);
}

And there you go! On landscape, it shows the game, and if the player would switch it would also switch to the blocking scene.

3 Likes

Many thanks arthuro555 :slight_smile:

1 Like