Cocos2d-js 实现弹窗背景虚化效果

最新推荐文章于 2021-02-01 00:43:23 发布

qq_16602927

最新推荐文章于 2021-02-01 00:43:23 发布

阅读量1.4k

点赞数

分类专栏：移动开发文章标签： cocos2dx

本文链接：https://blog.csdn.net/qq_16602927/article/details/36477571

版权

本文介绍了如何在Cocos2d-js游戏中利用RenderTexture和FrameBuffer结合OpenGL ES 2.0 Shader实现对话框背景的虚化效果。通过将场景渲染到缓冲区，然后应用Box Blur和Gaussian Blur算法进行模糊处理，最终得到理想中的虚化背景。文章详细讲解了Shader的使用以及在iOS模拟器中遇到的问题和解决方案。

摘要由CSDN通过智能技术生成

要实现游戏中对话框的背景不是单调地叠一层半透明黑色，而是能有模糊的虚化效果。像是这个网页中第一个按钮按下去的样子。

显然，如果在要手游中实现这个效果，需要借助 OpenGL ES 2.0 Shader 来完成。

一个理想的方案是对当前场景设置一个 Shader 并在 Shader 中实现模糊效果，使得整个场景虚化。但是对话框也需要置于场景中，这会导致连对话框也虚化掉。

RenderTexture/FrameBuffer

不过好在现实也没有那么理想，在 Cocos2d 中直接对场景（CCScene）设置 Shader 是不起作用的。

一个变通的方法是将场景先绘制到缓冲区，然后再对缓冲区进行模糊。可以使用cc.director.getRunningScene().visit(); 完成这一操作：

 
        var bgTex = cc.RenderTexture.create(cc.visibleRect.width, cc.visibleRect.height); 
       
        bgTex.begin(); 
       
        cc.director.getRunningScene().visit(); 
       
        bgTex.end();