【复习笔记】 cocos2d-x 2.x 渲染特效实现 六 节点树的描边效果

我们玩游戏的时候经常可以看到，当某个单位被选中之后，常常会出现一个某种颜色的描边，来突出该单位的轮廓。而我们已经实现的模糊，恰好可以使贴图边缘向周围蔓延开，所以本篇利用模糊效果来实现描边~

前篇中，节点树模糊的代码基本不用变动，因为我们还是需要先做模糊的。基本上，实现描边，思路是利用模糊后的贴图，使用某一个单色渲染，渲染出贴图的单色模糊图，而后再把原本的贴图，用普通渲染时的混合方式，与下层模糊后的贴图做混合计算，最后得到的贴图，就是我们需要的描边效果了~

因为在前篇节点树模糊的shader中，我们已经生成了模糊后的贴图，同时，又具有原贴图的颜色信息，所以只需要改一下shader中的渲染代码即可~

cocos中CCSprite默认的混合方式是：src = GL_ONE，dst = GL_ONE_MINUS_SRC_ALPHA ，因此，我们在shader中混合原贴图和模糊单色图时，也用这种方式进行。该混合方式表示：取源贴图的颜色 + 目标颜色 * （1 - 源贴图的透明度），所以，对fragment shader代码稍作修改即可：

uniform sampler2D CC_Texture0;
uniform sampler2D u_Texture1;
uniform sampler2D u_Texture2;
uniform vec2 u_BlurDis;
uniform vec3 u_StrokeColor;

varying vec4 v_Color;
varying vec2 v_TexCoord;

void main()
{
    vec4 currColor = v_Color * texture2D(CC_Texture0, v_TexCoord);
    
    vec4 finalColor = vec4(0.0, 0.0, 0.0, 0.0);
    
    finalColor += v_Color * texture2D(CC_Texture0, v_TexCoord + vec2(u_BlurDis.x, u_BlurDis.y));
    finalColor += v_Color * texture2D(CC_Texture0, v_TexCoord + vec2(u_BlurDis.x, 0.0));
    finalColor += v_Color * texture2D(CC_Texture0, v_TexCoord + vec2(u_BlurDis.x, -u_BlurDis.y));
    finalColor += v_Color * texture2D(CC_Texture0, v_TexCoord + vec2(-u_BlurDis.x, u_BlurDis.y));
    finalColor += v_Color * texture2D(CC_Texture0, v_TexCoord + vec2(-u_BlurDis.x, 0.0));
    finalColor += v_Color * texture2D(CC_Texture0, v_TexCoord + vec2(-u_BlurDis.x, -u_BlurDis.y));
    finalColor += v_Color * texture2D(CC_Texture0, v_TexCoord + vec2(0.0, u_BlurDis.y));
    finalColor += v_Color * texture2D(CC_Texture0, v_TexCoord + vec2(0.0, -u_BlurDis.y));
    finalColor += currColor;
    finalColor /= 9.0;
    
	vec4 strokeColor = vec4(u_StrokeColor.r*finalColor.a, u_StrokeColor.g*finalColor.a, u_StrokeColor.b*finalColor.a, finalColor.a);
	gl_FragColor = currColor + strokeColor  * (1.0 - currColor.a);
}

为了能够灵活控制描边的颜色，这里新增了一个uniform变量：

#define UniformStrokeColor              "u_StrokeColor"
......
_uniforms[kUniformStrokeColor] = glGetUniformLocation(program->getProgram(), UniformStrokeColor);
......
glUniform3f(_uniforms[kUniformStrokeColor], (float)_strokeColor.r/255.0f, (float)_strokeColor.g/255.0f, (float)_strokeColor.b/255.0f);

在C++代码中，需要对之前节点树渲染代码的唯一改动，就是添加上面最后一句代码，来更新u_StrokeColor的值，效果如下：

可以看到描边和原图之间，以及描边和背景之间，过度还是比较细腻和自然的。而且描边也如我们预期的那样，只出现在最外层的轮廓上，而不是每个子节点都有。