cocos2dx shader应用——sprite变灰

借鉴了多位博主的代码，谢谢！~~分享精神！

使用版本：cocos2d-x2.2.1

在实际项目中，经常需要用到灰色图像。比如按钮变灰，一般情况下，我们需要准备三张图，一张正常颜色图，一张按钮按下图，一张按钮变灰图。若此种类似情况过多，就会导致资源包过大，这显然不是我们愿意看到的结果。此种情况下，我们就可以考虑修改程序的方法，实现正常颜色图变灰，就可以减少资源图。

基于上述情况，我们需要增加程序中图像变灰代码。具体有两种思路：

（一）因为图像在cocos2dx引擎中是使用CCImage加载进来的，图像数据也使用CCImage存储。因此，可以使用图像处理方法将图像数据修改，转换为灰度图，然后创建精灵；

（二）使用shader的方式，将图像显示转化为灰度图显示。

1、本文采用的就是第二种方式。具体步骤如下：写好一个图像变灰的shader程序，并放入到cocos2dx引擎下面的shader文件夹中。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

//ccShader_PositionTextureGray_frag.h "                                           \n\ #ifdef GL_ES                                \n\ precision mediump  float ;                    \n\ #endif                                      \n\ \n\ uniform sampler2D u_texture;                \n\ varying vec2 v_texCoord;                    \n\ varying vec4 v_fragmentColor;               \n\ \n\ void  main( void )                             \n\ {                                           \n\ // Convert to greyscale using NTSC weightings               \n\ vec4 col = texture2D(u_texture, v_texCoord);                \n\ float  grey = dot(col.rgb, vec3(0.299, 0.587, 0.114));       \n\ gl_FragColor = vec4(grey, grey, grey, col.a);               \n\ }                                           \n\ ";

2、ccShaders.h中添加

1	extern  CC_DLL  const  GLchar * ccPositionTextureGray_frag;

3、ccShaders.cpp中添加

1 2	const  GLchar * ccPositionTextureGray_frag = #include "ccShader_PositionTextureGray_frag.h"

4、CCShaderCache.cpp中添加枚举类型

1 2 3 4 5 6 7 8 9 10 11 12 13 14

enum  {      kCCShaderType_PositionTextureColor,      kCCShaderType_PositionTextureColorAlphaTest,      kCCShaderType_PositionTextureGray, //add this      kCCShaderType_PositionColor,      kCCShaderType_PositionTexture,      kCCShaderType_PositionTexture_uColor,      kCCShaderType_PositionTextureA8Color,      kCCShaderType_Position_uColor,      kCCShaderType_PositionLengthTexureColor,      kCCShaderType_ControlSwitch,            kCCShaderType_MAX, };

    CCShaderCache::loadDefaultShaders()中添加

1 2 3 4 5 6

// Position Texture Gray shader p =  new  CCGLProgram(); loadDefaultShader(p, kCCShaderType_PositionTextureGray);   m_pPrograms->setObject(p, kCCShader_PositionTextureGray); p->release();

    CCShaderCache::reloadDefaultShaders()中添加

1 2 3 4

// Position Texture Gray shader p = programForKey(kCCShader_PositionTextureGray);     p->reset(); loadDefaultShader(p, kCCShaderType_PositionTextureGray);

    CCShaderCache::loadDefaultShader(CCGLProgram *p, int type)中添加

1 2 3 4 5 6 7 8

case  kCCShaderType_PositionTextureGray:      p->initWithVertexShaderByteArray(ccPositionTextureColor_vert, ccPositionTextureGray_frag);        p->addAttribute(kCCAttributeNamePosition, kCCVertexAttrib_Position);      p->addAttribute(kCCAttributeNameColor, kCCVertexAttrib_Color);      p->addAttribute(kCCAttributeNameTexCoord, kCCVertexAttrib_TexCoords);   break ;

5、CCGLProgram.h中添加

1	#define kCCShader_PositionTextureGray              "ShaderPositionTextureGray"

6、新建一个灰度转换调用类（以便扩展其他的颜色转换）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

//ColorUtils.h #ifndef __COLOR_UTILS_H__ #define __COLOR_UTILS_H__   #include "cocos2d.h" USING_NS_CC;   class  ColorUtils { public :      ColorUtils();      ~ColorUtils();        static  void  AddColorGray(CCSprite * spr);      static  void  RemoveColorGray(CCSprite * spr);   private :   };   #endif

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

//ColorUtils.cpp #include "ColorUtils.h"   ColorUtils::ColorUtils() { }   ColorUtils::~ColorUtils() { }   void  ColorUtils::AddColorGray(CCSprite * spr) {      spr->setShaderProgram(CCShaderCache::sharedShaderCache()->programForKey(kCCShader_PositionTextureGray)); }   void  ColorUtils::RemoveColorGray(CCSprite * spr) {      spr->setShaderProgram(CCShaderCache::sharedShaderCache()->programForKey(kCCShader_PositionTextureColor)); }

over！~

效果图：