[原]quick2.25让描边闪起来
本文教大家如何使用shader让描边动起来。实质就是间隔一定时间改变描边的颜色。难点:如何通过程序把颜色传给shader。想在quick2.25里面尝试的朋友,参考quick2.25精灵变灰 配置一下环境。
一、shader代码。都是cocos官方自带的
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
//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++ 也可以参考此方法)
附上最终效果图: