javascript - 如何在 Phaser 3 中为整个容器创建 mask ？

Question

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

一旦我更新了容器的 mask 属性，就不会显示任何内容。我已经尝试了几个 Masks 组，但未能成功......

换句话说:我需要使用圆形 mask 将矩形背景“放置”在球体内部

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

这是我使用的方法:

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 即可正常工作。 (这将是最重要的问题)

p.s.: don't add the mask to the container, like in this line container.add([planet, mask, shadow]); except you want the mask Image/Shape to be rendered on the canvas.

这是一个精简的示例:

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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c9b9a1a8baacbb89fae7fcfce7fb" rel="noreferrer noopener nofollow">[email protected]</a>/dist/phaser.js"></script>

P.s.: the officials examples are pretty good. Checkout these examples