Is it possible to use a graphics object with a mask as another objects mask

[mahowa]

Basically I have a shape I am creating by adding a mask to a polygon.

then I want to use that object to mask a image.

I want the visible area in the original object to mask the image

An example

const poly = new Graphics()
poly.drawPolygon(...points)

const circle = new Graphics()
circle.drawCircle(...)

poly.mask = circle;

const image = PIXI.sprite.from(path)

image.mask = poly

at the moment its not working

[eXponenta]

You can't use masked graphics as mask.
for holes you MUST use beginHole in graphics api.
This add hole inside graphics.

[ivanpopelyshev]

Draw it in renderTexture, use Sprite with it as a mask.

[mahowa]

    this.poly.mask = mask;

    this.sprite.texture = this.app.renderer.generateTexture(this.poly);
    this.sprite.position.set(this.poly.vertexData[0], this.poly.vertexData[1]);
    
    then
    
      const testImage = PIXI.Sprite.from(testSprite);

       testImage.mask = this.sprite
    

is this what you are talking about?

[ivanpopelyshev]

dont forget to destroy that texture later

[ivanpopelyshev]

dont forget to add this.sprite to stage , otherwise position wont affect the transform.

[ivanpopelyshev]

Also, destroy() that texture when you dont need it anymore, or you will go to OOM hell

[mahowa]

Awesome thanks @ivanpopelyshev . in case anyone else comes across this question here is an example https://codesandbox.io/s/masked-pixijs-graphics-as-masks-cz3u5?file=/src/index.js

[mahowa]

In the case of the code above where would i destroy the texture? since its part of the sprite?

[ivanpopelyshev]

sprite.texture.destroy();
sprite.texture = newTexture

performance-wise its better to use one renderTexture of same size for everything, and not rely on generateTexture. But if it works for you, its just one texture, then its ok )

[mahowa]

Here is an even better example showing what I was trying to do since the mask will be animated
https://codesandbox.io/s/animated-masked-pixijs-graphics-as-masks-i5ux5