学习cocos2d-x 以来一直对里面的shader部分感兴趣，今天正好花了点时间来研究一下精灵的描边效果。
主要参考了子龙山人大神的TestCpp里面例子并结合自己的理解，实现相对比较简单。主要是根据引擎内部自带的shader相关代码来实现的。
好了废话不多说看代码：
1。首先需要打开CCShaderCache.cpp文件修改里面部分代码，添加我们描边的效果。
在此枚举值里面加入：kShaderType_LabelOutline
2。然后在 voidShaderCache::loadDefaultShaders() 函数里面加入：
p =newGLProgram();
loadDefaultShader(p,kShaderType_SpriteTextureOutline);
_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，至于其他版本实现都是一样的。
测试图片
cocos2d-x 精灵添加描边效果,布布扣,bubuko.com