CODEWITHSUNDEEP
phaser-framework
Kenji
Kenji

Reputation: 389

Why isn't this mask working in Phaser?

I must be missing something...why isn't this working? Instead of clipping to the circle the entire 800x800 backdrop image is displayed...

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

enter image description here

Upvotes: 2

Views: 1077

Answers (2)

Kenji
Kenji

Reputation: 389

it appears I was a mistaken about the fluidity of the api in trying to chain that last function call... if I break it up:

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

it now works!

Fiddle Here

Upvotes: 1

James H
James H

Reputation: 160

Disclaimer: I have no formal experience in phaser.io

I was able to fix this in your fiddle by changing

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

to

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

JSFiddle Fork

I would assume that placing the image in the centerX,centerY position results in the mask being offset of the image. Hopefully someone with more experience than I could explain the specifics here, but I will research further and update my answer as I figure out the why to go along with the how.

Update

Okay so I've done some digging through the documentation. First, you want to use img = game.add.image(0, 0, 'back'); due to the fact that the x and y parameters in this case dictate the upper-left origin of the image, not the center. By using game.world.centerX and game.world.centerY you are trying to throw the background image to the center of the canvas even though the canvas is the same size as the image.

using .anchor.setTo(0.5) from what I can gather, is attempting to set the anchor point at which the image originates to the centerX position. However, when you remove this anchor, suddenly the mask works, even though it is not showing correctly (because the position of the background image is incorrect).

Theory - By anchoring the image, I believe that it is no longer possible to apply a mask to it. By all experimenting that I've done, having an anchor set on the background image prevents it from being masked, so the mask simply is added as a child to img and is placed as it's center, thus why you are seeing the white circle instead of the circle properly masking the image.

Upvotes: 2

Related Questions