Phaser: GameConfig-level `zoom` property has no effect in 3.12.0 (tilesets?)

[nanodeath]

Version

• Phaser Version: v3.12.0
  
• Operating system: Windows 10
  
• Browser: N/A. (Verified in Chrome 69 and Firefox 62.0)

Description

When initializing a game like this:

var game = new Phaser.Game({
  // ...
  zoom: 3,
  // ...
});

I expect the game to be zoomed by a factor of 3x, when in reality it doesn't get zoomed at all. The examples below use tilesets.

Example Test Code

• Working, v3.10.1: https://codepen.io/mikewesthad/pen/VdOLge (from this tutorial)
• Not working, v3.12.0: https://codepen.io/nanodeath/pen/PdLqLp

Additional Information

I've verified it was also working in v3.11.0.

[Daedrias]

Same issue, while starting from the webpack template.
Only modification is the add of this zoom attribute and it don't have any effect.
The corresponding code in the CreateRenderer (line 79 & 80) is called, but the change is not applied to the canvas tag "style" attribute.

[plissken2013es]

Same issue. It works on 3.11, but fails on 3.12 & 3.13.

[Kyberklemming]

Here's a fix. Modify the boot function to look like this:

     * @method Phaser.Game#boot
     * @protected
     * @fires Phaser.Game#boot
     * @since 3.0.0
     */
    boot: function ()
    {
        if (!PluginCache.hasCore('EventEmitter'))
        {
            console.warn('Core Phaser Plugins missing. Cannot start.');
            return;
        }

        this.isBooted = true;

        this.config.preBoot(this);

        CreateRenderer(this);

        if (false)
        {}

        DebugHeader(this);

        this.canvas.style.width = (this.config.width * this.config.zoom).toString() + 'px';
        this.canvas.style.height = (this.config.height * this.config.zoom).toString() + 'px';       

        AddToDOM(this.canvas, this.config.parent);

        this.events.emit('boot');

        //  The Texture Manager has to wait on a couple of non-blocking events before it's fully ready.
        //  So it will emit this internal event when done:
        this.events.once('texturesready', this.texturesReady, this);
    },

Basically I'm forcing the width and height value of the canvas before it's added to the DOM by doing:

    this.canvas.style.width = (this.config.width * this.config.zoom).toString() + 'px';
    this.canvas.style.height = (this.config.height * this.config.zoom).toString() + 'px';

[photonstorm]

This property was not being used correctly (or at all in several cases) and was left over from a previous version. It has been removed in 3.16 as the Scale Manager will now handle this.

[nanodeath]

Since this is a backwards breaking change, shouldn't that be punted until 4.x? Alternatively, can you test to see if this now-legacy property is set and emit a warning?

[photonstorm]

No, this will be handled by the Scale Manager now, it shouldn't be applied directly in the renderer or to the canvas element anymore.

[nanodeath]

As a user...this isn't really a great response. You're willing to break backwards compat, break tutorials and examples, and it's not even clear why (though from an API perspective, I don't especially care why). How many other flags are going to randomly break within minor version upgrades? Was this change added to a changelog or upgrade guide anywhere, at least?

[photonstorm]

Why would it have been added to a change log _in advance_ of the change being made? It's not a breaking change in the slightest. It's just handled by an entirely different system now, that's all. Which will be fully documented when it's released, just like all changes are.

[BZInhance]

The zoom property was deactivated since 3.12 without notice.

For me, it is a breaking change. I have a game that in splits into multiple scenes, each one being a minigame like WarioWare. With the zoom property, I was able to scale the entire game in one property. Would I be able to do the same with the Scale Manager? I don't want to scale individually each object in each scene.

[photonstorm]

It wasn’t deactivated, please don’t be overly dramatic. It wasn’t actually touched _at all_. All zooming will be handled by the scale manager from 3.16 onwards, just like it was always meant to be.

[Kyberklemming]

I don't think it was dramatic. We're just saying that it was broken since 3.12 and we thought it was a bug. If the scale manager does the same thing, then it's cool.

[nanodeath]

I'm still confused about why this was closed and dismissed. A configuration option that was working in 3.12 doesn't function in 3.14. Is that not a bug? I'm not referring to mainline or 3.16.

[photonstorm]

@Kyberklemming to say something was "deactivated without notice" is a dramatic statement, because it implies it was done on purpose without mentioning it anywhere, neither of which actually happened.

I'm quite surprised it even worked. It was an un-documented setting, with no examples, that hadn't been tested since the beta versions.

You can restore its functionality in 3.12+ by dropping this anywhere in your code:

this.game.canvas.style.width = (this.game.config.width * this.game.config.zoom).toString() + 'px';
this.game.canvas.style.height = (this.game.config.height * this.game.config.zoom).toString() + 'px';

That way you don't need to edit the build.

Or, wait for 3.16, which will handle it properly via the Scale Manager.