Sign in to follow this  
AntoniaChimp

Lock screen orientation

Recommended Posts

I was working on a game and I dont want the player to change the device orientation. If the player starts in portrait, lock portrait and vice versa.

I was looking into screen.orientation.lock and requesting fullscreen, but I always get "(index):994 TypeError:" or "Uncaught (in promise) DOMException".
I was testing this in a Chrome Browser.

Does anyone have any tips for me?

Share this post


Link to post
Share on other sites

Just like playing sound requires a user interaction to occur, so does the full screen API. So do it on a click or a touchend and it should work.

Ps beware of using this on iPad. If you are in full screen and it thinks your typing on a virtual keyboard, iOS keeps displaying annoying warnings. Games usually require regularly touching the screen.... so these warnings keep coming up over and over. Thanks Apple!

Share this post


Link to post
Share on other sites
35 minutes ago, themoonrat said:

Just like playing sound requires a user interaction to occur, so does the full screen API. So do it on a click or a touchend and it should work.

Ps beware of using this on iPad. If you are in full screen and it thinks your typing on a virtual keyboard, iOS keeps displaying annoying warnings. Games usually require regularly touching the screen.... so these warnings keep coming up over and over. Thanks Apple!

I tried to lock it after first click on the stage, but I get the same exceptions as before 😕

Share this post


Link to post
Share on other sites
app.stage.interactive = true;
app.stage.on('pointerdown', function(){   
    lock();
    app.stage.interactive = false;
    app.stage.onpointerdown = null;
});

async function fullScreenCheck() {
    if (document.fullscreenElement) return;
       return document.documentElement.requestFullscreen();
    }

function lock() {
    try {
       await fullScreenCheck();
    } catch (err) {
       console.error(err);
    }
    screen.orientation.lock(screen.orientation.type);
}

That is my code.
Thats the error: "Uncaught (in promise) DOMException"

I read that its maybe not working with chrome. But I tried it on my phone not in Chrome and I was able to rotate it.

Share this post


Link to post
Share on other sites
function openFullscreen() {
   if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
   } else if (document.documentElement.mozRequestFullScreen) { 
      document.documentElement.mozRequestFullScreen();
   } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen();
   } else if (document.documentElement.msRequestFullscreen) { 
      document.documentElement.msRequestFullscreen();
   }
}
function lock() {
   if (!document.fullscreenElement){
      openFullscreen();
   }
   screen.orientation.lock(screen.orientation.type); 
}

Tried it like that as well without async and awaits and I got a : Uncaught (in promise) TypeError: fullscreen error and a Uncaught (in promise) DOMException

Share this post


Link to post
Share on other sites

So I actually use https://github.com/sindresorhus/screenfull.js/ which is a great little library that handles it all for me.

You also might not be able to use pointerdown within pixi as it's not always classed as a valid unlocking event that touchstart or touchend are. I use a touchend / click callback on the window to get my event to then call screenful

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.