How to scale game to the fullscreen in Boot mode?

[weratius]

window.game = new Phaser.Game((h > w) ? h : w, (h > w) ? w : h, Phaser.CANVAS, 'Phaser');game.state.add('Boot', require('./states/boot.js'));game.state.add('Play', require('./states/play.js'));game.state.start('Boot');

I open the window game when I click on a button with <a href="/game"> and that was the code of file game.js

 

I need to scale the game to the fullscreen in Boot mode

 

and I do like that:

create: function() {        game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL;        game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;        game.scale.setScreenSize(true);        game.scale.refresh();        game.scale.startFullScreen(false);        game.load.onLoadStart.add(this.loadStart, this);        game.load.onLoadComplete.add(this.loadComplete, this);        this.start();    }

But it says that I need a user action to do that (isn't the click on button a user action when i have a permission to scale the game?)

 

thank you in advance for your answer

 

good luck)

[Tom Atom]

Yes, for security reasons you need confirmation from user to go fullscreen. Imagine hackers presented you fake addressbar (picture of it) in fullscreen mode (phishing): http://feross.org/html5-fullscreen-api-attack/

[weratius]

Yes, for security reasons you need confirmation from user to go fullscreen. Imagine hackers presented you fake addressbar (picture of it) in fullscreen mode (phishing): http://feross.org/html5-fullscreen-api-attack/

so, how can I do that via that button? How can I allow scale to the fullscreen?

 

thank you for your answer

[Tom Atom]

for real world example look at our latest game: http://sbc.littlecolor.com/woodventure In top right corner, there is icon that allows user to go fullscreen (it is visible only if browser supports fullscreen mode).

 

From code view: I created this helper class (Typescript) for me. I call it from code like this: Utils.FullscreenUtils.changeFullscreen(); (attach it to some button) Class that uses it can also implement FullscreenListener and set it with Utils.FullscreenUtils.setListener(listenerMethod, listenerContext); - it is then notified when foscreen is on/off. (Woodventure.Global.game is global variable that holds Phaser.Game object for me easily accessible from anywhere)

module Utils {    export interface FullscreenListener {        onFullscreenChange(aFullscreenOn: boolean): void;    }    export class FullscreenUtils {        // game in fullscreen?        private static _fullscreen: boolean = false;        // listener        private static _listener: (aFullscreenOn: boolean) => void = null;        private static _listenerContext: any = null        // -------------------------------------------------------------------------        public static supported(): boolean {            var game: Phaser.Game = Woodventure.Global.game;            return (game.scale.compatibility.supportsFullScreen);        }        // -------------------------------------------------------------------------        public static isFullscreen(): boolean {            return Woodventure.Global.game.scale.isFullScreen;        }        // -------------------------------------------------------------------------        public static changeFullscreen() {            var game: Phaser.Game = Woodventure.Global.game;            if (!FullscreenUtils._fullscreen) {                game.scale.startFullScreen(false, false);            } else {                game.scale.stopFullScreen();            }        }        // -------------------------------------------------------------------------        public static onEnterFullscreen() {            FullscreenUtils._fullscreen = true;            //console.log("Fullscreen = TRUE");            if (FullscreenUtils._listener !== null) {                FullscreenUtils._listener.call(FullscreenUtils._listenerContext, true);            }        }        // -------------------------------------------------------------------------        public static onLeaveFullscreen() {            FullscreenUtils._fullscreen = false;            //console.log("Fullscreen = FALSE");            if (FullscreenUtils._listener !== null) {                FullscreenUtils._listener.call(FullscreenUtils._listenerContext, false);            }        }        // -------------------------------------------------------------------------        public static setListener(aListener: (aFullScreen: boolean) => void, aListenerContext: any): void {            FullscreenUtils._listener = aListener;            FullscreenUtils._listenerContext = aListenerContext;        }        // -------------------------------------------------------------------------        public static removeListener(): void {            FullscreenUtils._listener = null;            FullscreenUtils._listenerContext = null;        }    }}

Also add this in your boot state, if you want to have onEnterFullscreen and onLeaveFullscreen called:

