看过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代码）：
local filterData = {
"CUSTOM",
json.encode({frag = "example_outline.fsh",
shaderName = "outlineShader",
u_outlineColor = {249/255, 191/255, 56/255},
u_radius = 0.001,
u_threshold = 1.75,
})
}
local filter, param = unpack(filterData)
self.sp = display.newFilteredSprite("flattop.png", filter, param)
:pos(display.cx, display.cy)
:addTo(self)
```
这种方法会直接生成一个带描边的精灵，那么你可能要问，如果不想一开始就描边而是后面需要的时候才描边呢？那么就需要第二种方法了
newFilteredSprite创建的精灵跟普通精灵操作一样，不用担心
第二种使用方法的代码如下：
function MainScene:ctor(data)
local one = {class=cc.FilteredSpriteWithOne}
self.ship = display.newSprite("flattop.png", nil, nil, one):addTo(self)
self.btn = cc.ui.UIPushButton.new("ui_btn_start.png")
:onButtonClicked(function(event)
self:select()
end)
:pos(display.cx, display.cy)
:addTo(self)
end
function MainScene:select()
self.status = "select"
local filterData = {
"CUSTOM",
json.encode({frag = "Shaders/outline.fsh",
shaderName = "OutlineShader",
u_outlineColor = {106/255, 245/255, 247/255},
u_radius = 0.001,
u_threshold = 1.75,
})
}
local name, param = unpack(filterData)
local newFilter = filter.newFilter(name, param)
self.sp:setFilter(newFilter)
end
```
点击按钮就可以看到精灵图片被描边了
第二种方法要注意的是上面创建精灵的代码
那么如何移除效果呢？很简单：self.sp:clearFilter()
最后再次感谢jacky无私的贡献，让shader使用起来这么容易
有兴趣的朋友可以自己好好看看sample中得filter例子以及framework下得filter.lua文件，甚至去翻翻源码
