Resolution of BitmapMask gets somehow corrupted on game resize

[pavels]

Phaser 3.80.1

When you create small game, resize it to large and then create mask and set it on object, the object resolution gets lowered and the object becomes pixelated.

Here is reproduction code:

class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.image('ayu', 'assets/pics/ayu.png');
    }

    create ()
    {
        this.game.scale.resize(800, 600);

        const sprite = this.add.sprite(400, 300, 'ayu');

        const rt = this.make.renderTexture({x: 0, y: 0, width: 800, height: 600, add: false}).setOrigin(0.0);
        const mask = new Phaser.Display.Masks.BitmapMask(this, rt);

        rt.fill(0x000000, 1);

        this.input.on('pointerdown', pointer => {
            sprite.setMask(mask);
        })        
    }
}

const config = {
    type: Phaser.AUTO,
    width: 200,
    height: 150,
    backgroundColor: '#0a440a',
    parent: 'phaser-example',
    scene: Example
};

const game = new Phaser.Game(config);

Run the code, click on the scene and see the effect.

[pavels]

Just a note

3.55.2 is OK
3.60.0 is completely broken (the sprite disappears)
3.70.0 exhibits described bug

[orcomarcio]

I have a very similar bug.

If I apply a bitmapMask and/or postFx to a container and then resize the game (and it returns to normal if i put the resolution back to what it was when I added these effects).

3.6: container disappears or gets stretched vertically (the new resolution just has a bigger height, i guess the shader references screen % for coords). It also stops "updating", meaning even the stretched image is frozen in time.
3.7 / 3.8: works with normal sprites. SpineObjects instead disappear for some reason.

EDIT: in 3.7 / 3.8 SpineObjects don't disappear, the whole container disappears if there's at least one spine object visible

[woshisheji]

Very bad experience, I just added a mask. There was no problem at all in 3.55.2, but in 3.8.01, it was very bad. The content inside the mask is all blurred. When the mask is blocked, it is very normal. I hope to receive timely updates and handling.

list.mask = new Phaser.Display.Masks.BitmapMask(H5object, rect);

[woshisheji]

list.mask = new Phaser.Display.Masks.BitmapMask(H5object, rect);

[pavels]

There is a workaround for this - start the game with correct or larger size in config

It happens when you resize the game from small to large, so if it is possible, try to start the game closest to target size or larger and it should be fine

[woshisheji]

有一个解决方法 - 在配置中以正确或更大的尺寸开始游戏

当您将游戏大小从小到大时会发生这种情况，因此如果可能的话，请尝试启动最接近目标大小或更大的游戏，这应该没问题

尝试过，依旧会模糊的。不过没有模糊那么多。

[cy920820]

list.mask = new Phaser.Display.Masks.BitmapMask(H5object, rect);

你这里的第一张图是在游戏内绘制文字吗？ 看起来很清晰啊？怎么绘制的？

[woshisheji]

list.mask = new Phaser.Display.Masks.BitmapMask（H5object， rect）;

你这里的第一张图是在游戏内绘制文字吗？ 看起来很清晰啊？怎么绘制的？

就是普通的文字渲染

[cy920820]

list.mask = new Phaser.Display.Masks.BitmapMask（H5object， rect）;

你这里的第一张图是在游戏内绘制文字吗？ 看起来很清晰啊？怎么绘制的？

就是普通的文字渲染

我的文字渲染就很模糊在手机上看，也设置了分辨率，但就是觉得有问题，就好像近视眼在盯着画面一样的感觉

[cy920820]

我的是在手机端全屏显示的，也就是宽高都是取的 window.innerWidth, window.innerHeight

我不清楚哪里的问题，经验欠缺，我贴一下我的配置，你方便就帮忙看一眼 ：

const container = document.getElementById(parentID)
    const width = container.clientWidth
    const height = container.clientHeight
    const config = {
      type: Phaser.AUTO,
      scene: [AvgBootScene, AvgGameScene],
      parent: parentID,
      resolution: window.devicePixelRatio || 1,
      width,
      height
    }
    ```
    
    容器的宽高就是 100vw,vh

[cy920820]

@woshisheji 它会不会跟字体类型也有关系？