學習cocos2d-x 以來一直對裡面的shader部分感興趣，今天正好花了點時間來研究一下精靈的描邊效果。

主要參考了子龍山人大神的TestCpp裡面例子並結合自己的理解，實現相對比較簡單。主要是根據引擎內部自帶的shader相關程式碼來實現的。

好了廢話不多說看程式碼：

1。首先需要開啟CCShaderCache.cpp檔案修改裡面部分程式碼，新增我們描邊的效果。

在此列舉值裡面加入：kShaderType_LabelOutline

2。然後在 voidShaderCache::loadDefaultShaders() 函式裡面加入：

p =newGLProgram();

loadDefaultShader(p,

_programs.insert(std::make_pair(GLProgram::SHADER_NAME_SPRITE_TEXTURE_OUTLINE, p ) );

3。至於GLProgram::SHADER_NAME_SPRITE_TEXTURE_OUTLINE值的由來，

需要在CCGLProgram.h和CCGLProgram.cpp檔案裡面分別加入

static const char* SHADER_NAME_SPRITE_TEXTURE_OUTLINE;和

constchar*GLProgram::SHADER_NAME_SPRITE_TEXTURE_OUTLINE ="ShaderSpriteTextureOutline"

4。接著繼續修改voidShaderCache::loadDefaultShader(GLProgram *p,int type) 裡面的程式碼加入：

case: kShaderType_SpriteTextureOutline:

p->initWithByteArrays(ccPositionTextureColor_noMVP_vert,ccSpriteTextureOutline_frag);

p->bindAttribLocation(GLProgram::ATTRIBUTE_NAME_POSITION,GLProgram::VERTEX_ATTRIB_POSITION

p->bindAttribLocation(GLProgram::ATTRIBUTE_NAME_COLOR,GLProgram::VERTEX_ATTRIB_COLOR);

p->bindAttribLocation(GLProgram::ATTRIBUTE_NAME_TEX_COORD,GLProgram::VERTEX_ATTRIB_TEX_COORDS);

break;

5。修改完CCShaderCache.cpp檔案裡面的程式碼，還要修改ccShaders.h和ccShaders.cpp裡面程式碼，分別加入：

extern CC_DLLconstGLchar * ccSpriteTextureOutline_frag; 和

const GLchar * ccSpriteTextureOutline_frag = #include "ccShader_SpriteTexture_outline_frag.h"

6。最後在cocos2d-x-3.0 的 cocos/2d 目錄下加入ccShader_SpriteTexture_outline_frag.h檔案

（注意把此檔案和系統自己提供的相關shader片段著色器檔案放在一起）。

最關鍵的一步來了，就是片段著色器的程式碼：（這部分參考了子龍山人的shader程式碼）

我做了部分修改，程式碼如下：

"\n\

#ifdef GL_ES                                \n\

precision lowp float;                       \n\

#endif                                      \n\

                                            \n\

varying vec4 v_fragmentColor;               \n\

varying vec2 v_texCoord;                    \n\

uniform sampler2D CC_Texture0;              \n\

                                            \n\

void main()                                 \n\

{                                           \n\

    float radius = 0.002;                   \n\ //這個是描邊線的大小（註釋需要刪除）

    float threshold = 1.75;                 \n\

    vec4 accum = vec4(0.0);                 \n\

    vec4 normal = vec4(0.0);                \n\

                                            \n\

    normal = texture2D(CC_Texture0, vec2(v_texCoord.x, v_texCoord.y));                      \n\

                                                                                            \n\

    accum += texture2D(CC_Texture0, vec2(v_texCoord.x - radius, v_texCoord.y - radius));    \n\

    accum += texture2D(CC_Texture0, vec2(v_texCoord.x + radius, v_texCoord.y - radius));    \n\

    accum += texture2D(CC_Texture0, vec2(v_texCoord.x + radius, v_texCoord.y + radius));    \n\

    accum += texture2D(CC_Texture0, vec2(v_texCoord.x - radius, v_texCoord.y + radius));    \n\

                                                                                            \n\

    accum *= threshold;             \n\

                                                                                            \n\

    accum.r = 1.0;                  \n\//這裡的r，g，b為描邊的顏色（註釋需要刪除）

    accum.g = 0.2;                  \n\

    accum.b = 0.3;                  \n\

                                                                                            \n\

    normal = (accum * (1.0 - normal.a)) + (normal * normal.a);  \n\

                                                                                            \n\

    gl_FragColor = v_fragmentColor * normal;                                                \n\

}                                                                                           \n\

                                                                                            \n\

";

注意格式參照引擎自帶相關著色器程式碼。

好了說到這，基本也就說完了，自己趕快去試試看吧。我用的引擎版本是3.0，至於其他版本實現都是一樣的。

測試圖片