cocos2d-x 滤镜对 dragonbones 的支持

目前项目需要对 dragonbones 骨骼动画增加滤镜支持。这样就可以方便地利用同一套骨骼动画资源制作例如变色、中毒或者真假英雄等效果,节省美术同学的工作量以及运行时的内存占用。

cocos2d-x-filters 项目提供的滤镜功能,是针对纹理进行操作的。用于显示的两个类 FilteredSpriteWithOneFilteredSpriteWithMulti 也是继承自 Sprite 。

但 dragonbones 是一个层级结构,dragonbones 中的那个 _display ,其实仅仅是起到了容器的作用,并没有什么特殊的渲染工作。因此要对 dragonbones 进行滤镜处理,最简单的办法就是对 dragonbones 中的每一个骨骼做滤镜处理。

具体的方法如下:

1. 创建 DBCCFilterArmature ,继承 DBCCArmature ,在其中实现 setFilterclearFilter 等方法;

2. 创建 DBCCFilterFactory ,继承 DBCCFactory ,覆盖其中的三个重载的 buildArmature 方法,使其返回 DBCCFilterArmature;覆盖 generateArmature 方法,使其生成 DBCCFilterArmature ;覆盖 generateDisplay 方法,使其返回 FilterSpriteWithOne

generateDisplay 这个覆盖是关键。因为每个骨骼动画中的各个骨骼部件的具体显示的纹理,是由这个方法生成的。在原来的方法中返回的是 Sprite ,而这里改成 FilterSpriteWithOne 就行了。因为性能的考虑,不应该让骨骼动画支持多重滤镜。

3. 还可以再实现一个 DBCCFilterArmatureNode ,集成 DBCCArmatureNode ,这是为了在使用的时候更方便。但这并非必要。

我已经将所有的代码放在 v3.x-with-dbs 分支中了。这个分支中也包含 dragonbones 的代码 c59b444af4

由于精力有限,仅仅实现了 Mac 版本的 Demo ,其他设备请自行处理。

将 cocos2d-x 3.4 的源码放在 demos/filters-cpp-demo 文件夹下即可直接编译成功。也可以使用符号链接:

cocos2d sources

下面是几个截图:

dragonbones guassian vblur filter

dragonbones saturation filter

dragonbones sharpen filter

(全文完)