Warum funktioniert diese Maske nicht in Phaser?

Question

Ich muss etwas vermissen ... warum funktioniert das nicht? Statt die gesamte 800x800 Kulisse Bild zum Kreis Clipping angezeigt wird ...

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

es scheint, ich falsch über die Fluidität der api bei dem Versuch, Kette war, die letzte ... Anruffunktion, wenn ich es brechen:

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

es funktioniert jetzt!

Fiddle Here

Answer 2

Haftungsausschluss: Ich habe keine formale Erfahrung in phaser.io

Ich war in der Lage, dies in Ihrer Geige zu beheben, indem Sie

ändern

zu

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

JSFiddle Fork

Ich würde davon ausgehen, dass das Bild in der centerX, centerY Position Ergebnisse in der Maske Platzieren des Bildes versetzt sind. Hoffentlich kann jemand mit mehr Erfahrung als ich die Einzelheiten hier erklären, aber ich werde weiter recherchieren und meine Antwort aktualisieren, während ich herausfinden werde, warum ich mit dem Wie gehen soll.

aktualisieren

Okay, so habe ich einige Graben durch die Dokumentation erfolgen. Zunächst möchten Sie img = game.add.image(0, 0, 'back'); verwenden, da die Parameter x und y in diesem Fall den oberen linken Ursprung des Bildes und nicht die Mitte festlegen. Mit game.world.centerX und game.world.centerY versuchen Sie, das Hintergrundbild in die Mitte der Leinwand zu werfen, obwohl die Leinwand die gleiche Größe wie das Bild hat.

mit .anchor.setTo(0.5) von dem, was ich sammeln kann, versucht, den Ankerpunkt, an dem das Bild stammt, an die centerX Position zu setzen. Wenn Sie diesen Anker entfernen, funktioniert die Maske jedoch plötzlich, obwohl sie nicht korrekt angezeigt wird (weil die Position des Hintergrundbilds falsch ist).

Theorie - Durch die Verankerung des Bildes glaube ich, dass es nicht mehr möglich ist, eine Maske darauf anzuwenden. Bei allen Experimenten, die ich gemacht habe, verhindert das Setzen eines Ankers im Hintergrundbild, dass es maskiert wird. Daher wird die Maske einfach als untergeordnetes Element in img eingefügt und so platziert, wie es in der Mitte ist. Daher sehen Sie stattdessen den weißen Kreis des Kreises, der das Bild richtig maskiert.