为什么这个面具在 Phaser 中不起作用？

Question

我一定是遗漏了什么...为什么这不起作用？显示整个 800x800 背景图像而不是裁剪到圆圈...

var mask;
var img;

function preload() {
  game.load.image('back', 'backdrop.jpg');
}

function create() {
  img = game.add.image(game.world.centerX, game.world.centerY,'back').anchor.setTo(0.5);
  mask = game.add.graphics(0, 0);
  mask.beginFill(0xffffff);
  mask.drawCircle(game.world.centerX, game.world.centerY, 600);
  img.mask = mask;
}

jsfiddle here

Answer 1

免责声明：我没有phaser.io

的正式经验

我可以通过更改

在你的 fiddle 中解决这个问题

img = game.add.image(game.world.centerX, game.world.centerY,'back').anchor.setTo(0.5);

至

img = game.add.image(0, 0, 'back');

JSFiddle Fork

我假设将图像放置在 centerX、centerY 位置会导致蒙版偏移图像。希望比我有更多经验的人可以在这里解释细节，但我会进一步研究并更新我的答案，因为我弄清楚了为什么要这样做。

更新

好的，我已经对文档进行了一些挖掘。首先，您想使用 img = game.add.image(0, 0, 'back');，因为在这种情况下 x 和 y 参数决定了图像的 upper-left 原点，而不是中心。通过使用 game.world.centerX 和 game.world.centerY，即使 canvas 与图像大小相同，您仍试图将背景图像放到 canvas 的中心。

使用我收集到的 .anchor.setTo(0.5)，试图将图像起源的锚点设置为 centerX 位置。但是，当您删除此锚点时，遮罩突然起作用，即使它没有正确显示（因为背景图像的位置不正确）。

理论 - 通过锚定图像，我相信不再可能对其应用蒙版。通过我所做的所有实验，在背景图像上设置锚点可以防止它被遮盖，因此遮罩只是作为 child 添加到 img 并放置在它的中心，因此为什么您看到的是白色圆圈而不是正确遮盖图像的圆圈。

Answer 2

看来我在尝试链接最后一个函数调用时对 api 的流动性有误...如果我将其分解：

img = game.add.image(game.world.centerX, game.world.centerY, 'back');
img.anchor.setTo(0.5);

现在可以使用了！

Fiddle Here

为什么这个面具在 Phaser 中不起作用？

Why isn't this mask working in Phaser?

phaser-framework