Bug: Unable to add a mask to the text

[xhconceit]

Current Behavior

Unable to achieve 7 versions of text masking

Expected Behavior

We want to use text as a mask for an image. Something like this:

Steps to Reproduce

import { Application, Text, Sprite, Assets, Container } from "pixi.js";

(async () => {
  const app = new Application();
  await app.init({ background: "#1099bb", resizeTo: window });
  const container = new Container();
  const texture = await Assets.load(
    "https://i.kinja-img.com/gawker-media/image/upload/s--fbE5h4t0--/c_scale,fl_progressive,q_80,w_800/1501840081290294050.jpg",
  );

  var godzilla = new Sprite(texture);
  godzilla.width = 800;
  godzilla.height = 449;

  var text = new Text({
    text: "呜呜呜",
    style: {
      fontFamily: "Arial",
      fontSize: 200,
      fontWeight: "bold",
    },
  });
  text.x = 0;
  text.y = 100;
  container.addChild(godzilla);
  godzilla.mask = text;
  // text.mask = godzilla;
  app.stage.addChild(text);
  app.stage.addChild(godzilla);
  document.body.appendChild(app.canvas);
})();

Environment

• pixi.js version: e.g. 8.0.5

Possible Solution

No response

Additional Information

No response

[GoodBoyDigital]

heya! this is an interesting one. Text is no longer a sprite, so can't be used as a mask in that way any more.
Fortunately there is another way - which is added in this PR #10431

Now you can create a text texture and use it with a sprite. This is much more powerful approach as you can use the texture for whatever you fancy - beyond sprites!

const textTexture = app.renderer.canvasText.getTexture({
    text: '呜呜呜',
    style: {
      fontFamily: 'Arial',
      fontSize: 200,
      fontWeight: 'bold',
        fill: 0xffffff,
    },
  });

  const sprite = new Sprite(textTexture);
  
  sprite.x = 0;
  sprite.y = 100;
  app.stage.addChild(godzilla);
  app.stage.addChild(sprite);
  
  godzilla.mask = sprite;