码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2014-07-07 14:01:20      阅读:249      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   数据   os   

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

 

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

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

 

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

 

ShaderSprite.h

 

 1 #ifndef __TestShader__ShaderSprite__
 2 #define __TestShader__ShaderSprite__
 3 
 4 #include "cocos2d.h"
 5 USING_NS_CC;
 6 
 7 class ShaderSprite : public CCSprite {
 8     
 9 public:
10     static ShaderSprite* create(const char* pszFileName);
11     virtual bool initWithTexture(CCTexture2D *pTexture, const CCRect& rect);
12     virtual void draw(void);
13 };
14 
15 #endif /* defined(__TestShader__ShaderSprite__) */

 

ShaderSprite.cpp

  1 #include "ShaderSprite.h"
  2 
  3 static CC_DLL const GLchar *transparentshader =
  4 #include "tansparentshader.h"
  5 
  6 ShaderSprite* ShaderSprite::create(const char *pszFileName)
  7 {
  8     ShaderSprite *pRet = new ShaderSprite();
  9     if (pRet && pRet->initWithFile(pszFileName)) {
 10         pRet->autorelease();
 11         return pRet;
 12     }
 13     else
 14     {
 15         delete pRet;
 16         pRet = NULL;
 17         return NULL;
 18     }
 19 }
 20 
 21 bool ShaderSprite::initWithTexture(CCTexture2D *pTexture, const CCRect& rect)
 22 {
 23     do{
 24 //        CCLog("override initWithTexture!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!");
 25         CC_BREAK_IF(!CCSprite::initWithTexture(pTexture, rect));
 26         
 27         // 加载顶点着色器和片元着色器
 28         m_pShaderProgram = new  CCGLProgram();
 29         m_pShaderProgram ->initWithVertexShaderByteArray(ccPositionTextureA8Color_vert, transparentshader);
 30         
 31         CHECK_GL_ERROR_DEBUG();
 32         
 33         // 启用顶点着色器的attribute变量,坐标、纹理坐标、颜色
 34         m_pShaderProgram->addAttribute(kCCAttributeNamePosition, kCCVertexAttrib_Position);
 35         m_pShaderProgram->addAttribute(kCCAttributeNameColor, kCCVertexAttrib_Color);
 36         m_pShaderProgram->addAttribute(kCCAttributeNameTexCoord, kCCVertexAttrib_TexCoords);
 37         
 38         CHECK_GL_ERROR_DEBUG();
 39         
 40         // 自定义着色器链接
 41         m_pShaderProgram->link();
 42         
 43         CHECK_GL_ERROR_DEBUG();
 44         
 45         // 设置移动、缩放、旋转矩阵
 46         m_pShaderProgram->updateUniforms();
 47         
 48         CHECK_GL_ERROR_DEBUG();
 49         
 50         return true;
 51         
 52     }while(0);
 53     return false;
 54 }
 55 
 56 void ShaderSprite::draw(void)
 57 {
 58 //    CCLog("override draw!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!");
 59     CC_PROFILER_START_CATEGORY(kCCProfilerCategorySprite, "CCSprite - draw");
 60     
 61     CCAssert(!m_pobBatchNode, "If CCSprite is being rendered by CCSpriteBatchNode, CCSprite#draw SHOULD NOT be called");
 62     
 63     CC_NODE_DRAW_SETUP();
 64     
 65     //
 66     // 启用attributes变量输入,顶点坐标,纹理坐标,颜色
 67     //
 68     ccGLEnableVertexAttribs( kCCVertexAttribFlag_PosColorTex );
 69     ccGLBlendFunc(m_sBlendFunc.src, m_sBlendFunc.dst);
 70     
 71     m_pShaderProgram->use();
 72     m_pShaderProgram->setUniformsForBuiltins();
 73     
 74     // 绑定纹理到纹理槽0
 75     ccGLBindTexture2D(m_pobTexture->getName());
 76 
 77 
 78     
 79 #define kQuadSize sizeof(m_sQuad.bl)
 80     long offset = (long)&m_sQuad;
 81     
 82     // vertex
 83     int diff = offsetof( ccV3F_C4B_T2F, vertices);
 84     glVertexAttribPointer(kCCVertexAttrib_Position, 3, GL_FLOAT, GL_FALSE, kQuadSize, (void*) (offset + diff));
 85     
 86     // texCoods
 87     diff = offsetof( ccV3F_C4B_T2F, texCoords);
 88     glVertexAttribPointer(kCCVertexAttrib_TexCoords, 2, GL_FLOAT, GL_FALSE, kQuadSize, (void*)(offset + diff));
 89     
 90     // color
 91     diff = offsetof( ccV3F_C4B_T2F, colors);
 92     glVertexAttribPointer(kCCVertexAttrib_Color, 4, GL_UNSIGNED_BYTE, GL_TRUE, kQuadSize, (void*)(offset + diff));
 93     
 94     
 95     glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
 96     
 97     CHECK_GL_ERROR_DEBUG();
 98 
 99     CC_INCREMENT_GL_DRAWS(1);
100     CC_PROFILER_STOP_CATEGORY(kCCProfilerCategorySprite, "CCSprite - draw");
101 }

片段着色器代码

tansparentshader.h

 

 1 "                                                       \n\
 2 #ifdef GL_ES                                            \n 3 precision lowp float;                                   \n 4 #endif                                                  \n 5 varying vec4 v_fragmentColor;                           \n 6 varying vec2 v_texCoord;                                \n 7 uniform sampler2D u_texture;                            \n 8 void main()                                             \n 9 {                                                       \n10     float ratio=0.0;                                    \n11     vec4 texColor = texture2D(u_texture, v_texCoord);   \n12     ratio = texColor[0] > texColor[1]?(texColor[0] > texColor[2] ? texColor[0] : texColor[2]) :(texColor[1] > texColor[2]? texColor[1] : texColor[2]);                                      \n13 if (ratio != 0.0)                                          \n14 {                                                          \n15     texColor[0] = texColor[0] /  ratio;                    \n16     texColor[1] = texColor[1] /  ratio;                    \n17     texColor[2] = texColor[2] /  ratio;                    \n18     texColor[3] = ratio;                                   \n19 }                                                          \n20 else                                                       \n21 {                                                          \n22     texColor[3] = 0.0;                                     \n23 }                                                          \n24 gl_FragColor = v_fragmentColor*texColor;                   \n25 }";

 

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

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

上图:

 

bubuko.com,布布扣

bubuko.com,布布扣

 

 

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

 

 

【转】cocos2d-x游戏开发(十四)用shader使图片背景透明,布布扣,bubuko.com

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

标签:style   blog   http   color   数据   os   

原文地址:http://www.cnblogs.com/Androider123/p/3815382.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!