Sign in to follow this  
Ninjadoodle

rotateScreen Question

Recommended Posts

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!

Share this post


Link to post
Share on other sites

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.
}

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.