Question

这是一个仅用纯色替换整个纹理的解决方案：

sprite.texture = PIXI.Texture.WHITE

显然，这不适用于透明的精灵。任何透明度最终也将保持稳定。（产生一个实心矩形）

如何更改精灵的非透明像素的颜色？

（由于所有子画面都必须是白色，因此着色不会起作用）

Answer 1

据我所知，Pixi无法做到这一点。根据Pixi维护者here的说法，您可以使用pixi-heaven软件包（https://github.com/gameofbombs/pixi-heaven）中的深色调。此确切示例在其自述文件中列出：

制作一种颜色的整个精灵：

sprite.tint = 0xffaacc;
sprite.color.dark[0] = sprite.color.light[0];
sprite.color.dark[1] = sprite.color.light[1];
sprite.color.dark[2] = sprite.color.light[2];
//dont forget to invalidate, after you changed dark DIRECTLY
sprite.color.invalidate();

Answer 2

您可以将custom filter应用于精灵。 “过滤器”为PixiJS's term for a shader。

从此custom filter example开始。
使用着色器修改文件shader.frag，该着色器根据当前像素返回所需的颜色或透明颜色。
可选：上面的内容将根据原始精灵不断计算出实体精灵。如果性能有问题，我认为有一种方法可以保存结果并将其设置为精灵的纹理。

片段着色器应该非常简单。这是两个很好的片段着色器教程：

WebGL Fundamentals（具体来说，这部分是WebGL Image Processing）
The Book of Shaders

Answer 3

在纯PIXI中可以使用ColorMatrixFilter：

let filter = new PIXI.filters.ColorMatrixFilter();
filter.matrix = [
    10, 10, 10, 10,
    10, 10, 10, 10,
    10, 10, 10, 10,
    -1, -1, -1, 1
];
sprite.filters = [filter];

AFAIK tint和alpha可能会停止工作，但是您可以在此之后添加其他过滤器（例如AlphaFilter）以达到类似的效果。

PIXI：仅将精灵的非透明像素更改为一种纯色

3 个答案: