Fullscreen and orientation lock in browsers

2

Stats

12,166 visits, 16,728 views

Tools

Translations

This tutorial hasn't been translated.

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 21 Nov, 2014. Last updated 19 Feb, 2019

For an immersive, native-like experience in a browser game, it's important to be able to use the full display and perhaps lock to the intended orientation. This tutorial covers how to make this work in desktop and mobile web browsers.

Fullscreen

You can enter fullscreen mode using the Browser object's Request fullscreen action. This also allows you to switch to any of the Fullscreen in browser modes from project properties.

However most browsers ignore the fullscreen request unless it is made in a user-input trigger. This is to prevent websites annoying the user by automatically entering and exiting fullscreen mode. A user-input trigger is any triggered event which is caused by user input. For example On button clicked, On keyboard key pressed, On mouse click, On touched object and On any touch start are all user-input triggers. Like all triggers they show with a green arrow next to the condition in the event sheet.

Any other events or triggers not based on user input - such as On start of layout or Is touching object (which is not a trigger) - will not be able to request fullscreen. (The one exception to this is NW.js which can request fullscreen at any time.)

Note some browsers do not support fullscreen mode at all. To check if a browser is supported, review if it has support for the Fullscreen API at caniuse.com. You can also use the Browser object Supports requesting fullscreen condition to check if the current platform supports it, which helps determine if a fullscreen button should be shown. On some platforms, a fullscreen mode can be achieved by using the Add to home screen option from the browser menu. Alternatively the game can be exported as a native app such as with PhoneGap Build, and it will get the same display mode as a native app.

iframes

It's possible for a game being displayed in an iframe on another page to still enter fullscreen mode. The user-input trigger limitation still applies. The iframe must also have the allowfullscreen="true" attribute, or the content in the iframe will be blocked from requesting fullscreen even in a user-input trigger. For example the iframed game should use a tag like:

<iframe src="game.html" allowfullscreen="true" />

Note sometimes iframes display incorrectly on iOS; adding the scrolling="no" noresize="noresize" attributes can fix that.

Orientation lock

If your game needs to set a specific orientation, simply choose it in the Orientations project property. Again to prevent websites annoying the user by applying unwanted orientation locks, most browsers allow any orientation outside of fullscreen mode. In other words, for the orientation lock to take effect, you must first request fullscreen. Remember you can also only request fullscreen in a user-input event.

Once your game enters fullscreen mode, Construct 2 automatically applies the orientation lock set in project properties. You do not need any extra events to make this happen. However if you want to be able to change the orientation lock while in fullscreen mode, you can use the Browser object's Lock orientation and Unlock orientation actions. Note the first time you use Unlock orientation it will disable Construct 2 automatically applying orientation lock when entering fullscreen mode, allowing you to completely control what orientation locks are applied. However in most cases if you only need one type of orientation lock you should not need any extra events at all, and Construct 2 will simply automatically lock it the way you want.

Note some browsers do not support orientation locking at all, even in fullscreen mode. To check if a browser is supported, review if it has support for the Screen Orientation API at caniuse.com. Alternatively the game can be exported as a native app such as with PhoneGap Build, and Construct 2 will export the orientation lock mode to apply to the native app.

Conclusion

A fullscreen, orientation-locked display can be achieved on browsers which support the right features simply by requesting fullscreen in a user-input trigger. Construct 2 will then automatically apply the orientation lock if possible. This should be easy to set up: all you need is a single button to enter fullscreen mode somewhere in your game!

  • 0 Comments

Want to leave a comment? Login or Register an account!