为什么这个面罩不能在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

免责声明：我在[{1}}

中没有正式经验

我可以通过更改

来解决这个问题

phaser.io

到

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

JSFiddle Fork

我认为将图像放在img = game.add.image(0, 0, 'back'); ，centerX位置会导致蒙版偏移图像。希望有比我更多经验的人可以在这里解释具体细节，但我会进一步研究并更新我的答案，因为我弄清楚为什么要继续这样做。

<强>更新

好的，所以我已经完成了一些文档的挖掘工作。首先，您要使用centerY，因为在这种情况下img = game.add.image(0, 0, 'back');和x参数决定图像的左上角原点，而不是中心。使用y和game.world.centerX即使画布与图像的大小相同，您也会尝试将背景图像投射到画布的中心。

使用我可以收集的game.world.centerY，尝试设置图像来源于.anchor.setTo(0.5)位置的锚点。但是，当你删除这个锚点时，即使它没有正确显示（因为背景图像的位置不正确），掩码仍会正常工作。

理论 - 通过锚定图像，我相信不再可能对其应用蒙版。通过我所做的所有实验，在背景图像上设置一个锚点可以防止它被遮挡，所以掩码只是作为一个孩子添加到centerX并放置在它的中心，这就是你看到的原因白色圆圈代替圆圈正确遮盖图像。

Answer 2

看来我错误地认为api的流动性试图链接最后一个函数调用...如果我将其分解：

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

它现在有效！

Fiddle Here