如何将Phaser着色器与特定对象/形状隔离？

Question

我正在使用Phaser框架。这是jsfiddle：

http://jsfiddle.net/Dillybob/u3mGL/13/

以下是填充过滤器的位置：

background = game.add.sprite(0, 0);
background.width = 800;
background.height = 600;
filter = game.add.filter('Fire', 800, 600);
filter.alpha = 0.0;
background.filters = [filter];

我的线对象已分配给变量drawnObject

所以我指定该对象接收过滤器，如下所示：

drawnObject.filters = [filter];

但我的线条现在是一个红色的火热广场，而不是一条火热的背景线，为什么？

Answer 1

首先，请注意，drawnObject实际上是一个矩形的位图。它由构建线条的白色像素和占据其余位图空间的透明像素组成。

您使用的滤镜是像素着色器。像素着色器描述了GPU为所提供的位图的每个像素调用的指令。在此着色器的情况下，它会根据某些噪声函数创建火焰效果，但它不会考虑原始位图。不保留像素的原始颜色，它不会以任何方式添加到最终效果。

为了达到预期的效果，你必须修改Fire.js中的fragmentSrc，以便着色器使用并混合/混合原始颜色到最终像素颜色和/或不改变像素透明度。