cocos2dx shader應用——sprite變灰

借鑑了多位博主的代碼，謝謝！~~分享精神！

使用版本：cocos2d-x2.2.1

在實際項目中，常常須要用到灰色圖像。好比按鈕變灰，通常狀況下，咱們須要準備三張圖，一張正常顏色圖，一張按鈕按下圖，一張按鈕變灰圖。若此種相似狀況過多，就會致使資源包過大，這顯然不是咱們願意看到的結果。此種狀況下，咱們就能夠考慮修改程序的方法，實現正常顏色圖變灰，就能夠減小資源圖。

基於上述狀況，咱們須要增長程序中圖像變灰代碼。具體有兩種思路：

（一）由於圖像在cocos2dx引擎中是使用CCImage加載進來的，圖像數據也使用CCImage存儲。所以，可使用圖像處理方法將圖像數據修改，轉換爲灰度圖，而後建立精靈；

（二）使用shader的方式，將圖像顯示轉化爲灰度圖顯示。

一、本文采用的就是第二種方式。具體步驟以下：寫好一個圖像變灰的shader程序，並放入到cocos2dx引擎下面的shader文件夾中。

//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\
";

二、ccShaders.h中添加

extern CC_DLL const GLchar * ccPositionTextureGray_frag;

三、ccShaders.cpp中添加

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

四、CCShaderCache.cpp中添加枚舉類型

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()中添加

// Position Texture Gray shader
p = new CCGLProgram();
loadDefaultShader(p, kCCShaderType_PositionTextureGray);

m_pPrograms->setObject(p, kCCShader_PositionTextureGray);
p->release();

    CCShaderCache::reloadDefaultShaders()中添加

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

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

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;

五、CCGLProgram.h中添加

#define kCCShader_PositionTextureGray              "ShaderPositionTextureGray"

六、新建一個灰度轉換調用類（以便擴展其餘的顏色轉換）

//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

//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！~

效果圖：