Phaser.StageScaleMode and fullScreenChange questions and proposal

[Mike]

When game goes fullscren it alwas stretch the game to width: 100% and height 100% and I don't think that this always sutes the needs:

 

So I tried some changes to: fullScreenChange

 

    /**    * Called automatically when the browser enters of leaves full screen mode.    * @method Phaser.StageScaleMode#fullScreenChange    * @param {Event} event - The fullscreenchange event    * @protected    */    fullScreenChange: function (event) {        if (this.isFullScreen)        {            //this.game.stage.canvas.style['width'] = '100%';            //this.game.stage.canvas.style['height'] = '100%';            //this.game.stage.canvas.style['width'] = screen.width + 'px';            //this.game.stage.canvas.style['height'] = screen.height + 'px';            if(this.game.stage.scaleMode == Phaser.StageScaleMode.EXACT_FIT) {                                //what was default till now                this.game.stage.canvas.style['width'] = '100%';                this.game.stage.canvas.style['height'] = '100%';                this.setMaximum();                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;            } else if (this.game.stage.scaleMode == Phaser.StageScaleMode.NO_SCALE) {                //no scale black strips around the display                 //if the screen size is bigger than the game size                //do nothing            } else if (this.game.stage.scaleMode == Phaser.StageScaleMode.SHOW_ALL) {                //preserve aspect ratio, horizontal black lines or vertical black lines                this.game.stage.scale.setShowAll();                this.game.stage.scale.refresh();            }        }        else        {            this.game.stage.canvas.style['width'] = this.game.width + 'px';            this.game.stage.canvas.style['height'] = this.game.height + 'px';            this.width = this._width;            this.height = this._height;            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;        }    }

With this code there are checks and when you go fullscreen you can still preserve you game aspect ratio: for example a 800 x 600 game and maximize visible area.

 

Also you can choose NO_SCALE and if the game size is lower than the screen resolution for example 400 x 600 game on almost any display will be centered in the full screen.

 

So what is your vision about how the full screen should work... and is there other way of going full screen a preserving aspect ratio ?

 

[oysterCrusher]

I agree with you about the changes. I've just tried to use startFullScreen and expected that stage.scaleMode would be used.

 

I went one small step further and created a separate stage.fullScreenScaleMode property since you do not necessarily want the same scaling option in both a window and fullscreen. This is most apparent when the canvas is embedded in the page (such as the phaser examples) and uses NO_SCALE, but to scale up while preserving the aspect ratio in fullscreen using SHOW_ALL.

 

Edit: After also updating the fullscreen example I took the liberty of submitting a pull request with the changes I've made so you can at least see what I mean.

 

Edit 2: Just thought of something else that should be noted. This really only applies to webkit browsers. I don't think IE supports fullscreen and firefox forces the element to stretch to fill the screen regardless.