            // fullscreen support            if (Utils.FullscreenUtils.supported) {                this.scale.enterFullScreen.add(this.onEnterFullscreen, this);                this.scale.leaveFullScreen.add(this.onLeaveFullscreen, this);                this.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL;            }        // -------------------------------------------------------------------------        onEnterFullscreen(): void {            this.game.scale.pageAlignVertically = false;            this.game.scale.pageAlignHorizontally = false;            Utils.FullscreenUtils.onEnterFullscreen();        }        // -------------------------------------------------------------------------        onLeaveFullscreen(): void {            this.game.scale.pageAlignVertically = true;            this.game.scale.pageAlignHorizontally = true;            Utils.FullscreenUtils.onLeaveFullscreen();        }

[weratius]

 

for real world example look at our latest game: http://sbc.littlecolor.com/woodventure In top right corner, there is icon that allows user to go fullscreen (it is visible only if browser supports fullscreen mode).

 

From code view: I created this helper class (Typescript) for me. I call it from code like this: Utils.FullscreenUtils.changeFullscreen(); (attach it to some button) Class that uses it can also implement FullscreenListener and set it with Utils.FullscreenUtils.setListener(listenerMethod, listenerContext); - it is then notified when foscreen is on/off. (Woodventure.Global.game is global variable that holds Phaser.Game object for me easily accessible from anywhere)

module Utils {    export interface FullscreenListener {        onFullscreenChange(aFullscreenOn: boolean): void;    }    export class FullscreenUtils {        // game in fullscreen?        private static _fullscreen: boolean = false;        // listener        private static _listener: (aFullscreenOn: boolean) => void = null;        private static _listenerContext: any = null        // -------------------------------------------------------------------------        public static supported(): boolean {            var game: Phaser.Game = Woodventure.Global.game;            return (game.scale.compatibility.supportsFullScreen);        }        // -------------------------------------------------------------------------        public static isFullscreen(): boolean {            return Woodventure.Global.game.scale.isFullScreen;        }        // -------------------------------------------------------------------------        public static changeFullscreen() {            var game: Phaser.Game = Woodventure.Global.game;            if (!FullscreenUtils._fullscreen) {                game.scale.startFullScreen(false, false);            } else {                game.scale.stopFullScreen();            }        }        // -------------------------------------------------------------------------        public static onEnterFullscreen() {            FullscreenUtils._fullscreen = true;            //console.log("Fullscreen = TRUE");            if (FullscreenUtils._listener !== null) {                FullscreenUtils._listener.call(FullscreenUtils._listenerContext, true);            }        }        // -------------------------------------------------------------------------        public static onLeaveFullscreen() {            FullscreenUtils._fullscreen = false;            //console.log("Fullscreen = FALSE");            if (FullscreenUtils._listener !== null) {                FullscreenUtils._listener.call(FullscreenUtils._listenerContext, false);            }        }        // -------------------------------------------------------------------------        public static setListener(aListener: (aFullScreen: boolean) => void, aListenerContext: any): void {            FullscreenUtils._listener = aListener;            FullscreenUtils._listenerContext = aListenerContext;        }        // -------------------------------------------------------------------------        public static removeListener(): void {            FullscreenUtils._listener = null;            FullscreenUtils._listenerContext = null;        }    }}

Also add this in your boot state, if you want to have onEnterFullscreen and onLeaveFullscreen called:

            // fullscreen support            if (Utils.FullscreenUtils.supported) {                this.scale.enterFullScreen.add(this.onEnterFullscreen, this);                this.scale.leaveFullScreen.add(this.onLeaveFullscreen, this);                this.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL;            }        // -------------------------------------------------------------------------        onEnterFullscreen(): void {            this.game.scale.pageAlignVertically = false;            this.game.scale.pageAlignHorizontally = false;            Utils.FullscreenUtils.onEnterFullscreen();        }        // -------------------------------------------------------------------------        onLeaveFullscreen(): void {            this.game.scale.pageAlignVertically = true;            this.game.scale.pageAlignHorizontally = true;            Utils.FullscreenUtils.onLeaveFullscreen();        }

Ok! I got it) Thank you very much =)