Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

How to use Pixi Masking in Phaser


Travis
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 3 months later...

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

Link to comment
Share on other sites

  • 5 weeks later...

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

Link to comment
Share on other sites

  • 5 months later...
  • 5 years later...
On 7/30/2014 at 2:43 PM, lewster32 said:

 

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

 

 

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...