Lock orientation, and hide web address bar mobile

Get help using Construct 2

Post » Sun Jan 05, 2014 9:02 am

Hello,

I have 2 questions:
1. How do I lock orientation.I want the game to be played only in portrait?
Now if I select on construct configuration settings portrait only, the when the device is orientated on landscape the game can be played (it resize and rotate)

2. How do i hide the mobile address bar?


Thanks.
[size=200]1. Best Construct 2 course :HERE.10$!

2. 155 games source codes for sale on scrira store 12,86$each. PM me if interested to speed up the uploading process.
[/size
B
32
S
8
G
4
Posts: 148
Reputation: 3,713

Post » Sun Jan 05, 2014 10:38 am

1. Not many browsers support orientation locking from web pages, but you can set this in project properties in the latest builds.

2. The best way is to use the Browser object's 'Request fullscreen' action. Again not all browsers support this, but it's the most reliable and future proof way to do it.
Scirra Founder
B
387
S
230
G
87
Posts: 24,249
Reputation: 192,240

Post » Sun Jan 05, 2014 4:24 pm

0. I hate this forum, You lose what you type after system resuming from hibernation.
1. I found a solution by pauseing the game and set a ui text
2.
System trigger once -> browser request full screen -> letterbox stretch
tested on safari ipad, opera, firefox,chrome on android tablet full screen
didn't work not even on any paala2014-01-05 16:33:07
[size=200]1. Best Construct 2 course :HERE.10$!

2. 155 games source codes for sale on scrira store 12,86$each. PM me if interested to speed up the uploading process.
[/size
B
32
S
8
G
4
Posts: 148
Reputation: 3,713

Post » Sun Jan 05, 2014 4:59 pm

There are quite a few css/html/javascript tricks to get certain desired results. but they are outside of construct 2, straight in the index.html file.


I believe a very comon one is getting your user to make a link on their device home screen. That should make your web app an app like style concerning screensize and adresss bar.

For the adress bar, there are tons of approaches, from having a scroll up event, to some zooming action.
There are also various browser specific settings to hiding the bar.
You could simply apply all :) or have some browser detection going to determine which to enable...


For the view modes there are options so you detect current orientation, and then perform some action, like, from blocking the entire view and showing a text that the user needs to rotate the screen, or rotate the screen yourself if its in the wrong position, near effectively giving a lock function ...


A quick search got me :

<style>
@media (orientation: landscape) {
body {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
}
</style>

just add that in the head of the index.html file.
instead of rotate, you could have a black div cover the entire screen, with some white text in the middle mentioning to rotate.


Its not perfect, but its a start ;)


:)
Who dares wins
B
57
S
17
G
21
Posts: 1,878
Reputation: 19,562

Post » Sun Jan 05, 2014 8:22 pm

For full screen it seams that in android it works only on Chrome but the full screen request has to be triggered by a touch.
On Ios:
check: h**tp://stackoverflow.com/questions/18793072/impossible-to-hide-navigation-bars-in-safari-ios-7-for-iphone-ipod-touch

It seams that there is no way but to add the app to homescreen or wait for a new beta ios release.
[size=200]1. Best Construct 2 course :HERE.10$!

2. 155 games source codes for sale on scrira store 12,86$each. PM me if interested to speed up the uploading process.
[/size
B
32
S
8
G
4
Posts: 148
Reputation: 3,713

Post » Sun Jan 05, 2014 10:30 pm

Yes the trick with using browser - set full screen is that it has to be initialed by a "on touch start" command.

B
83
S
39
G
15
Posts: 984
Reputation: 16,741


Return to How do I....?

Who is online

Users browsing this forum: totoe, wizdigitech and 15 guests