【转】cocos2d-x游戏开发(十四)用shader使图片背景透明

转自：http://blog.csdn.net/dawn_moon/article/details/8631783

好吧，终于抽时间写这篇文章了。

手头上有很多人物行走图，技能特效图等，但这些图都有个纯黑色背景，怎么样将内容显示出来，让背景透明呢？前段时间搞了一下，感谢群里的童鞋们，提供了思路和方法。

这里用shader处理了像素，使黑色背景透明，直接上代码

ShaderSprite.h

 #ifndef __TestShader__ShaderSprite__
 #define __TestShader__ShaderSprite__

 #include "cocos2d.h"
 USING_NS_CC;

 class ShaderSprite : public CCSprite {

 public:
     static ShaderSprite* create(const char* pszFileName);
     virtual bool initWithTexture(CCTexture2D *pTexture, const CCRect& rect);
     virtual void draw(void);
 };

 #endif /* defined(__TestShader__ShaderSprite__) */

ShaderSprite.cpp

 #include "ShaderSprite.h"

 static CC_DLL const GLchar *transparentshader =
 #include "tansparentshader.h"

 ShaderSprite* ShaderSprite::create(const char *pszFileName)
 {
     ShaderSprite *pRet = new ShaderSprite();
     if (pRet && pRet->initWithFile(pszFileName)) {
         pRet->autorelease();
         return pRet;
     }
     else
     {
         delete pRet;
         pRet = NULL;
         return NULL;
     }
 }

 bool ShaderSprite::initWithTexture(CCTexture2D *pTexture, const CCRect& rect)
 {
     do{
 //        CCLog("override initWithTexture!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!");
         CC_BREAK_IF(!CCSprite::initWithTexture(pTexture, rect));

         // 加载顶点着色器和片元着色器
         m_pShaderProgram = new  CCGLProgram();
         m_pShaderProgram ->initWithVertexShaderByteArray(ccPositionTextureA8Color_vert, transparentshader);

         CHECK_GL_ERROR_DEBUG();

         // 启用顶点着色器的attribute变量，坐标、纹理坐标、颜色
         m_pShaderProgram->addAttribute(kCCAttributeNamePosition, kCCVertexAttrib_Position);
         m_pShaderProgram->addAttribute(kCCAttributeNameColor, kCCVertexAttrib_Color);
         m_pShaderProgram->addAttribute(kCCAttributeNameTexCoord, kCCVertexAttrib_TexCoords);

         CHECK_GL_ERROR_DEBUG();

         // 自定义着色器链接
         m_pShaderProgram->link();

         CHECK_GL_ERROR_DEBUG();

         // 设置移动、缩放、旋转矩阵
         m_pShaderProgram->updateUniforms();

         CHECK_GL_ERROR_DEBUG();

         return true;

     });
     return false;
 }

 void ShaderSprite::draw(void)
 {
 //    CCLog("override draw!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!");
     CC_PROFILER_START_CATEGORY(kCCProfilerCategorySprite, "CCSprite - draw");

     CCAssert(!m_pobBatchNode, "If CCSprite is being rendered by CCSpriteBatchNode, CCSprite#draw SHOULD NOT be called");

     CC_NODE_DRAW_SETUP();

     //
     // 启用attributes变量输入，顶点坐标，纹理坐标，颜色
     //
     ccGLEnableVertexAttribs( kCCVertexAttribFlag_PosColorTex );
     ccGLBlendFunc(m_sBlendFunc.src, m_sBlendFunc.dst);

     m_pShaderProgram->use();
     m_pShaderProgram->setUniformsForBuiltins();

     // 绑定纹理到纹理槽0
     ccGLBindTexture2D(m_pobTexture->getName());

 #define kQuadSize sizeof(m_sQuad.bl)
     long offset = (long)&m_sQuad;

     // vertex
     int diff = offsetof( ccV3F_C4B_T2F, vertices);
     glVertexAttribPointer(kCCVertexAttrib_Position, , GL_FLOAT, GL_FALSE, kQuadSize, (void*) (offset + diff));

     // texCoods
     diff = offsetof( ccV3F_C4B_T2F, texCoords);
     glVertexAttribPointer(kCCVertexAttrib_TexCoords, , GL_FLOAT, GL_FALSE, kQuadSize, (void*)(offset + diff));

     // color
     diff = offsetof( ccV3F_C4B_T2F, colors);
     glVertexAttribPointer(kCCVertexAttrib_Color, , GL_UNSIGNED_BYTE, GL_TRUE, kQuadSize, (void*)(offset + diff));

     glDrawArrays(GL_TRIANGLE_STRIP, , );

     CHECK_GL_ERROR_DEBUG();

     CC_INCREMENT_GL_DRAWS();
     CC_PROFILER_STOP_CATEGORY(kCCProfilerCategorySprite, "CCSprite - draw");
 }

片段着色器代码

tansparentshader.h

 "                                                       \n\
 #ifdef GL_ES                                            \n\
 precision lowp float;                                   \n\
 #endif                                                  \n\
 varying vec4 v_fragmentColor;                           \n\
 varying vec2 v_texCoord;                                \n\
 uniform sampler2D u_texture;                            \n\
 void main()                                             \n\
 {                                                       \n\
     float ratio=0.0;                                    \n\
     vec4 texColor = texture2D(u_texture, v_texCoord);   \n\
     ratio = texColor[] > texColor[]?(texColor[] > texColor[] ? texColor[] : texColor[]) :(texColor[] > texColor[]? texColor[] : texColor[]);                                      \n\
 if (ratio != 0.0)                                          \n\
 {                                                          \n\
     texColor[] = texColor[] /  ratio;                    \n\
     texColor[] = texColor[] /  ratio;                    \n\
     texColor[] = texColor[] /  ratio;                    \n\
     texColor[] = ratio;                                   \n\
 }                                                          \n\
 else                                                       \n\
 {                                                          \n\
     texColor[] = 0.0;                                     \n\
 }                                                          \n\
 gl_FragColor = v_fragmentColor*texColor;                   \n\
 }";

注意shader编程没有隐士数据类型转换，所以都显示为float了。

然后ratio是指在rgb中找最大的，如果ratio为0直接将alpha设为0，否则alpha设为ratio，然后各rgb除以ratio，这里是为了做渐变，否则变化太生硬。

上图：

好了，上面两张图是一样的。只是屏幕背景一个是白色，一个是黑色。图片背景透明了。