本文探讨了在cocos2d-x游戏中背景模糊化处理的三种方案，包括直接对精灵模糊、渲染到纹理模糊以及优化后的精灵模糊化。方案0和1在效率和效果上存在问题，而方案2通过截屏并生成普通精灵的方式，成功解决了效率问题，实现在移动设备上保持60帧的流畅体验。文章提供了相关代码实现。
在游戏中有时了为了突显前景元素，需要对背景进行一些模糊化处理，如下图所示
虽然cocos2d-x 3.x提供了新的用户模糊化的shader脚本，但根据实现方式的不同仍然会有很大区别。
方案0：对所有背景上所有精灵进行模糊化
最不可取的方案，多数情况下并不能达到预期效果，而且效率低，原因见以下两图：
第1张黑色背景是引擎示例中的效果，第2张是我在示例代码中加了一个白色背景后的效果。
这里的问题是，实际上3.x版本提供shader脚本无法很好的处理带有透明度的图片，由于示例默认都是黑色背景，因此无法看出问题，而在白色背景下，所有透明的地方都被处理成了黑色。相信现在游戏中即使背景也会有大量带有透明区域的图片，况且当我们我们模糊处理的时候经常也需要处理前景图片，那么这个问题完全不能忽视了。
我本人对shader脚本并不太熟悉，不过猜测应该可以靠修改shader脚本解决。但即使如此，对场景中多个精灵进行模糊化，效率如何呢？我们来看方案1。
方案1：截取屏幕生成一个精灵作为临时背景，并对此精灵进行模糊化
基本思路是使用渲染到纹理技术生成一个临时的图片精灵，将此精灵置于场景最上层（即Zorder高于其他精灵），成为一个假背景，而把需要突显的元素，再置于这个精灵之上。实现很容易，效果如图：
粗略看貌似没问题，但请注意左下角的帧率。实际上即使只对一个960x640尺寸的精灵进行模糊化，效率也非常低，长期保持在20帧以下。虽然这里我的运行环境是集成显卡，这也是造成帧率的低的原因之一，但台式机尚且如此，移动设备上很难表现的更好，况且移动设备还要耗电和发热问题，效率问题必须重视。于是便有了方案2。
方案2：用模糊化后的精灵生成一个普通精灵作为临时背景
效果如图：
帧数恢复到了60左右ÿ
最低0.47元/天 解锁文章
扫一扫
1217
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
