cocos2d-x 精灵加入描边效果

学习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代码）

我做了部分改动。代码例如以下：

"

#ifdef GL_ES                               

precision lowp float;                      

#endif                                     

                                           

varying vec4 v_fragmentColor;              

varying vec2 v_texCoord;                   

uniform sampler2D CC_Texture0;             

                                           

void main()                                

{                                          

    float radius = 0.002;                   //这个是描边线的大小（凝视须要删除）

    float threshold = 1.75;                

    vec4 accum = vec4(0.0);                

    vec4 normal = vec4(0.0);               

                                           

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

                                                                                           

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

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

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

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

                                                                                           

    accum *= threshold;            

                                                                                           

    accum.r = 1.0;                  //这里的r，g，b为描边的颜色（凝视须要删除）

    accum.g = 0.2;                 

    accum.b = 0.3;                 

                                                                                           

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

                                                                                           

    gl_FragColor = v_fragmentColor * normal;                                               

}                                                                                          

                                                                                           

";

注意格式參照引擎自带相关着色器代码。

好了讲到这。基本也就说完了。自己赶快去试试看吧。我用的引擎版本号是3.0，至于其它版本号实现都是一样的。

測试图片