quick使用之通过filter来给精灵描边

看过quick的sample里的filter例子的应该都知道，可以通过filter来使用shader文件对精灵进行各种附加效果，如最常见的变灰。很多效果，用player打开sample里的filter就能看到。此filter要特别感谢jacky，也就是你们所说的zrong大神，这套东西是他写给quick的，真真大大的受益啊。

本篇文章将通过filter的功能来给精灵图片做描边效果。

首先，准备好shader文件，其实我得文件是从cocos的cpptest里找来的，只是作为官方的test，竟然有写错的地方，吐了个槽。

上次写帖子传附件半天没搞定，而这个shader文件的内容很少，所以直接贴上来，使用的朋友直接赋值下面的代码到一个文件，然后保存为XX.fsh，比如outline.fsh

附件已经添加到一楼

varying vec2 v_texCoord;

varying vec4 v_fragmentColor;

uniform vec3 u_outlineColor;

uniform float u_threshold;

uniform float u_radius;

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;

}

fsh文件搞好后，保存到你项目能够读到的地方，比如，res目录下

第一种方法方法如下（其实完全可以参考sample中得filter代码）：

?
这种方法会直接生成一个带描边的精灵，那么你可能要问，如果不想一开始就描边而是后面需要的时候才描边呢？那么就需要第二种方法了

newFilteredSprite创建的精灵跟普通精灵操作一样，不用担心

第二种使用方法的代码如下：

?
点击按钮就可以看到精灵图片被描边了

第二种方法要注意的是上面创建精灵的代码

那么如何移除效果呢？很简单：self.sp:clearFilter()

最后再次感谢jacky无私的贡献，让shader使用起来这么容易

有兴趣的朋友可以自己好好看看sample中得filter例子以及framework下得filter.lua文件，甚至去翻翻源码