Some problems with simple mask

[kentskyo]

I'm missing something about getting a simple mask to work, would appreciate any clues...

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;
}

Results in:

the entire background 800x800 image with a white circle on top (the mask)

Thanks!

jsfiddle here

[kentskyo]

On 1/8/2016 at 5:53 AM, Gob0 said:

Finally got a result with your codepen example 

 

Try this:

game.cache.addImage('image-data', data.src, data);

 

[kentskyo]

changing this

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

to this:

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

allowed the mask to work, but there's something I don't understand about masks... do they assume the image masked is always at 0,0 in world coordinate space?

[stupot]

The mask lives in world coordinate space, it isn't relative to the image you apply it to.  Think of the mask as window into your world.

[kentskyo]

That's what I was thinking, but it's not behaving that way in my code above...

[stupot]

Sorry, I see.  Split the 1st line of code in create() into:

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

 

[kentskyo]

ah, interesting, that fixed it, thanks! the api was less fluid than I thought

[stupot]

Yup, a classic javascript coding error, in this case the setTo function returns a reference to the anchor point and not the phaser image you were expecting.

Is this the type or problem Typescript would have caught?