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

【问题标题】：Why isn't this mask working in Phaser?为什么这个面具在 Phaser 中不起作用？
【发布时间】：2016-12-23 09:19:20
【问题描述】：

我一定遗漏了什么……为什么这不起作用？显示整个 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

【问题讨论】：

标签： phaser-framework

【解决方案1】：

免责声明：我在phaser.io没有正式的经验

我可以通过更改在你的小提琴中解决这个问题

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 参数指示图像的左上角原点，而不是中心。通过使用game.world.centerX 和game.world.centerY，您试图将背景图像扔到画布的中心，即使画布与图像大小相同。

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

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

【讨论】：

谢谢你，我从来没有听说过phaser.io，直到我在为即将到来的证书考试学习javascript时发现了这个问题。这看起来很有趣。
@Kenji 确保接受他的回答，以便他获得信用
我仍在阅读文档以找出为什么它会以这种方式工作，当我弄清楚这一点时，我将编辑我的答案以扩展它。
根据我自己的发现，我用一些额外的 cmets 更新了我的答案。我应该指出，其中一些是基于文档的，还有一些是基于实验的工作理论。
感谢您调查此 James！

【解决方案2】：

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

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

现在可以了！

Fiddle Here

【讨论】：

很高兴知道，我没有考虑将它们分开。