ScaleMode.FIT does not keep aspect ratio

Hi everybody,

I’m on the brink of opening an issue, but wanted to consult with you first.

This is what the documentation says about Phaser.Scale.ScaleModes.FIT:

The width and height are automatically adjusted to fit inside the given target area, while keeping the aspect ratio. Depending on the aspect ratio there may be some space inside the area which is not covered.

But it strongly appears like aspect ratio is actually not factored into the calculation! On all my devices the game is being stretched to screen size when using scaleMode.FIT .
When looking into the ScaleManager.updateScale() method, ScaleMode.FIT is handled by this piece of code:

// All other scale modes
this.displaySize.setSize(this.parentSize.width, this.parentSize.height);

styleWidth = this.displaySize.width / resolution;
styleHeight = this.displaySize.height / resolution;

if (autoRound)
{
styleWidth = Math.floor(styleWidth);
styleHeight = Math.floor(styleHeight);
}

style.width = styleWidth + 'px';
style.height = styleHeight + 'px';

I don’t see aspect ratio being factored in, but maybe I’m looking in the wrong spot :thinking: ?

If i roughly extend/rewrite the first line like this, it works:

var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
var windowRatio = windowWidth / windowHeight;
var gameRatio = this.gameSize.width / this.gameSize.height;
var targetWidth = windowRatio < gameRatio ? windowWidth : windowHeight * gameRatio;
var targetHeight = windowRatio < gameRatio ? windowWidth / gameRatio : windowHeight;

this.displaySize.setSize(targetWidth, targetHeight);

But somehow I can hardly imagine this “problem” (if it is one) to not have been encountered by anyone else for so long? Am I missing something?

(Also event Phaser.Scale.Events.ORIENTATION_CHANGE seems to never be emitted, but I didn’t yet look into the code for this…)

scalemanager/fit with auto center seems to work.

Double-check Parent and Display canvas containment guidelines?

1 Like