How to apply a mask to CustomPIXIComponent

Description

Hi Michal,

This is a question, I believe I can’t add the question label directly. I have been struggling with applying a mask with a CustomPIXIComponent. I have honestly no idea if this works. I thought I’d go ahead and ask you.

The following is my custom PIXI component, which renders a circle and animates along the X-axis:

const Circle = CustomPIXIComponent(
    {
        // Only necessary argument
        customDisplayObject: (_props: any) => new PIXI.Graphics(),
        // Apply props in a custom way with customDisplayObject passed as instance
        customApplyProps: (
            instance: PIXI.Graphics,
            oldProps: any,
            newProps: any
        ) => {
            instance.clear();
            instance.beginFill(oldProps.color, newProps.opacity);
            instance.drawCircle(oldProps.y, newProps.x, oldProps.radius);
            instance.endFill();

            if (oldProps.mask) {
                // const mask = PIXI.Sprite.fromImage("https://unsplash.it/200");
                // mask.anchor.x = 0.5;
                // mask.anchor.y = 0.5;
                // mask.position.x = newProps.x;
                // mask.position.y = oldProps.y;
                // instance.mask = oldProps.mask;
            }
        }
    },
    "Circle"
);

Which, in my render method, looks like this:

public render() {
        return (
            <Container>
                <Circle
                    x={this.bigCircleX}
                    y={this.props.stageCont
                    radius={this.bigCircleRadius}
                    opacity={this.opacity}
                    color={0xe88d3e}
                />
            </Container>
        );
}

The result:

How do I add a mask from a sprite or image, so that my circle has a ‘background’? I have tried the following:

• Render a <Sprite /> inside my <Container /> (with a Pixi.Texture.fromImage as texture prop), but then, how do I apply this mask to my drawing instance inside CustomPIXIComponent?
• Create a new PIXI.Sprite as a mask inside customApplyProps directly, applying this as instance.mask, but this does nothing, do I still need to add it to my container?

If you would have the time to give me some insights would be awesome. TIA.

[michalochman]

I think in general, with masks, you have two solutions:

1. Render <Graphics ref={maskRef} />, take the ref and a apply it with a mask prop to other rendered component, like <Sprite mask={maskRef} />. This will involve two-pass rendering, so you have to setState or call forceUpdate after mount, so the ref is not null.
2. Create a custom Mask component that will do the above for you, e.g. (simplified version, but should give you an idea): https://codesandbox.io/s/jzl912w7k9. This example also needs only a single-pass render.

[Fabiantjoeaon]

@michalochman that’s okay. I figured it out, didn’t have the time yet to post my solution here.

Like you said, using the masks as a ref works when my components are interactive, but I indeed had to be sure to call forceUpdate() after mount.

example of one of my render methods:

      <Container x={this.x} y={this.y}>
                <Sprite
                    texture={PIXI.Texture.from(this.props.profileImage)}
                    width={this.size}
                    height={this.size}
                    mask={this.mask}
                />
                <ProfileImageMask
                    size={this.size}
                    ref={(mask: any) => (this.mask = mask)}
                />
            </Container>