[原]quick2.25让描边闪起来

本文教大家如何使用shader让描边动起来。实质就是间隔一定时间改变描边的颜色。难点：如何通过程序把颜色传给shader。想在quick2.25里面尝试的朋友，参考quick2.25精灵变灰 配置一下环境。

一、shader代码。都是cocos官方自带的

//outLiner.vsh
#ifdef GL_ES 
    varying lowp vec4 v_fragmentColor;
    varying mediump vec2 v_texCoord;
#else
    varying vec4 v_fragmentColor;
    varying vec2 v_texCoord;
#endif
    attribute vec4 a_position;
    attribute vec2 a_texCoord;
    attribute vec4 a_color; 

    void main()
    {
        gl_Position = CC_MVPMatrix * a_position;
        v_fragmentColor = a_color;
        v_texCoord = a_texCoord;
    }

//outLiner.fsh

#ifdef GL_ES
    precision mediump float;
#endif
    varying vec2 v_texCoord;
    varying vec4 v_fragmentColor;
    uniform vec3 u_outlineColor;
    uniform float u_threshold;
    uniform float u_radius;
    uniform sampler2D CC_Texture0;

    void main()
    {
        float radius = u_radius;
        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 *= u_threshold;
        accum.rgb =  u_outlineColor * accum.a;
        accum.a = 0.0;

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

        gl_FragColor = v_fragmentColor * normal;
    }

二、shader调用

local color = {{255,0,0},{0,255,0},{0,0,255}}
local index =1

self.sp = display.newSprite("img_248.png"):addTo(self)
self:outLiner(self.sp)

local scheduler =  require("framework.scheduler")
scheduler.scheduleGlobal(handler(self,self.changeColor),0.1) --每间隔0.1秒改变一下颜色

function MainScene:changeColor()
    if index>3 then
        index = 1
    end
    local color = color[index]
    local p = self.sp:getShaderProgram()
    local outlineColor = p:getUniformLocationForName("u_outlineColor"); --对应ps里面的u_outlineColor变量
    p:use() --注意必须加这个 否则不管用
    p:setUniformLocationWith3fv(outlineColor,color,1) -- 给u_outlineColor赋值
    index = index +1
end
--实质上getUniformLocationForName里面调用opengl的glGetUniformLocation(m_uProgram, name);
--setUniformLocationWith3fv调用opengl 的glUniform3iv();
--作用就是给shader里面的uniform变量赋值
function MainScene:outLiner(node)
    local pProgram = CCGLProgram:createWithFilenames("res/shader/outLiner.vsh","res/shader/outLiner.fsh")
    pProgram:addAttribute("a_position", 0)
    pProgram:addAttribute("a_color", 1)
    pProgram:addAttribute("a_texCoord", 2)
    pProgram:link()
    pProgram:updateUniforms()
    local threshold = pProgram:getUniformLocationForName("u_threshold");
    pProgram:setUniformLocationWith1f(threshold,1.75)
    local radius = pProgram:getUniformLocationForName("u_radius");
    pProgram:setUniformLocationWith1f(radius,0.001)
    node:setShaderProgram(pProgram)
end

特别注意：导出的setUniformLocationWith3fv函数，传的第二个参数有问题，需要做如下修改：（大家以后从lua中传数组给C++ 也可以参考此方法）

附上最终效果图：