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代码)

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


" \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,至于其它版本号实现都是一样的。

測试图片



posted on 2017-04-17 10:46  wgwyanfs  阅读(332)  评论(0编辑  收藏  举报

导航