Lock orientation on Mobile browsers

Hi everyone,

A client asks me for an HTML5 game which will be played mostly on mobile, and the game needs to be locked horizontally.

I referred to this tutorial by Ashley, in which I learned that screen locking only happens after requesting fullscreen, and fullscreen is potentially not supported on every browser.

So I made a test, and fullscreen mode is working fine on desktops, but not in a single mobile browser.

I tried the following browsers:

iOS Safari

iOS Chrome

Android Browser

Android Chrome (on 2 different devices)

and the fullscreen mode is never recognized on mobile devices. Which is a big problem for me... <img src="{SMILIES_PATH}/icon_e_sad.gif" alt=":(" title="Sad"> Is there any workaround which would allow me to lock orientation? Or maybe did I do something wrong?

On the link above I see that most browsers are notes as "partially supported". Do I need to do something special to access that feature?

On the code standpoint, I defined the Orientation as "Landscape" in the project settings, and am requesting the fullscreen on the title screen, on a "Touch" trigger event.

If you want to test the game, here is the WIP: http://test.smurf.com/drop18/

Oh and it needs to be an HTML5 game playable in a browser, no export with cordova.

Thanks for your help!

When youre building the APKs there's a setting for Orientation. In Cocoon for example in the Settings it shows the orientation. Intel XDX should have the same thing (I'd recommend Cocoon cause intels being tards and not supporting building apks anymore.

In Cocoon under Settings there is Orientation:

That lets you set the orientation. Make sure you change in both Default and the system(s) you're building apks and files for.

Oh and it needs to be an HTML5 game playable in a browser, no export with cordova.

Thanks for the reply, but I don't want to make an APK. The game should be playable fullscreen and horizontally in a browser. :/

>

> Oh and it needs to be an HTML5 game playable in a browser, no export with cordova.

>

>

Thanks for the reply, but I don't want to make an APK. The game should be playable fullscreen and horizontally in a browser. :/

In Construct 2 whats your configuration setting? My Fullscreen in Browswer is set to Letterbox Scale and Orientations is Landscape. Letterbox Scale and Landscape are working for me.

Both are working for me too, as well as fullscreen mode, as long as I am on desktop.

On mobile / tablet I can't have the fullscreen to work. If you try the link I gave in the first post, are you able to play in fullscreen on both desktop and mobile?

I personally don't.

Rable

Could you compare the WindowHeight and WindowWidth and Set layout angle accordingly?

Something like:

WindowHeight > WindowWidth

Trigger once while true

Set layout angle to 90

WindowWidth > WindowHeight

Trigger once while true

Set layout angle to 0

EDIT: Or use the Browser Is Portrait/Landscape condition instead of comparing WindowWidth and WindowHeight

OddConfection

That's a clever idea!

I tried it (with browser orientation), and the result is sadly not what we would expect. The layout indeed rotate 90 degrees, but the window doesn't change size and doesn't rotate (I'm in letterbox scale fullscreen mode). So basically if you're holding your phone in portrait, you've got a small horizontal window in the middle , with the layout inside it rotated 90 degrees. You see a part of the rotated layout in the middle and large white borders on the left and right of the small window.

OddConfection

That's a clever idea!

I tried it (with browser orientation), and the result is sadly not what we would expect. The layout indeed rotate 90 degrees, but the window doesn't change size and doesn't rotate (I'm in letterbox scale fullscreen mode). So basically if you're holding your phone in portrait, you've got a small horizontal window in the middle , with the layout inside it rotated 90 degrees. You see a part of the rotated layout in the middle and large white borders on the left and right of the small window.

that's because " Unbounded scrolling " is No. You can change it into Yes.