Travis

How to use Pixi Masking in Phaser

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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? 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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

 

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.