Jump to content

How to scale game to the fullscreen in Boot mode?


weratius
 Share

Recommended Posts

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

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

 

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...