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