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

来源：互联网发布：零售药店收银软件编辑：程序博客网时间：2024/05/01 17:10

原文地址：http://www.cocoachina.com/bbs/read.php?tid-282347.html

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代码）：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
localfilterData = {
    "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,
            })
    }
 
    localfilter, param = unpack(filterData)
    self.sp = display.newFilteredSprite("flattop.png", filter, param)
        :pos(display.cx, display.cy)
        :addTo(self)

这种方法会直接生成一个带描边的精灵，那么你可能要问，如果不想一开始就描边而是后面需要的时候才描边呢？那么就需要第二种方法了
newFilteredSprite创建的精灵跟普通精灵操作一样，不用担心

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
functionMainScene:ctor(data)
    localone = {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
functionMainScene:select()
    self.status = "select"
    localfilterData = {
    "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,
    })
    }
    localname, param = unpack(filterData)
    localnewFilter = filter.newFilter(name, param)
    self.sp:setFilter(newFilter)
end

点击按钮就可以看到精灵图片被描边了
第二种方法要注意的是上面创建精灵的代码

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

0 0