iOS：通过在图像之间混合的平滑按钮发光效果答案

【问题标题】：iOS: Smooth button Glow effect by blending between imagesiOS：通过在图像之间混合的平滑按钮发光效果
【发布时间】：2011-04-29 15:10:12
【问题描述】：

我正在创建一个需要能够发光到不同程度的自定义按钮

如何使用这些图片制作一个按钮，在按下钻石时“发光”，并让这种发光逐渐消退到惰性状态？

我还想制作几种不同颜色的钻石...我希望从这里展示的相同库存图片中生成所有不同颜色的钻石。

我想了解可用的基本方法，足够详细，以便我可以看到每一种方法并决定采取哪条路径...

到目前为止我纠结的努力......（我将删除所有这些，或者随着解决方案的展开将其移动到可能的几个答案中......）

我可以看到 3 个潜在的解决方案路径：

总帐
看起来 GL 拥有对流程进行完全细粒度控制所需的一切，尽管核心图形所公开的功能非常接近，这将节省分布在一堆源文件中的数百行代码，这似乎是一个对于这样一个基本任务来说有点荒谬。
核心图形和核心动画来完成混合

文档接着说

未绘制样本下方的任何内容，例如当前填充颜色或其他绘图，都会显示出来。

所以我可以对左侧图像进行色度键屏蔽，设置 {0,0,0} 即黑色作为键。

这至少可以确保透明背景，现在我必须将其设置为黄色而不是灰色。

所以也许我可以开始为我的图像上下文设置黄色背景色，然后使用一些 CGContextSetBlendMode(...) 将钻石印在黄色上，然后使用色度键蒙版来获得透明背景

好的，这至少涵盖了在屏幕上显示基本的未点亮图像

现在我可以叠加闪亮的图像，使用某种混合模式，也许我可以将它保持在当前的灰度状态，这样只会增强原始图像的颜色

唯一的问题是它需要大量的实时混合

所以也许我可以预先计算动画中的每一个图像......这看起来越来越糟糕......
Cocos2D

如果这允许我将混合模式设置为加法混合，那么我可以使用适当的 Alpha 设置将发光图像合成到原始图像上。

【问题讨论】：

【解决方案1】：

在翻阅了大量文档后，最佳解决方案似乎是使用核心图形函数将源图像变成单个 2-component GL 纹理，然后使用 GL 将它们混合。

我需要将一个统一的值 gloom_factor 传递给着色器

显而易见的解决方案似乎只是使用

r,g,b = in_r,g,b * { (1 - glow_factor) * inertPixel + glow_factor * shinyPixel }

（其中 inertPixel 是惰性钻石的适当像素等）...

看起来我也可以自己制造闪光并将它们添加到顶部；不论其特征颜色如何，宝石都应闪烁白色。

【讨论】：

【解决方案2】：

在多看这个问题之后，我可以看到几个解决方案

解决方案 A -- 将光晕=0 到光晕=1 的过渡存储为内存中的 60 帧，然后在每次需要时将适当的帧加载到 GL 纹理中。

这有一个明显的好处，即图形设计师可以构建整个序列，我可以将其加载为一堆 PNG 文件。

另一个优点是这些帧不需要按顺序播放......可以即时选择合适的帧

但是，它有一个潜在的缺点，就是大量发送数据 RAM->VRAM

这可以通过使用 glTexSubImage2D 进行优化；可以同时发送几个帧，然后从 GL 中解包……实际上可能是整个序列。如果是这样，那么使用 PVRT 纹理压缩是有意义的。

解决方案 B -- 将光晕=0 和光晕=1 的图像加载为 GL 纹理，并手动编写着色器代码，将光晕因子作为均匀值并执行混合

这有一个优点，它靠近电线，可以通过各种方式进行调整。它也将非常有效。这个优点是需要维护大量的额外代码。

解决方案 C -- 设置 glBlendMode 以执行加法混合。
然后绘制发光=0 图像图像，例如在每个顶点上设置 alpha=0.2。
然后绘制glow=1图像图像，例如在每个顶点上设置alpha=0.8。

这有一个优势，它可以通过更通用的代码结构来实现——即非常通用的“绘制纹理四边形/精灵”类。

缺点是没有某种包装会有点混乱......在我的游戏中，我有几十颗钻石——任何时候都可能有 2 或 3 颗会发光。所以第一遍我会渲染一切（只需要为所有发光的东西适当地设置 Alpha），然后在第二遍我可以用适当的 Alpha 再次为发光的所有东西绘制发光的精灵。

值得注意的是，如果我追求解决方案 A，这将涉及创建某种实时电影播放器对象，这可能是一个非常有用的可重用代码组件。

【讨论】：