Phaser mask is a bully

[Fenopiù]

Good morning everyone!

I've created my mask to let my group "symbols" drawn only if inside the mask.

 

mask = game.add.graphics(0, 0);    
mask.beginFill(0xffffff);          
mask.alpha = 0;                    
mask.drawRect(x, y, xx - x, yy - y)
mask.endFill();                    
symbols.mask = mask;               

 

The images who can be drawned everywhere are in the "images" group.

The images in the behind the mask and the symbols in the mask are correctly rendered.

The images that I want OVER the mask are still rendered behind the mask.

Any ideas why or how can I fix it?

[samme]

What do you mean "behind the mask"?

[Fenopiù]

I mean this:

I have a background image and a bonus image in "images" group, then some symbols in "symbols" group who is subject to the mask.

When you get the bonus, the bonus image is supposed to "fly" upon these symbols.

So the printing order should be: backgorund --> symbols --> bonus image.

When I render, otherwise, the printing order is: background --> symbols --> bonus image.

If I cut off the mask from the "symbols" group it will render the way I want... but I need the mask to avoid the symbols to appear where they are not supposed to be visible.

[samme]

Can you post a screenshot or an example?

[Fenopiù]

I think I've found the matter.

In create state I have:

images = game.add.group();
symbols  = game.add.group();

Is it possible beacause of that in render time Phaser 2.6.2 will render all "images" group and only after all "symbols" group?

In my code I call them in this order:

images.create(x, y, background);

symbols.create(x, y, symbol);

mask = game.add.graphics(0, 0);
mask.beginFill(0xffffff);
mask.alpha = 0;
mask.drawRect(x, y, xx - x, yy - y);
symbols.mask = mask;

images.create(x, y, bonus);

 

If you want an example... think about a book.

I have 2 groups on:

"hard" with 2 images(backhardcover and fronthardcover)

"soft" with many images (all the pages)

I draw the backhardcover.

Then I want pages are render just inside the backhardcover leaving a little margin, so I apply the mask to them and render them.

Now I want to put the fronthardcover on.

 

Unfortunatly my code render the backhardcover, then the fronthardcover and over both of them all the pages.

 

[samme]

If you want bonus on top you need to make a separate group for it.

Use game.debug.displayList() and look in the console.

[Fenopiù]

Ok... I don't understand why it render in group order but ok, I will do what I've to do.

Thanks @samme!