rotateScreen Question

[Ninjadoodle]

Hi @enpu

In Panda 1, there was a way to display a message when the user was using the wrong orientation.

Is there a simple way to do this in Panda 2? I found a rotateScreen attribute, but can't seem to figure out how to use it, to let's say pause the game and display a message.

Thank you in advance!

[Wolfsbane]

I took a dig through the code, too, and didn't spot anything like that kind of feature either.

I don't think you need a Panda function, though, you could maybe just use standard JS.

https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation

And there's also an onorientationchange event, which you'll probably want, and a lockOrientation if you want to force them to keep one orientation.

E.g. You could probably write it something like:

window.addEventListener('orientationchange', doOrientationStuff);

doOrientationStuff: function() {
    //check what the orientation is, and create pause graphics, or remove pause graphics.
}

 

[Ninjadoodle]

Hi @Wolfsbane

Thanks heaps for the tip! I followed your example and for some reason I can't get it to show anything but a black screen.

There is definitely a sprite being created when I change orientation, as I can't click the level sprites when changing back to portrait (if I make the message sprite interactive).

I do remember that Panda 1 had a specific setting / function for this and you just provided your own image.

[enpu]

By default, Panda 2 will hide the canvas if user turns mobile device into "wrong" orientation. You can disable this by setting rotateScreen attribute in System to false.

game.config = {
    system: {
        rotateScreen: false
    }
};

There is also rotateScreenClass attribute that is name of CSS class that is set to the document body, when in wrong orientation and the canvas is hidden. This will allow you to show text or image to the user with some HTML/CSS code.

If you don't want to hide the canvas on wrong orientation, but do something else, then you will need to use the orientationchange event as suggested by @Wolfsbane

I would try something like this:

window.addEventListener('orientationchange', function() {
    if (game.scene && game.scene.orientationChange) game.scene.orientationChange();
});

Then create orientationChange function in your scene and use screen.orientation to detect the current orientation: https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation

On 9/16/2018 at 7:46 AM, Wolfsbane said:

and a lockOrientation if you want to force them to keep one orientation

AFAIK, there is no way to lock orientation in mobile browsers.

[Ninjadoodle]

Hi @enpu @Wolfsbane

Thank you heaps for the tips, I'll dig a little deeper and look at the docs to see if I can get it working