weratius Posted June 25, 2015 Share Posted June 25, 2015 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) Link to comment Share on other sites More sharing options...
Tom Atom Posted June 25, 2015 Share Posted June 25, 2015 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/ Link to comment Share on other sites More sharing options...
weratius Posted June 25, 2015 Author Share Posted June 25, 2015 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 Link to comment Share on other sites More sharing options...
Tom Atom Posted June 25, 2015 Share Posted June 25, 2015 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(); } Link to comment Share on other sites More sharing options...
weratius Posted June 25, 2015 Author Share Posted June 25, 2015 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 =) Link to comment Share on other sites More sharing options...
Recommended Posts