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

前端之家收集整理的这篇文章主要介绍了cocos2d-x游戏开发(十四)用shader使图片背景透明前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_502_0@ 欢迎转载,地址:http://blog.csdn.net/fylz1125/article/details/8631783

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

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

@H_502_0@

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

@H_502_0@ ShaderSprite.h

@H_502_0@

  1. #ifndef__TestShader__ShaderSprite__
  2. #define__TestShader__ShaderSprite__
  3. #include"cocos2d.h"
  4. USING_NS_CC;
  5. classShaderSprite:publicCCSprite{
  6. public:
  7. staticShaderSprite*create(constchar*pszFileName);
  8. virtualboolinitWithTexture(CCTexture2D*pTexture,constCCRect&rect);
  9. virtualvoiddraw(void);
  10. };
  11. #endif/*defined(__TestShader__ShaderSprite__)*/

ShaderSprite.cpp @H_502_0@

@H_502_0@

?
    #include"ShaderSprite.h"
  1. staticCC_DLLconstGLchar*transparentshader=
  2. #include"tansparentshader.h"
  3. ShaderSprite*ShaderSprite::create(constchar*pszFileName)
  4. {
  5. ShaderSprite*pRet=newShaderSprite();
  6. if(pRet&&pRet->initWithFile(pszFileName)){
  7. pRet->autorelease();
  8. returnpRet;
  9. }
  10. else
  11. {
  12. deletepRet;
  13. pRet=NULL;
  14. returnNULL;
  15. }
  16. boolShaderSprite::initWithTexture(CCTexture2D*pTexture,constCCRect&rect)
  17. do{
  18. //CCLog("overrideinitWithTexture!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!");
  19. CC_BREAK_IF(!CCSprite::initWithTexture(pTexture,rect));
  20. //加载顶点着色器和片元着色器
  21. m_pShaderProgram=newCCGLProgram();
  22. m_pShaderProgram->initWithVertexShaderByteArray(ccPositionTextureA8Color_vert,transparentshader);
  23. CHECK_GL_ERROR_DEBUG();
  24. //启用顶点着色器的attribute变量,坐标、纹理坐标、颜色
  25. m_pShaderProgram->addAttribute(kCCAttributeNamePosition,kCCVertexAttrib_Position);
  26. m_pShaderProgram->addAttribute(kCCAttributeNameColor,kCCVertexAttrib_Color);
  27. m_pShaderProgram->addAttribute(kCCAttributeNameTexCoord,kCCVertexAttrib_TexCoords);
  28. CHECK_GL_ERROR_DEBUG();
  29. //自定义着色器链接
  30. m_pShaderProgram->link();
  31. //设置移动、缩放、旋转矩阵
  32. m_pShaderProgram->updateUniforms();
  33. returntrue;
  34. }while(0);
  35. returnfalse;
  36. voidShaderSprite::draw(void)
  37. //CCLog("overridedraw!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!");
  38. CC_PROFILER_START_CATEGORY(kCCProfilerCategorySprite,"CCSprite-draw");
  39. CCAssert(!m_pobBatchNode,"IfCCSpriteisbeingrenderedbyCCSpriteBatchNode,CCSprite#drawSHOULDNOTbecalled");
  40. CC_NODE_DRAW_SETUP();
  41. //
  42. //启用attributes变量输入,顶点坐标,纹理坐标,颜色
  43. ccGLEnableVertexAttribs(kCCVertexAttribFlag_PosColorTex);
  44. ccGLBlendFunc(m_sBlendFunc.src,m_sBlendFunc.dst);
  45. m_pShaderProgram->use();
  46. m_pShaderProgram->setUniformsForBuiltins();
  47. //绑定纹理到纹理槽0
  48. ccGLBindTexture2D(m_pobTexture->getName());
  49. #definekQuadSizesizeof(m_sQuad.bl)
  50. longoffset=(long)&m_sQuad;
  51. //vertex
  52. intdiff=offsetof(ccV3F_C4B_T2F,vertices);
  53. glVertexAttribPointer(kCCVertexAttrib_Position,3,GL_FLOAT,GL_FALSE,kQuadSize,(void*)(offset+diff));
  54. //texCoods
  55. diff=offsetof(ccV3F_C4B_T2F,texCoords);
  56. glVertexAttribPointer(kCCVertexAttrib_TexCoords,2,0); background-color:inherit">//color
  57. glVertexAttribPointer(kCCVertexAttrib_Color,4,GL_UNSIGNED_BYTE,GL_TRUE,153); list-style:decimal-leading-zero outside; color:inherit; line-height:20px; margin:0px!important; padding:0px 3px 0px 10px!important"> glDrawArrays(GL_TRIANGLE_STRIP,4);
  58. CC_INCREMENT_GL_DRAWS(1);
  59. CC_PROFILER_STOP_CATEGORY(kCCProfilerCategorySprite,"CCSprite-draw");
  60. }

片段着色器代码 @H_502_0@

@H_502_0@ tansparentshader.h

@H_502_0@

?
    "\n\
  1. #ifdefGL_ES\n\
  2. precisionlowpfloat;\n\
  3. #endif\n\
  4. varyingvec4v_fragmentColor;\n\
  5. varyingvec2v_texCoord;\n\
  6. uniformsampler2Du_texture;\n\
  7. voidmain()\n\
  8. {\n\
  9. floatratio=0.0;\n\
  10. vec4texColor=texture2D(u_texture,v_texCoord);\n\
  11. ratio=texColor[0]>texColor[1]?(texColor[0]>texColor[2]?texColor[0]:texColor[2]):(texColor[1]>texColor[2]?texColor[1]:texColor[2]);\n\
  12. if(ratio!=0.0)\n\
  13. {\n\
  14. texColor[0]=texColor[0]/ratio;\n\
  15. texColor[1]=texColor[1]/ratio;\n\
  16. texColor[2]=texColor[2]/ratio;\n\
  17. texColor[3]=ratio;\n\
  18. }\n\
  19. else\n\
  20. texColor[3]=0.0;\n\
  21. gl_FragColor=v_fragmentColor*texColor;\n\
  22. }";

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

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

@H_502_0@ 上图:

@H_502_0@

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

原文链接:https://www.f2er.com/cocos2dx/342227.html

猜你在找的Cocos2d-x相关文章