Jump to content

Mask out parts of an image?


Recommended Posts

I have a layer (displayobject) with multiple sprites inside. I want to add a circular explosion that would remove the parts of the object they overlap. So, after adding the explosion circle the current display object should.

Attached is a picture of what I want to achieve. I know that I could use a black & white mask, where everything is white and the explosion is black so it's masked, but this means creating a new bitmap as large as the entire canvas just to draw a tiny cutout and this would have to be done for each explosion.

Also, new sprites might be added after the explosion occurred, so the new items shouldn't be masked by old explosions.  The issue is that the background is a texture, not a solid color. If it was only a color I could have simply added a new circle with the background color over the shapes and it will look like a cutout. 

I think a WebGL solution such as using shaders might be used.

Question 1: Can we add a mask in PIXI that says: "hey, keep everything from the original image EXCEPT for the pixels of this mask" ?

Question 2: Do you have a better idea of how to create an explosion that removes parts of sprites that already exist and allow for new sprites to be placed over the explosion? What's the most efficient way to implement this?


PS: The sprites are actually meshes, I tried converting them to bitmap using .cacheAsBitmap on the mesh, but it seems to be buggy (the quality drastically drops and the entire mesh is actually displaced by several pixels when it is cached as a bitmap).



Link to comment
Share on other sites

Pretty cool, thanks!

Is the order preserved? So you add blood, you add transparent texture (that erases blood) and now all the blood sprites that are added on top are not affected by the transparent texture?

So, does the blendmoded sprite only affect sprites behind it?


And, last question: what if the shape sprites are moving or changing? Do I have to re-render each time to a RenderTexture?

Link to comment
Share on other sites

Sprite with clear blendmode erases everything that was drawn before it.

Yes, if you are using renderTexture, you have to render() it every time something changes.

I dont know how to explain it more, you need to study source code of pixi, its not a black box, you can deduce how things actually work.

Link to comment
Share on other sites

Thanks for your message. I have actually managed to make it work!

So, I don't even use a renderTexture, I just add the cut-out sprite with blendMode set to 20 and that's all. One hack I had to make, is that normally the PIXI.Container does not use blend modes unless you add a filter to it. So I added a VoidFilter to the container and the blending mode worked.

Link to comment
Share on other sites

Yep, that's what VoidFilter is for. Btw, it'll be renamed in AlphaFilter in 4.6.0, so beware deprecation notices :) (https://github.com/pixijs/pixi.js/pull/4349)

VoidFilter + blendMode is the same as blendMode in Flash container, but in Flash its not possible to assign alpha to that thing, and upgrade to AlphaFilter allows pixi to be better than Flash in this area :) Of course Flash has CLEAR and other blendmodes that vanilla pixi haven't, so its all debatable.

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

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.


  • Recently Browsing   0 members

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