Fullscreen mode now uses window.outerWidth/Height when using EXACT_FIT as the scale mode, which fixes input coordinate errors (fixes phaserjs#232)

Fullscreen mode now works in Internet Explorer and uses the new fullscreen non-prefix call.

Author: photonstorm

README.md

@@ -163,6 +163,7 @@ Bug Fixes:
 * Swapping between tabs will now pause the game correctly on mobile browsers (iOS7+)
 * Swapping between tabs will pause and resume tweens correctly, allowing their onComplete events to still fire (fixes #292)
 * Fullscreen mode now uses window.outerWidth/Height when using EXACT_FIT as the scale mode, which fixes input coordinate errors (fixes #232)
+* Fullscreen mode now works in Internet Explorer and uses the new fullscreen non-prefix call.
 
 
 TO DO:

examples/wip/fullscreen.js

@@ -51,7 +51,7 @@ function onLeaveFullScreen() {
 
 function gofull() {
 
-    game.scale.startFullScreen();
+    game.scale.startFullScreen(false);
 
 }
 

examples/wip/index.php

@@ -106,11 +106,15 @@ function printJSLinks($dir, $files) {
         <input type="button" id="step" value="step" />
         <input type="button" id="start" value="start" style="margin-left: 32px" />
 
+        <div style="padding: 32px">
+
         <h2>work in progress examples</h2>
 
         <?php
             echo printJSLinks('wip', $files);
         ?>
 
+        </div>
+
     </body>
 </html>

src/core/Game.js

@@ -394,7 +394,7 @@ Phaser.Game.prototype = {
 
             this.isBooted = true;
 
-            this.device = new Phaser.Device();
+            this.device = new Phaser.Device(this);
             this.math = Phaser.Math;
             this.rnd = new Phaser.RandomDataGenerator([(Date.now() * Math.random()).toString()]);
 
@@ -403,6 +403,8 @@ Phaser.Game.prototype = {
 
             this.setUpRenderer();
 
+            this.device.checkFullScreenSupport();
+
             this.world = new Phaser.World(this);
             this.add = new Phaser.GameObjectFactory(this);
             this.make = new Phaser.GameObjectCreator(this);

src/core/ScaleManager.js

@@ -262,35 +262,26 @@ Phaser.ScaleManager.prototype = {
     */
     startFullScreen: function (antialias) {
 
-        if (this.isFullScreen)
+        if (this.isFullScreen || !this.game.device.fullscreen)
         {
             return;
         }
 
         if (typeof antialias !== 'undefined' && this.game.renderType === Phaser.CANVAS)
         {
-            Phaser.Canvas.setSmoothingEnabled(this.game.context, antialias);
+            this.game.stage.smoothed = antialias;
         }
 
-        var element = this.game.canvas;
-        
         this._width = this.width;
         this._height = this.height;
 
-        //  This needs updating to match the final spec:
-        //  http://generatedcontent.org/post/70347573294/is-your-fullscreen-api-code-up-to-date-find-out-how-to
-
-        if (element['requestFullScreen'])
+        if (this.game.device.fullscreenKeyboard)
         {
-            element['requestFullScreen']();
+            this.game.canvas[this.game.device.requestFullscreen](Element.ALLOW_KEYBOARD_INPUT);
         }
-        else if (element['mozRequestFullScreen'])
-        {
-            element.parentNode['mozRequestFullScreen']();
-        }
-        else if (element['webkitRequestFullScreen'])
+        else
         {
-            element['webkitRequestFullScreen'](Element.ALLOW_KEYBOARD_INPUT);
+            this.game.canvas[this.game.device.requestFullscreen]();
         }
 
     },
@@ -301,18 +292,7 @@ Phaser.ScaleManager.prototype = {
     */
     stopFullScreen: function () {
 
-        if (document['cancelFullScreen'])
-        {
-            document['cancelFullScreen']();
-        }
-        else if (document['mozCancelFullScreen'])
-        {
-            document['mozCancelFullScreen']();
-        }
-        else if (document['webkitCancelFullScreen'])
-        {
-            document['webkitCancelFullScreen']();
-        }
+        this.game.canvas[this.game.device.cancelFullscreen]();
 
     },
 

src/system/Device.js

@@ -11,7 +11,12 @@
 * @constructor
 */
 
-Phaser.Device = function () {
+Phaser.Device = function (game) {
+
+    /**
+    * @property {Phaser.Game} game - A reference to the currently running game.
+    */
+    this.game = game;
 
     /**
     * An optional 'fix' for the horrendous Android stock browser bug https://code.google.com/p/android/issues/detail?id=39247
@@ -325,6 +330,30 @@ Phaser.Device = function () {
     */
     this.littleEndian = false;
 
+    /**
+    * @property {boolean} fullscreen - Does the browser support the Full Screen API?
+    * @default
+    */
+    this.fullscreen = false;
+
+    /**
+    * @property {string} requestFullscreen - If the browser supports the Full Screen API this holds the call you need to use to activate it.
+    * @default
+    */
+    this.requestFullscreen = '';
+
+    /**
+    * @property {string} cancelFullscreen - If the browser supports the Full Screen API this holds the call you need to use to cancel it.
+    * @default
+    */
+    this.cancelFullscreen = '';
+
+    /**
+    * @property {boolean} fullscreenKeyboard - Does the browser support access to the Keyboard during Full Screen mode?
+    * @default
+    */
+    this.fullscreenKeyboard = false;
+
     //  Run the checks
     this._checkAudio();
     this._checkBrowser();
@@ -422,6 +451,65 @@ Phaser.Device.prototype = {
 
         this.quirksMode = (document.compatMode === 'CSS1Compat') ? false : true;
 
+
+
+    },
+
+    /**
+    * Checks for support of the Full Screen API.
+    *
+    * @method Phaser.Device#checkFullScreenSupport
+    */
+    checkFullScreenSupport: function () {
+
+        var fs = [
+            'requestFullscreen',
+            'requestFullScreen',
+            'webkitRequestFullscreen',
+            'webkitRequestFullScreen',
+            'msRequestFullscreen',
+            'msRequestFullScreen',
+            'mozRequestFullScreen',
+            'mozRequestFullscreen'
+        ];
+
+        for (var i = 0; i < fs.length; i++)
+        {
+            if (this.game.canvas[fs[i]])
+            {
+                this.fullscreen = true;
+                this.requestFullscreen = fs[i];
+            }
+        }
+
+        var cfs = [
+            'cancelFullScreen',
+            'exitFullscreen',
+            'webkitCancelFullScreen',
+            'webkitExitFullscreen',
+            'msCancelFullScreen',
+            'msExitFullscreen',
+            'mozCancelFullScreen',
+            'mozExitFullscreen'
+        ];
+
+        if (this.fullscreen)
+        {
+            for (var i = 0; i < cfs.length; i++)
+            {
+                if (this.game.canvas[cfs[i]])
+                {
+                    this.cancelFullscreen = cfs[i];
+                }
+            }
+        }
+
+        //  Keyboard Input?
+        if (window['Element'] && Element['ALLOW_KEYBOARD_INPUT'])
+        {
+            this.fullscreenKeyboard = true;
+        }
+
     },
 
     /**