PixiJS - 在精灵上使用多个蒙版答案

【问题标题】：PixiJS - Using multiple masks on a spritePixiJS - 在精灵上使用多个蒙版
【发布时间】：2019-10-02 23:20:20
【问题描述】：

我是 PixiJS 的新手，我想不通。我知道您可以像这样在对象上设置蒙版：

mainSprite.mask = maskSprite

但是如果您需要在 mainSprite 上设置多个蒙版怎么办？我尝试使用 PIXI.Container，但它不起作用...有什么想法吗？

【问题讨论】：

标签： pixi.js

【解决方案1】：

不确定这是否是最好的方法，但您可以将多个精灵添加到容器中，然后从容器中创建纹理并将其用作遮罩

let container = new PIXI.Container();

for(let i = 0; i < 5; i++){
    let sprite = new PIXI.Sprite(TEXTURE);
    sprite.position.set(POSITION)
    container.addChild(sprite)
}

let mask = new PIXI.Sprite(RENDERER.generateTexture(container));

只需替换相关变量，这应该可以工作

【讨论】：

就是这样，谢谢！但是语法应该是： var mask = new PIXI.Sprite(renderer.generateTexture(container));
实际上，这引出了另一个问题。是否可以使用这种方法使蒙版独立移动？
啊，是的，我现在交换了那一轮。您可以更新各个精灵的位置，生成纹理，并在每一帧设置遮罩。这样做会很昂贵，所以可能要避免一直更新面具。根据您的情况，每两帧更新一次遮罩可能就足够了。
好的，谢谢 :) 奇怪的是，使用 Pixijs 做这样的事情会变得如此复杂，而仅仅使用普通的 2D 画布上下文就可以轻松完成。
@TheCat Pixi.js 主要使用 webgl - 不幸的是 webgl 比“香草画布”更复杂 - 但提供了更多的性能。