Jump to content

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


Recommended Posts

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

Ssajcca.gif

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:

Screen Shot 2016-09-24 at 9.42.28 PM.png

Link to post
Share on other sites

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.

Link to post
Share on other sites
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! :)

Link to post
Share on other sites

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).

Link to post
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...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...