cocos2d-x 2.x CCScale9Sprite shader渲染变灰方法

之前在项目中添加了shader渲染sprite变灰，其过程中发现只有sprite类型的对象能变灰，九妹图使用变灰就无效果了。按钮中使用的图就是九妹图创建的，所以决定研究一下。如果找到变灰方法按钮不可用时灰的状态就可以不用两个图片资源了，能省不少资源。

其学习过程中参考了其它博友的文章，首先感谢他们给我的思路。

CCScale9sprite变灰基本无教程说明，所以在此将学到的写出来帮助不会的人，大神请绕过。

以下就讲一下总结sprite以及scale9Sprite变灰的方法。cocos2dx 2.0x版本均可使用

1.首先写一个变灰的shader，

1.1:ccShader_PositionTextureGray_frag.h

" \n\

#ifdef GL_ES \n\

precision lowp float; \n\

#endif \n\

\n\

varying vec4 v_fragmentColor; \n\

uniform sampler2D CC_Texture0; \n\

varying vec2 v_texCoord; \n\

\n\

void main() \n\ { \n\

vec4 col = texture2D(CC_Texture0, v_texCoord); \n\ //获取对应纹理位置的像素点

float gray = dot(col.rgb, vec3(0.299, 0.587, 0.114));\n\ //对获取的纹理像素点矩乘变灰

gl_FragColor = vec4(gray, gray, gray, col.a); \n\ //设置片段颜色并返回

} \n\

";

2.ccShaders.h中声明一个变灰shader的外部引用变量

extern CC_DLL const GLchar * ccPositionTextureGray_frag;

3.ccShaders.cpp中用ccShader_PositionTextureGray_frag.h片段着色代码初始化ccPositionTextureGray_frag变量

const GLchar * ccPositionTextureGray_frag ＝ 

#include "ccShader_PositionTextureGray_frag.h"

4.CCShaderCache.cpp中添加新的枚举类型用以标记该shader.

enum {

kCCShaderType_PositionTextureColor,

kCCShaderType_PositionTextureColorAlphaTest,

kCCShaderType_PositionColor,

kCCShaderType_PositionTexture,

kCCShaderType_PositionTexture_uColor,

kCCShaderType_PositionTextureA8Color,

kCCShaderType_Position_uColor,

kCCShaderType_PositionTextureGray,//添加的这个

kCCShaderType_MAX,

};

5.CCShaderCache::loadDefaultShaders()中添加

p = new CCGLProgram();//new 一个CCGLProgram对象

loadDefaultShader(p, kCCShaderType_PositionTextureGray);

m_pPrograms->setObject(p, kCCShader_PositionTextureGray);

    p->release();

6.CCShaderCache::loadDefaultShader(CCGLProgram *p, int type)中添加纹理使用信息

case kCCShaderType_PositionTextureGray:

p->initWithVertexShaderByteArray(ccPositionTextureColor_vert, ccPositionTextureGray_frag);

p->addAttribute(kCCAttributeNamePosition, kCCVertexAttrib_Position);

            p->addAttribute(kCCAttributeNameTexCoord, kCCVertexAttrib_TexCoords);

            p->addAttribute(kCCAttributeNameColor, kCCVertexAttrib_Color);

            break;

7.CCGLProgram.h中添加

#define kCCShader_PositionTextureGray "ShaderPositionTextureGray"

8.CCShaderCache::reloadDefaultShaders()中添加重载shader的代码

p = programForKey(kCCShader_PositionTextureGray);

p->reset();

loadDefaultShader(p, kCCShaderType_PositionTextureGray);

9.调用使用方法:

void CCGraySpriteEffect::addSpriteGray(CCSprite *pSprite) {

CCAssert(pSprite != NULL, "pSprite Should Not NULL");

pSprite->setShaderProgram(CCShaderCache::sharedShaderCache()->programForKey(kCCShader_PositionTextureGray));

}

void CCGraySpriteEffect::removeSpriteGray(CCSprite *pSprite) {

CCAssert(pSprite != NULL, "pSprite Should Not NULL");

pSprite->setShaderProgram(CCShaderCache::sharedShaderCache()->programForKey(kCCShader_PositionTextureColor));

}

10.接下来说一下九妹图的变灰方法：

查看引擎中CCScale9Sprite的实现方法其实就是将一张图渲染成了9块sprite，放入一个BatchNode。所以我们只需要获取到这个BatchNode节点以及这9个进行sprite变灰渲染即可.

CCArray* childrenArray = p9Sprite->getChildren();

    CCArray* bathChildrenArray = NULL;

    CCObject* b = NULL;

    CCARRAY_FOREACH(childrenArray, b)

 {

        CCSpriteBatchNode* pSpriteBatch = (CCSpriteBatchNode*)b;

        pSpriteBatch->setShaderProgram(CCShaderCache::sharedShaderCache()->programForKey(kCCShader_PositionTextureGray));

        bathChildrenArray = pSpriteBatch->getChildren();

    }

CCARRAY_FOREACH(bathChildrenArray, b)

{

        CCSprite* pSprite = (CCSprite*)b;

        pSprite->setShaderProgram(CCShaderCache::sharedShaderCache()->programForKey(kCCShader_PositionTextureGray));

    }