ScaleManager has 2 new events: ScaleManager.enterFullScreen and ScaleManager.leaveFullScreen, so you can respond to fullscreen changes directly.

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

Author: photonstorm

README.md

@@ -139,6 +139,7 @@ Updates:
 * Phaser.Input.Key.isUp now defaults to 'true', as does GamepadButton.isUp (#474)
 * Vastly improved visibility API support + pageshow/pagehide + focus/blur. Working across Chrome, IE, Firefox, iOS, Android (also fixes #161)
 * Pausing the game will now mute audio and resuming will un-mute, unless it was muted via the game (fixes #439)
+* ScaleManager has 2 new events: ScaleManager.enterFullScreen and ScaleManager.leaveFullScreen, so you can respond to fullscreen changes directly.
 
 
 Bug Fixes:
@@ -161,6 +162,7 @@ Bug Fixes:
 * Active animations now monitor if the game pauses, and resume normally when the game un-pauses (fixes #179)
 * 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)
 
 
 TO DO:

examples/display/fullscreen buttons.js

@@ -0,0 +1,79 @@
+
+var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
+
+function preload() {
+
+    game.load.image('dragon', 'assets/pics/cougar_dragonsun.png');
+    game.load.spritesheet('button', 'assets/buttons/button_sprite_sheet.png', 193, 71);
+
+}
+
+var button;
+var sprite;
+
+function create() {
+
+    sprite = game.add.sprite(game.world.centerX, game.world.centerY, 'dragon');
+    sprite.anchor.set(0.5);
+
+    game.stage.backgroundColor = '#000';
+
+    // Stretch to fill
+    game.scale.fullScreenScaleMode = Phaser.ScaleManager.EXACT_FIT;
+
+    // Keep original size
+    // game.scale.fullScreenScaleMode = Phaser.ScaleManager.NO_SCALE;
+
+    // Maintain aspect ratio
+    // game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL;
+
+    button = game.add.button(game.world.centerX - 95, 500, 'button', actionOnClick, this, 2, 1, 0);
+    button.visible = false;
+
+    game.scale.enterFullScreen.add(onEnterFullScreen, this);
+    game.scale.leaveFullScreen.add(onLeaveFullScreen, this);
+
+    game.input.onDown.add(gofull, this);
+
+}
+
+function onEnterFullScreen() {
+
+    button.visible = true;
+
+}
+
+function onLeaveFullScreen() {
+
+    button.visible = false;
+    
+}
+
+function gofull() {
+
+    game.scale.startFullScreen();
+
+}
+
+function actionOnClick () {
+
+    sprite.tint = Math.random() * 0xFFFFFF;
+
+}
+
+function update() {
+
+}
+
+function render () {
+
+    if (game.scale.isFullScreen)
+    {
+        game.debug.renderText('ESC to leave fullscreen', 270, 16);
+    }
+    else
+    {
+        game.debug.renderText('Click / Tap to go fullscreen', 270, 16);
+    }
+
+}

examples/wip/fullscreen.js

@@ -4,12 +4,16 @@ var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload:
 function preload() {
 
     game.load.image('dragon', 'assets/pics/cougar_dragonsun.png');
+    game.load.spritesheet('button', 'assets/buttons/button_sprite_sheet.png', 193, 71);
 
 }
 
+var button;
+var sprite;
+
 function create() {
 
-    var sprite = game.add.sprite(game.world.centerX, game.world.centerY, 'dragon');
+    sprite = game.add.sprite(game.world.centerX, game.world.centerY, 'dragon');
     sprite.anchor.set(0.5);
 
     game.stage.backgroundColor = '#000';
@@ -23,22 +27,53 @@ function create() {
     // Maintain aspect ratio
     // game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL;
 
+    button = game.add.button(game.world.centerX - 95, 500, 'button', actionOnClick, this, 2, 1, 0);
+    button.visible = false;
+
+    game.scale.enterFullScreen.add(onEnterFullScreen, this);
+    game.scale.leaveFullScreen.add(onLeaveFullScreen, this);
+
     game.input.onDown.add(gofull, this);
 
 }
 
+function onEnterFullScreen() {
+
+    button.visible = true;
+
+}
+
+function onLeaveFullScreen() {
+
+    button.visible = false;
+    
+}
+
 function gofull() {
 
     game.scale.startFullScreen();
 
 }
 
+function actionOnClick () {
+
+    sprite.tint = Math.random() * 0xFFFFFF;
+
+}
+
 function update() {
 
 }
 
 function render () {
 
-    game.debug.renderText('Click / Tap to go fullscreen', 270, 16);
+    if (game.scale.isFullScreen)
+    {
+        game.debug.renderText('ESC to leave fullscreen', 270, 16);
+    }
+    else
+    {
+        game.debug.renderText('Click / Tap to go fullscreen', 270, 16);
+    }
 
 }

examples/wip/index.php

@@ -92,6 +92,8 @@ function printJSLinks($dir, $files) {
         ?>
         <style>
             body {
+                margin: 0;
+                padding: 0;
                 font-family: Arial;
                 font-size: 14px;
             }

src/core/ScaleManager.js

@@ -120,6 +120,16 @@ Phaser.ScaleManager = function (game, width, height) {
     */
     this.hasResized = new Phaser.Signal();
 
+    /**
+    * @property {Phaser.Signal} enterFullScreen - The event that is dispatched when the browser enters full screen mode (if it supports the FullScreen API).
+    */
+    this.enterFullScreen = new Phaser.Signal();
+
+    /**
+    * @property {Phaser.Signal} leaveFullScreen - The event that is dispatched when the browser leaves full screen mode (if it supports the FullScreen API).
+    */
+    this.leaveFullScreen = new Phaser.Signal();
+
     /**
     * @property {number} orientation - The orientation value of the game (as defined by window.orientation if set). 90 = landscape. 0 = portrait.
     */
@@ -323,19 +333,24 @@ Phaser.ScaleManager.prototype = {
                 this.game.canvas.style['width'] = '100%';
                 this.game.canvas.style['height'] = '100%';
 
-                this.setMaximum();
+                this.width = window.outerWidth;
+                this.height = window.outerHeight;
 
                 this.game.input.scale.setTo(this.game.width / this.width, this.game.height / this.height);
 
                 this.aspectRatio = this.width / this.height;
                 this.scaleFactor.x = this.game.width / this.width;
                 this.scaleFactor.y = this.game.height / this.height;
+
+                this.checkResize();
             }
             else if (this.fullScreenScaleMode === Phaser.ScaleManager.SHOW_ALL)
             {
                 this.setShowAll();
                 this.refresh();
             }
+
+            this.enterFullScreen.dispatch(this.width, this.height);
         }
         else
         {
@@ -350,6 +365,8 @@ Phaser.ScaleManager.prototype = {
             this.aspectRatio = this.width / this.height;
             this.scaleFactor.x = this.game.width / this.width;
             this.scaleFactor.y = this.game.height / this.height;
+
+            this.leaveFullScreen.dispatch(this.width, this.height);
         }
 
     },