爲什麼不在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

看來我是一個錯誤的關於API的流動性在試圖鏈，去年函數調用...如果我打破它：

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

現在的作品！

Fiddle Here

Answer 2

免責聲明的：我在phaser.io

我沒有正式的經驗能夠通過更改

來解決這個問題10

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位置導致偏移的圖像。希望有比我更多經驗的人可以在這裏解釋具體內容，但是我會進一步研究並更新我的答案，因爲我弄清楚爲什麼要遵循這個方法。

更新

好了，所以我所做的，可通過文檔的一些挖。首先，由於參數x和y在這種情況下規定了圖像的左上角原點而不是中心，因此您希望使用img = game.add.image(0, 0, 'back');。通過使用game.world.centerX和game.world.centerY，即使畫布與圖像的大小相同，您仍然試圖將背景圖像放到畫布的中心。

使用從我可以收集.anchor.setTo(0.5)，試圖設定在圖像始發點到centerX位置錨點。但是，當您移除此錨點時，即使顯示不正確（因爲背景圖像的位置不正確），突然顯示的遮罩仍然有效。

理論 - 通過錨定圖像，我認爲不可能再對其應用遮罩。通過我所做的所有試驗，在背景圖像上設置一個錨點可以防止它被遮罩，因此遮罩簡單地作爲子項添加到img，並放置在中心位置，因此您爲什麼看到白色圓圈的圈子正確地掩蓋了圖像。