The Fullscreen Plugin

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.

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’.

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.

Activating FullScreen

To make the game launch in ‘fullscreen mode’, you can execute the ‘launchFullscreen’ method.


It is best used in a user-input event (Mouse/Touch) otherwise it may not execute.

Deactivating FullScreen


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.

Take Note:

The user may exit from fullscreen at anytime. So pay careful attention to the events above.

Share the joy
Comments 1

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">