Quantcast
Channel: Pixi.js Latest Topics
Viewing all articles
Browse latest Browse all 3978

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

$
0
0

What i need

Clip2net_171109184946.png.ff817115e2e8419a38fa16cd83e4a621.png

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

https://jsfiddle.net/wrfthr8u/5/

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

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;

app.stage.addChild(square);
app.stage.addChild(circle);

But in addition to clipping it also modifies clipped sprite color
Clip2net_171109185432.png.3316c0ee53692d663baea96b9ae7e4d5.png


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)?


Viewing all articles
Browse latest Browse all 3978

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>