Question

我正在尝试将png精灵应用为另一层的遮罩。我从pixi.js官方网站上获得了这个演示文稿并制作了这个小提琴：

这是我正在使用的屏蔽的核心代码：

var brush =  PIXI.Sprite.fromImage('http://i.imgur.com/LtSbbSP.png');
brush.anchor.set(0.5);
app.stage.addChild(brush);
brush.x = app.renderer.width / 2;
brush.y = app.renderer.height / 2;

var thing = new PIXI.Graphics();
app.stage.addChild(thing);
thing.x = app.renderer.width / 2;
thing.y = app.renderer.height / 2;
thing.lineStyle(0);

container.mask = thing;

你可以看到，当它应用于＆＃34;事物时，屏蔽效果很好。 object（不是精灵，而是Graphics（）元素。现在，如果更改第31行和第37行以应用名为brush的精灵，则掩码不起作用。（单击打开和关闭遮罩）

如何为png sprite做掩蔽工作？

Answer 1

使用Sprite作为遮罩时，可以看到明亮区域，同时隐藏暗区域。使用白色图像将使png蒙版正常工作。

var brush =  PIXI.Sprite.fromImage('https://0201.nccdn.net/1_2/000/000/11a/e17/house-xxl.png');

以下是更新的小提琴： https://jsfiddle.net/ukc1rwrc/4/

Answer 2

我发现这个问题正在寻找解决同一问题的方法，我意识到这是一个老问题，但它可能有助于未来的Pixi，呃，小精灵。

问题在于它被称为alpha遮罩，它同时适用于alpha和color - 我对GLSL的了解有限，但看起来像执行遮罩的着色器需要红色通道，I＆＃39猜测是因为计算每个RGB像素的真实亮度会很昂贵。

因此，PNG上的黑色区域（红色= 0）将屏蔽目标显示对象，就像透明区域（alpha = 0）一样。这允许您也使用JPG。

＆＃34;官方＆＃34; this帖子中的确认。着色器定义here。

如何在pixijs中应用png掩码？

2 个答案: