How do you get aspect ratio scaling without horizontal or vertical bars?

[michaelcalkins]

I'm trying to program the scale and resize behavior you find in http://diep.io.

Currently I'm doing the following which adds horizontal or vertical bars.

this.scale.scaleMode = Phaser.ScaleManager.USER_SCALE
var scale = Math.min(window.innerWidth / this.game.width, window.innerHeight / this.game.height)
this.scale.setUserScale(scale, scale)

window.onresize = () => {
    var scale = Math.min(window.innerWidth / this.game.width, window.innerHeight / this.game.height)
    this.scale.setUserScale(scale, scale)
}

Which looks like:

[mattstyles]

That example isn't just doing a scale, looks to me like it scales when the aspect ratio matches what it wants, otherwise it reveals/hides parts of the game world i.e. it changes the shape of the viewport into the game world.

The solution will lie in using a combination of size and aspect to calculate the viewport and scale.

[michaelcalkins]

18 minutes ago, mattstyles said:

That example isn't just doing a scale, looks to me like it scales when the aspect ratio matches what it wants, otherwise it reveals/hides parts of the game world i.e. it changes the shape of the viewport into the game world.

The solution will lie in using a combination of size and aspect to calculate the viewport and scale.

This is the first time I've attempted something like this, any good examples that would point me in the right direction would be most helpful!

[Kalo]

I'm currently doing the following.

onWindowResized() {
        let _this = this;
        if (this.timeout) {
            clearTimeout(this.timeout);
        }

        this.timeout = setTimeout(() => {
            let height = window.innerHeight,
                width = window.innerWidth;
            _this.game.width = width;
            _this.game.height = height;
            _this.game.renderer.resize(width, height);

            this.game.camera.update();

            if (_this.game.renderType === 1) {
                Phaser.Canvas.setSmoothingEnabled(_this.game.context, false);
            }
        }, 100);
    }

 

While this resizes the game relatively properly, there are a few issues. I'm not sure if it's inherent to Phaser being slow, but there's a noticeable delay in the resizing, after the new values have already been passed to the game object, and it furthermore doesn't resize when going to full screen. There's also the problem of the 'player' not being centred any more (camera). Doing changes to scale, causes even more problems.

I've done the same thing in pixi with great results (very fast resizing, and working under all conditions).

[samme]

@Kalo Instead of setTimeout you might try Phaser's own onSizeChange or setResizeCallback. Also setGameSize may handle the resizing better.