Jump to content

Clipping one sprite with other using Pixi.js mask while keeping masked one original colors


Recommended Posts

What i need


I have two sprites with transparent background textures and want to clip one sprite with other, while keeping the color of clipped one.

What i tried

I tried to use DisplayObject.mask property


var app = new PIXI.Application(600, 480, {backgroundColor : 0x1099bb});

let squareTexture = PIXI.Texture.fromImage(SQUARE_IMAGE_URL);
let circleTexture = PIXI.Texture.fromImage(CIRCLE_IMAGE_URL);

let square = new PIXI.Sprite(squareTexture);
let circle = new PIXI.Sprite(circleTexture);

square.mask = circle;


But in addition to clipping it also modifies clipped sprite color

So is there any way to clip sprite in Pixi while keeping it's original color without using simple shapes painted with Graphic (i really need to do this with any texture with transparent pixels)?

Link to comment
Share on other sites


Its not intended behaviour. What version of pixi do you use? 

Sprite mask: https://github.com/pixijs/pixi.js/blob/dev/src/core/renderers/webgl/filters/spriteMask/spriteMaskFilter.frag#L20 , it uses both mask R and alpha components,.

Please post it on https://fiddle.jshell.net/ 

So is there any other way to clip one sprite with another, while keeping clipped one original color (e.g. like flash mask or svg clipPath does this)?
I'm using 4.5.6 and here is fiddle link https://fiddle.jshell.net/deaguzhf/

Link to comment
Share on other sites

Your circle isn't white. The idea is that Mask uses both R and A channel, so your R channel should also be 255.0 on circle. Why? Because people use black-and-white masks and alpha masks and we have to support both somehow. Just override the fragment shader and remove "masky.r" from it.

var maskFilter= new MySpriteMaskFilter(sprite2);
sprite1.filters = [maskFilter]


Link to comment
Share on other sites

Technically, colors are preserved. Its alpha that gets multiplied by R component ;) I think we'll add that to `PIXI.settings` for v5.

Here, I've made an issue for you: https://github.com/pixijs/pixi.js/issues/4422 I hope to post full workaround later. You can either wait either go through my explanation.

Also I congratulate you on first posts on this forum, have some likes! Not every person have informative first posts.

Link to comment
Share on other sites

  • 4 years later...

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...