iOS：通过图像之间混合实现平滑按钮发光效果
我正在创建一个需要能够不同程度发光的自定义按钮
我将如何使用这些图片来制作按下按钮后钻石会“发光”，并且这种发光会逐渐褪回到惰性状态吗？
我也想生产出几种不同颜色的钻石...我希望从此处提供的相同库存图像中生成所有不同颜色的钻石。
我想了解可用的基本方法，足够详细，以便我可以了解每一种方法并决定采取哪条路...
到目前为止我纠结的努力...（我将删除所有这些，或者随着解决方案的展开将其移至可能的多个答案中...）
我可以看到 3 条潜在的解决方案路径：
GL
看起来 GL 似乎拥有对流程进行完全细粒度控制所需的一切，尽管核心图形公开的功能非常接近，并且这将节省分布在一堆源文件中的数百行代码，这似乎是对于这样一个基本的任务来说有点荒谬。核心图形和核心动画来完成混合
<块引用>
文档继续说未绘制样本下方的任何内容（例如当前填充颜色或其他绘图）都会显示出来。
这样我就可以用色度键屏蔽左侧图像，设置 {0,0,0} 即黑色作为键。
这至少保证了透明的背景，现在我必须努力将其变成黄色而不是灰色。
所以也许我可以开始为我的图像上下文设置黄色背景颜色，然后使用一些 CGContextSetBlendMode(...) 将菱形印在黄色上，然后使用色度键遮罩来获得透明背景< /p>
好的，这至少涵盖了在屏幕上显示基本的无光照图像
现在我可以使用某种混合模式覆盖闪闪发光的图像，也许我可以将其保持在当前的灰度状态，这只会增强原始的颜色
唯一的问题是它需要大量实时混合
所以也许我可以预先计算动画中的每个图像...这看起来越来越混乱...
Cocos2D
如果这允许我将混合模式设置为加法混合，那么我可以使用适当的 Alpha 设置在原始图像上合成发光图像。
I am creating a custom button that needs to be able to glow to a varying degree
How would I use these pictures to make a button that 'glows' the diamond when it is pressed, and have this glow gradually fade back to inert state?
I want to churn out several different colours of diamond as well... I am hoping to generate all different coloured diamonds from the same stock images presented here.
I would like to get my head around the basic methods available, in enough detail that I can see each one through and make a decision which path to take...
My tangled efforts so far... ( I will delete all of this, or move it into possibly several answers as a solution unfolds... )
I can see 3 potential solution paths:
GL
it looks as though GL has everything it takes to get complete fine-grained control over the process, although functions exposed by core graphics come tantalisingly close, and that would save several hundred lines of code spread over a bunch of source files, which seems a bit ridiculous for such a basic task.core graphics, and core animation to accomplish the blending
documentation goes on to sayAnything underneath the unpainted samples, such as the current fill color or other drawing, shows through.
so I can chroma-key mask the left image, setting {0,0,0} ie Black as the key.
this at least secures a transparent background, now I have to work on making it yellow instead of grey.
so maybe I could have started instead with setting a yellow back colour for my image context, then use some CGContextSetBlendMode(...) to imprint the diamond on the yellow, THEN use chroma-key masking to get a transparent background
ok, this covers at least getting the basic unlit image on-screen
now I could overlay the sparkly image, using some blend mode, maybe I could keep it in its current greyscale state, and that would just boost the colours of the original
only problem with this is that it is a lot of heavy real-time blending
so maybe I could pre-calculate every image in the animation... this is looking increasingly mucky...
Cocos2D
if this allows me to set the blend mode to additive blending then I could just composite the glowing image over the original image with an appropriate Alpha setting.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
在深入研究大量文档后，最佳解决方案似乎是使用核心图形函数将源图像获取为单个 2 分量 GL 纹理，然后使用 GL 在它们之间进行混合。
我需要将统一的值glow_factor传递到着色器中
明显的解决方案似乎只是简单地使用
（其中inertPixel是惰性钻石等的适当像素）...
看起来我也可以很好地制造自己的火花和将它们添加到顶部；无论宝石的特征颜色如何，它都应该闪闪发光。
After digging through a lot of documentation, the optimal solution seems to be to use core graphics functions to get the source images into a single 2-component GL texture, and then use GL to blend between them.
I will need to pass a uniform value glow_factor into the shader
The obvious solution might seem to simply use
(where inertPixel is the appropriate pixel of the inert diamond etc)...
it looks like I would also do well to manufacture my own sparkles and add them over the top; a gem should sparkle white irrespective of its characteristic colour.
进一步研究这个问题后，我可以看到几种解决方案
解决方案 A - 将从glow=0到glow=1的过渡存储为内存中的60帧，然后将适当的帧加载到每次需要GL纹理。
这有一个明显的好处，即图形设计师可以构建整个序列，并且我可以将其作为一堆 PNG 文件加载。
另一个优点是这些帧不需要按顺序播放...可以即时选择适当的帧，
但是，它有一个潜在的缺点，即需要发送大量数据 RAM->VRAM，
这可以是使用glTexSubImage2D进行优化；可以同时发送多个帧，然后从 GL 内解包……实际上可能是整个序列。如果是这样，那么使用 PVRT 纹理压缩就有意义了。
iOS：逐帧播放-以自定义颜色帧灰度动画
解决方案 B -- 将glow=0 和glow=1 图像加载为GL 纹理，并手动编写着色器代码，将发光因子作为uniform 和执行混合
，这有一个优点，即它靠近线并且可以以各种方式进行调整。而且它将会非常高效。这个优点是需要维护大量额外的代码。
解决方案 C -- 设置 glBlendMode 执行加法混合。
然后绘制glow=0图像图像，在每个顶点上设置例如alpha=0.2。
然后绘制glow=1图像图像，在每个顶点上设置例如alpha=0.8。
这样做的一个优点是可以通过更通用的代码结构来实现——即非常通用的“绘制纹理四边形/精灵”类。
缺点是，如果没有某种包装，它会有点混乱……在我的游戏中，我有几十颗钻石——在任何时候，可能有 2 或 3 颗钻石可能会发光。所以第一遍我会渲染所有东西（只需要为所有发光的东西适当设置 Alpha ），然后在第二遍我可以为所有发光的东西使用适当的 Alpha 再次绘制发光精灵。
值得注意的是，如果我采用解决方案 A，这将涉及创建某种实时电影播放器对象，这可能是一个非常有用的可重用代码组件。
After having looked at this problem a little more, I can see several solutions
Solution A -- store the transition from glow=0 to glow=1 as 60 frames in memory, then load the appropriate frame into a GL texture every time it is required.
this has an obvious benefit that a graphic designer could construct the entire sequence and I could load it in as a bunch of PNG files.
another advantage is that these frames wouldn't need to be played in sequence... the appropriate frame can be chosen on-the-fly
however, it has a potential drawback of a lot of sending data RAM->VRAM
this can be optimised by using glTexSubImage2D; several frames can be sent simultaneously and then unpacked from within GL... in fact maybe the entire sequence. if this is so, then it would make sense to use PVRT texture compression.
iOS: playing a frame-by-frame greyscale animation in a custom colour
Solution B -- load glow=0 and glow=1 images as GL textures, and manually write shader code that takes in the glow factor as a uniform and performs the blend
this has an advantage that it is close to the wire and can be tweaked in all sorts of ways. Also it is going to be very efficient. This advantage is that it is a big extra slice of code to maintain.
Solution C -- set glBlendMode to perform additive blending.
then draw the glow=0 image image, setting eg alpha=0.2 on each vertex.
then draw the glow=1 image image, setting eg alpha=0.8 on each vertex.
this has an advantage that it can be achieved with a more generic code structure -- ie a very general ' draw textured quad / sprite ' class.
disadvantage is that without some sort of wrapper it is a bit messy... in my game I have a couple of dozen diamonds -- at any one time maybe 2 or 3 are likely to be glowing. so first-pass I would render EVERYTHING ( just need to set Alpha appropriately for everything that is glowing ) and then on the second pass I could draw the glowing sprite again with appropriate Alpha for everything that IS glowing.
it is worth noting that if I pursue solution A, this would involve creating some sort of real-time movie player object, which could be a very useful reusable code component.