cocos2d-x与UIKit混合编程实现半透明效果

关键词

cocos2d-x, UIKit, transparent

问题

cocos2d-x使用一个专门的OpenGL View进行渲染, 它的渲染和UIKit是分开进行的, 因此我们使用时一般是把cocos2d-x全屏显示, 比如 Ray的这篇教程(http://www.raywenderlich.com/4817/how-to-integrate-cocos2d-and-uikit) (cocos2d-x和cocos2d在本篇文章中没有本质区别)

如果我们把cocos2d作为一个子view插进来时, cocos2d的scene如果不加任何东西, 就会是黑色的一个矩形, 无法做成透明效果. 即使把OpenGL View的background color 设成 clearColor 也没用. cocos2d到底能不能变得透明?

通过bing艰难的找到这篇自问自答, http://stackoverflow.com/questions/12846744/cocos2d-opengl-es-becoming-transparent-over-uiview, 虽然只有一个赞, 但确实是网上唯一一个能够解决该问题的回答. 必须记录下来以飨后人.

解决方案

1. opengl view初始化时一定要选择 kEAGLColorFormatRGBA8 像素模式, 这样才能够支持透明.

    [CCEAGLView viewWithFrame: CGRectMake(0, 0, winHeight, winWidth)
                  pixelFormat: kEAGLColorFormatRGBA8
                  depthFormat: GL_DEPTH24_STENCIL8_OES
           preserveBackbuffer: NO
                   sharegroup: nil
                multiSampling: NO
              numberOfSamples: 0];

2. opengl view要启用透明模式, 有一个 opaque 属性, 默认为YES, 表示会自动把覆盖区域的内容遮挡住, 这是为了优化渲染快速裁切, 我们要把它设成 NO.

glClearColor(0, 0, 0, 0);
_cocosView.backgroundColor = [UIColor clearColor];
_cocosView.opaque = NO;

3. cocos2d-x的clear color要设置为(0, 0, 0, 0). 这个值是opengl在开始渲染每一帧时, 给每个像素设置的默认值. 因为cocos2d-x和UIKit的渲染是在不同opengl管线里实现的, 因为cocos2d-x会把UIKit渲染的内容替换到, 表现出来就是黑屏.

这个需要修改cocos2d-x的源代码, 在 CCDirector.cpp 的 void Director::setGLDefaultValues() 中, 把clear color值改一下就可以了.

使用以上三步操作, 我们就可以现在透明的cocos2d-x界面, 遮罩在UIKit上方.

cocos2d-x与UIKit混合编程实现半透明效果