如何在 Phaser 3 中为整个容器创建遮罩？

Question

我正在尝试创建一个带有背景、球体阴影和遮罩的行星，在 Phaser 2 中实现它非常简单，但现在它对我来说有很多棘手的部分

更新容器的掩码属性后，根本不会显示任何内容。我已经尝试了几个 Masks 组，但无法成功...

换句话说：我需要使用圆形蒙版将矩形背景“放入”球体内部

我究竟做错了什么？还有其他更好的方法吗？

所以这是我使用的方法：

init({ x, y, size, sprite, id }) {
    const container = this.scene.add.container(x, y);

    const width = (1200 / 300) * 200;
    const height = 200;

    const earthBMD = this.scene.textures.createCanvas(`earthBMD${id}`, width, height);
    earthBMD.draw(0, 0, this.scene.textures.get(`map-${size}-${sprite}`).getSourceImage());
    const planet = this.scene.add.sprite(0, 0, earthBMD).setOrigin(0.5).setAngle(-15);

    const shadow = this.scene.add.sprite(0, 0, 'sphere').setOrigin(0.5, 0.5).setScale(0.5);

    const mask = this.scene.make.graphics(0, 0).fillStyle(1000000, 0.5).fillCircle(0, 0, 150);

    container.add([planet, mask, shadow]);
    container.mask = new Phaser.Display.Masks.GeometryMask(this.scene, mask);

    return container;
}

Answer 1

我想应该很容易。我不确定你的 init 函数在哪里。如果它在场景中，您只需从this.scene.... 中删除scene，它就可以正常工作。（这将是根本问题）

附：不要将 mask 添加到容器中，就像在这一行 container.add([planet, mask, shadow]); 中一样，除非您希望它可见。

这是一个精简的例子：

document.body.style = 'margin:0;';

var config = {
    type: Phaser.CANVAS,
    width: 536,
    height: 183,
    scene: {
        create
    },
    banner: false
}; 

function create () {

    const container = this.add.container(0, 0);

    const width = config.width;
    const height = config.height;

    let g = this.make.graphics({add:false});
    
    g.fillStyle(0xffff00)
    g.fillRect(10,10, 150, 150);
    
    g.generateTexture('map', 150, 150);

  
    const planet = this.add.sprite(50, 10, 'map')
      .setOrigin(0)

    const mask = this.make.graphics({add:false})
      .fillStyle(1000000, 0.5)
      .fillCircle(0, 0, 200);
    

    container.add([planet]);

    container.mask = new Phaser.Display.Masks.GeometryMask(this, mask);

}

new Phaser.Game(config);

<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>

P.s.：官方的例子都挺好的。检查这些examples