Creator网格动画指南:用更小的包,做更酷炫的动画!
2017.02.22 by cocos
教程

骨骼动画中使用网格渲染(Mesh)来提升表现力已经越来越常见了,因此从推出 Spine 骨骼动画支持开始,架不住社区内要求支持网格渲染的呼声,Cocos Creator v1.4版本的引擎中一次性的升级了 Spine 和 DragonBones 两大骨骼动画格式的运行时库,在 WebGL 渲染模式和原生平台上都可以完美显示网格渲染了。

什么是网格动画

不同于逐帧动画,网格动画最大的优势在于:在不增加图片资源的基础上实现炫酷的动画效果。

所谓网格就是在图片矩形边界内自定义多边形,提高纹理集的空间使用率。网格动画就是通过移动网格点来变形图片,实现网格的扭曲,拉伸,转面等伪3D效果的动画。

在网格动画的理论基础上,可以实现图片的自由变形,以及蒙皮动画。目前最流行的两个动画编辑器 SpineDragonBones 都有支持网格动画的功能。

如何在Creator中使用网格动画

在 Creator 1.4 版本中,实现了 WebGL 环境下对 Spine 和 DragonBones 两种网格动画的支持。下面就以 Spine 动画资源的使用为例介绍一下如何使用网格动画。

首先,将 Spine 动画资源导入到 Creator 中,如下图:

spine-assets

然后,通过拖拽动画资源到场景中创建一个骨骼动画节点:

spine-node

根据实际情况调整节点和 Spine 组件的属性,并保存场景:

spine-props

最后,点击预览场景就可以看到动画效果了:

spine-mesh

在这个动画中,正在灵活甩动的尾巴就是通过 Spine 中的网格动画功能来实现的。

同样,我们也可以在 Creator 中使用 DragonBones 动画资源。具体使用方法可自行参考 Creator官网中的文档。 这里简单给大家展示一下运行效果(其中翅膀和尾巴的动画也是通过网格动画来实现的):

dragon-mesh

相关链接