How to use Pixi Masking in Phaser

[Travis]

Hi!

 

What's the easiest way to access Pixi masking in Phaser, as detailed in this post: http://www.html5gamedevs.com/topic/822-pixijs-now-with-masking-webgl-and-canvas/?

 

 

[Pedro Alpera]

I'm interested in this question too.

[rich]

The mask property is available on any Phaser.Sprite (or any object that has DisplayObjectContainer somewhere in the prototype actually).

 

In the meantime to apply it to a Group you'd have to do group._container.mask though, which is a bit ugly but would still work.

[Travis]

Interesting. For anyone wondering, the implementation is the same as in the link in the OP, but with Phaser replacing PIXI.

[Travis]

I'm having an issue with masking. Currently I have a group, and 1 sprite in that group. That sprite has a mask on it. When I move the group, the mask stays in place, causing the sprite to disappear out of view. Does a mask move independently of the sprite? 

[rich]

I would have thought they do (I can't confirm just yet). I would try masking a sprite outside of Group, then moving it and seeing if the mask adjusts. If it doesn't then that's just the way Pixi handles it. If it does then it might be more to do with the Group container moving than the mask itself.

[Travis]

Ah. I realize my error now - I had a lapse in my lower-level canvas knowledge. Looking through the pixi source code, I noticed this as a console.log: ("Pixi.js warning: masks in canvas can only mask using the first path in the graphics object"). So I realized I had to clear the graphics data before I rendered the mask each frame. If you're using Canvas, you can't move the mask using just x and y - you have to redraw the mask using canvas draw functionality. Not sure how it is with WebGL.

[WhatWouldRamboDo]

Hey Guys, first of all, Phaser and Pixi are awesome. Rich and Matt Thank you.

 

I'm trying to get a mask to work from the example code, I'm using Phaser 1.1.3 and just adding a sprite and graphics and using the graphics as the mask for the sprite, basically following what I think the Phaser version of the Pixi example should be. I keep getting an error from PixiPatch.js saying that it cannot read property 'alpha' of undefined. The DisplayObject in PixiPatch.js line 113 is undefined.

atari1 = game.add.sprite(50, 50, 'atari');graphics = game.add.graphics(0, 0);graphics.beginFill(0xFF3300);graphics.lineStyle(10, 0xffd900, 1);graphics.moveTo(0,50);graphics.lineTo(250, 50);graphics.lineTo(100, 100);graphics.lineTo(250, 220);graphics.lineTo(50, 220);graphics.lineTo(0, 50);graphics.endFill();atari1.mask = graphics;

All variables are defined and both the graphic and sprite show up fine, but no masking. Am I just doing this completely wrong or could there a simple bug in the PixiPatch file?

 

Thank you

[4ucai]

Hey Guys, first of all, Phaser and Pixi are awesome. Rich and Matt Thank you.

 

I'm trying to get a mask to work from the example code, I'm using Phaser 1.1.3 and just adding a sprite and graphics and using the graphics as the mask for the sprite, basically following what I think the Phaser version of the Pixi example should be. I keep getting an error from PixiPatch.js saying that it cannot read property 'alpha' of undefined. The DisplayObject in PixiPatch.js line 113 is undefined.

atari1 = game.add.sprite(50, 50, 'atari');graphics = game.add.graphics(0, 0);graphics.beginFill(0xFF3300);graphics.lineStyle(10, 0xffd900, 1);graphics.moveTo(0,50);graphics.lineTo(250, 50);graphics.lineTo(100, 100);graphics.lineTo(250, 220);graphics.lineTo(50, 220);graphics.lineTo(0, 50);graphics.endFill();atari1.mask = graphics;

All variables are defined and both the graphic and sprite show up fine, but no masking. Am I just doing this completely wrong or could there a simple bug in the PixiPatch file?

 

Thank you

 

http://www.html5gamedevs.com/topic/3735-masking-issue/?hl=masking

[rich]

Yes the fix for this was merged with dev branch earlier this week and the issue isn't present in 1.2 at all.

[vitolipari]

Is it possible use a png image as mask ???

[lewster32]

Vitolipari, yes, but not directly on sprites/images - see this: http://examples.phaser.io/_site/view_full.html?d=display&f=alpha+mask.js&t=alpha%20mask 

[vitolipari]

Thank you!
Is it possible use only PIXI with out phaser, fro develop a webgl application?

For using gradient alpha mask, i think i can use a Movieclip...
 

[lewster32]

Yes, pixi is a separate library. If you want to just use pixi you can get it and view the docs here: http://www.pixijs.com

[terencemall]

On 7/30/2014 at 2:43 PM, lewster32 said:

Vitolipari, yes, but not directly on sprites/images - see this: http://examples.phaser.io/_site/view_full.html?d=display&f=alpha maskwrite my essaytask.js&t=alpha%20mask

 

Hello Lewis,

I'm using a spritesheet. Can I simply apply mask to the srpite or to every image in sprite? How can I do this? In the animation, the top and bottom of the sprite should blend with background. Thanks.

Terence