周末提交的新版本已经上线,之前购买过的朋友,记得来免费更新
v1.1.0
更新内容
- 类命名规范修改为和其他组件一样的方式
- 把纹理旋转的实现方式,从
scaleY -1
修改为flipY
,虽然这样存在无法实时修改flipY
的问题,但是这种需求是比较少的,配合flipY
的方式实现纹理的翻转,才能更好的配合各种Shader
实现特效的应用 - 增加两个新的组件
SSRFBOCloneCompoent
SSRFBOGhostComponent
已经对应的测试用例
Clone && Ghost
就像这个组件最初在介绍时说过,FBO
的一个最大的使用场景,就是配合 Shader
的使用。
由于 Shader
种类多样,其中的一种,依赖 uv
的 shader
,在合图的情况下,还可以通过坐标转换来解决。但是当作用于一些骨骼动画的时候,就只能放弃了。
Cross Shader
这里那一个很简单的,uv
依赖的 shader
做例子。
把作用对象水平,垂直的,划分成四个象限,然后染色不一样的颜色。
这个 shader
写起来是很简单的:
void main () {
vec4 c = texture2D(texture, v_uv0);
if (uv.y < 0.5) {
if (uv.x < 0.5) { // 上半部分,注意这个和 cocos 的坐标系是反的
// 左上,红色
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0) * c;
}
else {
// 右上,绿色
gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0) * c;
}
}
else {
if (uv.x < 0.5) {
// 左下,蓝色
gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0) * c;
}
else {
// 右下,黑色
gl_FragColor = vec4(0.0, 1.0, 1.0, 1.0) * c;
}
}
}
这样的一个 shader
,在直接运用到 spine
或是 drangonBones
对象上时,是绝对无法得到想要的结果的。
再加上有些骨骼动画的中心点也并非通常意义上的 cc.Node
的中点,而且 boundingBox
也很难派上用场。
Target && Clone && Ghost FBO
上一个版本中,就有了 SSRFBOTargetComponent
,这个组件。它可以实时获取指定目标的纹理,然后进行 Shader
的特效处理。
但是在实际使用的时候,通常会希望 新产生出来的一个对象可以完全把本体所替代,只展示一个加了 shader 特效的对象,让人感觉就像是本体加了特效一样。
因此这个版本引入了 CloneComponent
GhostComponent
两者都实现了上面提到的,完全替代本体,并且可以接收任何 uv 依赖的 shader。
上面的截图可以看到,第二列都是直接使用 shader
的结果,第三列则是 Clone && Ghost
的情况。
这里 红色绿色 本该在上半部分却显示在了下半部分并不是错误,是因为 FBO 有纹理垂直翻转的情况,只要像合图那样,在 Shader 做个 uv 转换就可以解决。
Clone
和 Ghost
的区别在于:
- 前者和
target
是并列关系,因此不受target
的形变影响 - 后者是
target
的子节点,受target
的形变影响 - 通常情况下,更推荐后者来实现骨骼动画的
uv Shader
特效
OffSet && Tranform
Clone
对于 Clone
的情况,由于是并列的节点关系,因此有需要实时同步 target
的缩放旋转的需求
这里通过调整 size / offset
属性,可以修正 boundingBox
的大小位置。如果骨骼动画有缩放旋转,也可以选择是否实时同步。
修正后,就可以正确的启用 Shader
的效果了。
但是这种方式不是很推荐,因为就像前面看到的,很多骨骼动画的中点不统一,在旋转缩放的时候,如果不及时再次调整 Offset
或是 Size
,那么效果又会出现问题,因此更推荐下面的 Ghost
模式。
Ghost
由于 Ghost
是以子节点的方式实现的,所以只需要简单的调整 Offset
就可以了:
target
的任何形变,子节点都不需要做出任何修改,都可以始终保持正确。
此外,通过设置两种形式的 Offset
,还可以起到一些特殊的效果,比如做到 target
的 部分消失效果。
How to Use && 如何使用
使用方式和 v.1.0.0
完全一致,只是需要 再增加一个分组 Group,用于 Clone && Ghost 模式使用。演示程序中增加了一个 Clone 和 Ghost
分组。
Known Issues && 已知问题
目前的版本还存在一些已知的问题没有修复,但都是不影响实际使用的问题,在这里先记录一下,后续会努力修复。
-
TargetComponent
使用时,如果target
在onLoad
的时候被.active = false
就会报错
但是将代码放到 start
中,就不会有问题,应该是调用时机方面的问题。
-
在运行时,改变
flipY
属性不会生效texture.setFlipY
-
Clone
和Ghost
在编辑器中实时改变大小,有时候会出现不正确的结果,只要在编辑器中刷新当前Scene
就可以恢复
总结 && Summary
这一次在加入了 Clone
和 Ghost
两个新的组建之后, SSRFBO
这一组件也越来越接近最初我想要的结果了。
就像我一直提到的,FBO
主要是在和 Shader
配合的使用中,会起到很大的作用。
就像我几年前写用 cocos2dx
写的 SSRShaderFX
,其中有很多特效和实现方式都用到了 FBO
。
这几天我也用 SSRFBOComponent
这个组件,在寻找 Creator
中,任何节点的 Shader
统一解决方案。
无论是否合图,静态动态,帧动画,骨骼动画,是否级联,对于任何一个 Shader
,都该有统一的表现。
配合现在 SSRFBOComponent
这个组件,应该能找到很好的解决方案(目前还有一些小的问题)。