如何创建多个2D聚光灯?


12

我正在寻找创建2D“聚光灯”效果,以允许在多个实体上聚光灯。即,好像几个精灵在握火炬。对于单个实体(一个聚光灯),我使用一种技术,其中叠加了渐变精灵,并使中心点追逐该实体。该技术对于单个聚光灯效果很好。这是一个截图,以说明我在说什么:

单一焦点-作品

一个聚光灯的聚光灯效果

我遇到的问题是该技术无法扩展到多个实体。如果叠加另一个聚光灯图像,则会遇到几个问题。这是一个模拟的屏幕截图:

多个聚光灯=问题

具有两个聚光灯的聚光灯效果

最明显的问题是可见的角。可以通过使聚光灯图像巨大地覆盖整个级别来解决此问题,但这并不正确。第二个也是更棘手的问题是,我正在用这种技术有效地增加黑暗度。因此,添加的每个精灵都会使其他所有人变暗。显然我正在错误地解决此问题。

有任何想法吗?


不断的努力

评论中已经有一些关于混合选项的讨论。这是我目前的想法。在上面的单个Spotlight示例中,我使用了一个看起来像这样的图像文件:(为了更易于说明,我将透明色替换为绿色)

透明法

如上所述,问题在于该图像与另一图像的Alpha混合不会产生所需的效果。相反,它将产生以下内容:

覆盖两个透明圆

作为混合选项问题,这并不令我震惊。在我看来,问题在于这种图像具有透明遮罩和应隔离的图像(黑色正方形)。

因此,我应该使用在运行时针对黑色正方形使用的透明蒙版,而不是内置了切出的透明蒙版的黑色图像。这样做时,我仍然无法使用传统的白色和黑色透明蒙版,否则会遇到相同的问题。这是一个示例,这次白色和黑色代表白色和黑色:

透明面膜

看来,解决方案将是应用本身利用透明度的透明蒙版。像这样:(绿色=透明)

透明的透明面膜

这样,可以将多个透明蒙版混合在一起,然后将其用作黑色正方形的透明蒙版。这是两个Alpha混合在一起的透明蒙版的示例:

两个具有透明度的透明蒙版

无论如何,这就是我正在努力实现的方法。如果可行,我将发布结果。我目前不知道的是我是否可以使用本身具有透明度的透明蒙版。


考虑一下,似乎我应该在移动透明蒙版并将其应用于大的黑色纹理。不知道该怎么办。
卡梅隆·弗雷德曼

7
不确定如何创建或应用渐变,但是这可能是一个混合问题,如果使用正确的混合效果会很好。我们需要有关纹理的更多信息。
dennmat

我使用AndEngine作为框架,尽管有可用的“ setBlendFunction()”,但很多混合操作都是在幕后进行的。
卡梅隆·弗雷德曼

查看与您链接的内容,我想您可能想要在底部列出第二个解决方案,或者如果不起作用,则需要第三个解决方案。我在andEngine上不清楚,他们似乎没有文档,也许如果您在那个线程中找不到答案,他们可能会进一步提供帮助,因为好像他们已经在使用混合技术幕后的选择很多。
dennmat

尽管该线程最初似乎可以解决您的问题,但是您是否拥有包含该更改的版本?
dennmat

Answers:


3

从概念上讲,多个聚光灯的解决方案包括:

  1. 从一个全黑数组开始,以保​​存场景中每个像素的照明值。
    • 零将表示没有任何光线的图像区域。
    • 100%将代表一个完全被日光饱和的区域。
    • 如果您想花哨的话,可以使用一个大于100%(例如200%)的值来表示图像的某个区域过饱和,并将所有内容模糊成令人眼花into乱的白色像素斑点。以后再为此担心,只需暂时将值限制在0-100%之间即可。
  2. 对于屏幕内的每个光源,或距离其光晕将添加到光的边缘足够近的每个光源,请将来自该光源的光值添加到场景像素的光值数组中。
  3. 使用生成的光值数组修改场景的像素,以便:
    • 0%光照下的像素为黑色。
    • 100%光照下的像素为正常颜色。
    • 其他像素是介于两者之间的一种颜色。
    • 从屏幕截图来看,您似乎已经知道如何执行此步骤。

诀窍在于了解alpha混合可以完成这些步骤中的一个或多个。Alpha混合只是指使用Alpha贴图/图像以简单的方式修改图像或纹理的像素。通常,这也意味着它将成为一组快速的功能,或者通过特殊的硬件命令来实现,以使其更快。您可以使用常规数组和普通语言命令来完成此操作,但是使用特殊的alpha /混合库功能可能更好。...而且不会有错误。有时,这意味着使像素部分透明,但是对于您而言,这意味着:

  • 将alpha值添加到每个像素,以从#1建立光值数组。
  • 使用#1的光值数组解析步骤#3中像素的最终颜色。

我将开始查找有关您的alpha混合功能的文档,以了解它们为组合各种像素提供了哪些功能。我怀疑它们将为您需要执行的每个步骤提供功能,但是它们的名称可能不太明显。


我正在研究这个答案,并将尝试一下。值超过100%的镜头光晕/模糊的想法也是一个不错的启发。将发布更新过程中的经验教训。感谢ET
卡梅伦·弗雷德曼
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.