Learning Three.js

or WebGL for Dummies

Lets Make a 3D Game: Make It Fullscreen

This post is part of the “Lets make a 3D game” series. It is about the fullscreen API. This API allows to make DOM elements fullscreen. Fullscreen is quite important for games. It provides a larger display so a more immersive experience for your players. All that from javascript, so no more needed to ask “please f11” to your players, isnt that sweet ? :)

The fullscreen API is still in discussion, but the basics are settled. At the time of this writing, it is available in firefox nightly, webkit nightlyand chrome stable. It has been already added in marbleSoccer. The icon is from The Noun Project, a source of nice and clean icons. Try it out! Click on it to toggle fullscreen state. If you dont see the icon, your browser doesn’t yet have the fullscreen API.

Ok now is time for code :)

Let’s get started

As usual, i provide a little helper to make it easier for you to include it in your games. It is called THREEx.FullScreen.js. It hides the prefix of each vendor and the little discrepencies between their API implementation. You download this file from here and include it in your page like this

1
<script src='THREEx.FullScreen.js'></script>

How to use it ?

The API is simple, only 4 calls. Lets see them one by one. To test if it is possible to have fullscreen on your system, do

1
THREEx.FullScreen.available();

To test if fullscreen is currently activated on your page

1
THREEx.FullScreen.activated();

To Request fullscreen on a given element, just do

1
THREEx.FullScreen.request(element);

If element isnt provided, it defaults to document.body. To cancel fullscreen on your page, use this line.

1
THREEx.FullScreen.cancel();

Quite straight forward, no ? :) As an example, let’s make a toggle, the same used in marbleSoccer.

1
2
3
4
5
if( THREEx.FullScreen.activated() ){
  THREEx.FullScreen.cancel();
}else{
  THREEx.FullScreen.request();
}

What about the standard ?

There is a w3c proposal in dicussion. John dyer has written an in-depth summary. Mozilla provides details on their API. At the time of this writing It is available in firefox nightly, webkit nightly and chrome stable.

Conclusion

For more details on THREEx.FullScreen, see its annoted source. It is a simple to add in your game. It provides a more immersive experience to your players. On a related subject, we will soon likely do a post about embedding your game in another page. It is usefull when you want to include it in a blog, in facebook or other game plateforms.

Comments