javascript - Phaser 3 中移动蒙版的问题

Question

我对掩码行为的理解有问题。我在容器内有一个圆形图像，然后将另一个稍小的图像放在顶部以在其周围创建一种边框。为了确保我可以使用各种图像，我将我从图形形状创建的圆形 mask 应用到较小的图像，以便它始终适合，即使它是矩形的。我也已将形状添加到容器中。

Container
- biggerImage
- graphics shape
- smallerImage with mask

现在我想开始移动容器，图像和蒙版都相对于容器移动。我的问题是我似乎无法让面具移动。阅读文档后，我了解到要更改蒙版位置，您需要移动创建它的形状而不是实际蒙版。通过移动容器，理论上我也移动了形状，但由于形状的实际位置从未真正改变(它是 0,0 - 相对于它所在的容器)掩码不会移动一英寸。它位于 Canvas 左上角的场景原点 (0,0)。

我有点理解为什么会这样，但我似乎无法找到解决方案。我考虑过将 mask 应用于整个容器，这样我就不必担心相对位置，但我的第一张图片也会受到 mask 的影响，这不是我打算做的。也许有一种方法可以告诉面具与容器一起移动而不是形状本身，或者也许有人对我的问题有另一种解决方案。我在下面包含了一个代码示例。

//create draggable container to move everything around
let container = this.add.container(200, 200).setInteractive({hitArea: new Phaser.Geom.Circle(0, 0, 20), hitAreaCallback: Phaser.Geom.Circle.Contains, draggable: true});

//create big circle image and add it to container
let biggerImage = this.add.image(0, 0, 'circleImage').setDisplaySize(40, 40).setTintFill(0xFFFFFF);
container.add(biggerImage);

//create smaller circle to use as a mask
let shape = this.make.graphics().fillCircle(0, 0, 15);
container.add(shape);

//create small rectangular image, apply mask and add it to container
let smallerImage = this.add.image(0, 0, 'rectImage').setMask(shape.createGeometryMask());
container.add(smallerImage);

下面是我想要的样子。

请注意这个人的较小图像如何受到 mask 的影响，而其后面的粉红色圆圈则没有。这是可行的，因为我已将图形形状的位置设置为其所在容器的位置。 mask 现在将始终保持在该位置，而不是 0,0，但它仍然不会移动。

Answer 1

我有点迟到了，但对于遇到同样问题的任何人。

文档指出:“...容器可以在其上设置掩码，也可以用作掩码。但是，容器子项不能被掩码. ...”

并且根据这个post on discourse ，您将不得不重新创建/重绘图形。

这里有一个简短的例子，展示了它是如何工作的:

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

var config = {
    type: Phaser.AUTO,
    width: 536,
    height: 183,
    physics: {
        default: 'arcade',
        arcade: {            
            gravity:{ y: 100 },
            debug: true
        }
    },
    scene: {
        preload,
        create,
        update
    }
}; 

function preload(){
    this.load.image('einstein', '//labs.phaser.io/assets/pics/ra-einstein.png');
}

function create () {
    this.add.text(10,10, 'Masks')
        .setScale(1.5)
        .setOrigin(0)
        .setStyle({fontStyle: 'bold', fontFamily: 'Arial'});

    let graphics  = this.make.graphics();
    graphics.fillStyle(0xffff00);
    graphics.fillCircle(50, 50, 50);
    graphics.generateTexture('circle', 100, 100);
    
    this.container = this.add.container(150, 90)

    let bigImage = this.add.image(0, 0, 'circle');
    
    this.container.add(bigImage);
    
    this.maskShapeGraphics = this.add.graphics()
        .fillCircle(150, 90, 40);
   
    let smallImage = this.add.image(0, 0, 'einstein')
        .setMask(this.maskShapeGraphics.createGeometryMask());
        
    this.container.add(smallImage);
    
    this.tweens.add({
        targets: this.container,
        x: {from:100, to:400},
        duration: 3000,
        loop: true,
        repeat: -1,
        yoyo: true
    });
}

function update(){
    this.maskShapeGraphics.clear()
    this.maskShapeGraphics.fillCircle(this.container.x, this.container.y, 40)
}


new Phaser.Game(config);

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