Today we are going to look into the Fullscreen plugin for Kiwijs and how you can use it in your game.
Where’s Plugin?
You can find the fullscreen plugin on github. In its repository you will find a readme which also details how you can include the plugin, use it in Kiwi along with a few helpful example’s (including the one above) to get you going.
We will assume you have a copy of the repo from hence forward.
Including the Plugin
To include the plugin into your game you will first need to get a copy of the fullscreen-x.x.x.js or the fullscreen-x.x.x.min.js file and place it in your project directory. The files will be located in the src folder of the repo.
Link in the JavaScript file you just copied across into your HTML files. Remember to make sure to link it underneath the Kiwi.js library otherwise it may not work.
Lastly when you create the game be sure to add the name of the plugin (“Fullscreen”) to its configuration object, like the example below. That way the game will know to include it when it launches.
|
1 |
var game = new Kiwi.Game( 'domElement', 'GameName', null, { plugins: ["Fullscreen"] } ); |
How to Use
The additional functionality brought by this plugin can be found on each game object (you included it on) under the name ‘fullscreen’.
|
1 2 |
//Example of where the fullscreen functionality is located. this.game.fullscreen; |
Checking Support
The Fullscreen plugin relies on the HTML 5 Fullscreen API in order to function. Whilst a good portion of browsers have now implemented this, not all of them fully implemented and mobile support is almost non-existent. To combat this we recommend checking for support first.
|
1 2 3 4 5 6 |
if( this.game.fullscreen.supported; ) { //The fullscreen API is supported. } else { //The fullscreen API is not supported. } |
Activating FullScreen
To make the game launch in ‘fullscreen mode’, you can execute the ‘launchFullscreen’ method.
|
1 |
this.game.fullscreen.launchFullscreen(); |
Note
It is best used in a user-input event (Mouse/Touch) otherwise it may not execute.
Deactivating FullScreen
|
1 |
this.game.fullscreen.exitFullscreen(); |
Events
Since the Fullscreen API isn’t fully supported by certain browsers, calling the ‘launchFullscreen’ method can result in nothing happening. This is because if the plugin detects no support for the feature, it will not attempt to execute it. Because of this we strongly recommend you do not assume the browser will go fullscreen, but instead create and attach callbacks to the signals listed below.
|
1 2 |
this.game.fullsceen.onEnter.add( this.functionToCallWhenFullscreenLaunches, this ); this.game.fullsceen.onLeave.add( this.functionToCallWhenFullscreenStopsAndWasOn, this ); |
Take Note:
The user may exit from fullscreen at anytime. So pay careful attention to the events above.
Recent Comments