Bitmapmask distort image while resizing canvas

[rexrainbow]

Version

• Phaser Version: 3.60.0

• Operating system: window 10

• Browser: Chrome/FF

Description

Apply bitmap mask to a layer, then resize game canvas. The render result is not correct.

Example Test Code

Test code

• Rectangle game objects will resize according to current window width.
• Resize browser window to see the render result
• Comment line 24 can disable bitmap mask applying

Additional Information

This issue is similar with #6503

[Arcturous]

Don't know if its related but it also happens when I use Rex's KawaseBlur shader.

[rexrainbow]

@Arcturous Yes, it is related.

[photonstorm]

Thank you for submitting this issue. We have fixed this and the fix has been pushed to the master branch. It will be part of the next release. If you get time to build and test it for yourself we would appreciate that.

[pavels]

Hi

i tried against current master and unfortunately it is not fixed

Also tried with https://labs.phaser.io/edit.html?src=src/game%20objects/render%20texture/render%20texture%20as%20a%20mask.js&v=dev

Following code:

class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.image('brush', 'assets/sprites/brush1.png');
        this.load.image('pic', 'assets/pics/brilliance-jim-sachs.png');
    }

    create ()
    {
        this.game.scale.resize(800, 600);
        
        const rt = this.add.renderTexture(400, 300, 800, 600);

        const mask = rt.createBitmapMask();

        const pic = this.add.image(400, 300, 'pic');

        pic.setMask(mask);

        this.input.on('pointermove', pointer =>
        {

            if (pointer.isDown)
            {
                rt.draw('brush', pointer.x - 32, pointer.y - 32);
            }

        }, this);

        this.input.keyboard.on('keydown-SPACE', event =>
        {

            rt.resize(400, 300);

        });
    }
}

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 400,
    height: 300,
    scene: Example
};

const game = new Phaser.Game(config);

And it is broken as well

[martonkaufmann]

Hi

i tried against current master and unfortunately it is not fixed

Also tried with https://labs.phaser.io/edit.html?src=src/game%20objects/render%20texture/render%20texture%20as%20a%20mask.js&v=dev

Following code:

class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.image('brush', 'assets/sprites/brush1.png');
        this.load.image('pic', 'assets/pics/brilliance-jim-sachs.png');
    }

    create ()
    {
        this.game.scale.resize(800, 600);
        
        const rt = this.add.renderTexture(400, 300, 800, 600);

        const mask = rt.createBitmapMask();

        const pic = this.add.image(400, 300, 'pic');

        pic.setMask(mask);

        this.input.on('pointermove', pointer =>
        {

            if (pointer.isDown)
            {
                rt.draw('brush', pointer.x - 32, pointer.y - 32);
            }

        }, this);

        this.input.keyboard.on('keydown-SPACE', event =>
        {

            rt.resize(400, 300);

        });
    }
}

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 400,
    height: 300,
    scene: Example
};

const game = new Phaser.Game(config);

And it is broken as well

The example is completely broken with the link you provided. I also experience the same on my project when i try the latest beta.