Flash 2D 骨骼动画框架正式更名为 DragonBones

分享ActionScript3骨骼动画和贴图整合支持Starling_动画
分享ActionScript3骨骼动画和贴图整合支持Starling_动画_02









为了方便制作独立游戏,便于制作动画,高效灵活的控制游戏动画,写了这个骨骼动画工具。时间轴动画、位图序列动画都耗时耗力,没有美术是做不出来好的效果的。这个工具很轻量,包含一套简易的骨骼引擎以及缓动引擎,做简单的动画完全没有问题,实现了类似的制作工具 Spriter 的功能,支持普通的 stage 和 Starling ,简单的实现了 TexturePacker 的功能,采用 Starling 来制作独立游戏的同学可以看看能方便高效的控制游戏角色动画
骨骼动画并没有实现反向动力学,主要是用于给在 FlashCS 里制作的关键帧补间,可以在运行的时候动态的修改控制动画的细节。
动画关键帧包含坐标 x、y 和 rotation,另外还有 scaleX、scaleY 和 alpha,不过这三个只有在用 CS 制作关键帧动画的时候才起作用。

下面简单介绍一下怎么在 FlashCS 里做一个可以让骨骼系统读取数据的动画。
创建一个显示对象,继承 Contour 类,这个显示对象里所有一级的子显示对象就是骨骼动画的关节。如图:
分享ActionScript3骨骼动画和贴图整合支持Starling_动画_03
而这些关节的实例名用来在骨骼动画中索引骨骼和显示关节用,因为 Contour 是继承的 MovieClip,可以在第一帧的时间轴上配置这个骨骼动画的骨骼关系(Contour 是生成骨骼动画的数据用的,生成数据之后,Contour 的实例就没有用处了可以销毁,而且动画数据只需要生成一次就可以重复使用,所以 Contour 设计成不考虑性能而是偏向易用性),如图:
分享ActionScript3骨骼动画和贴图整合支持Starling_动画_04
分享ActionScript3骨骼动画和贴图整合支持Starling_动画_05
分享ActionScript3骨骼动画和贴图整合支持Starling_动画_06
这个 xml 就是配置这个骨骼的关节的从属关系用的,xml 的 name() 是这个骨骼的 ID,也是 Contour.getName() 的数据来源。
这时可以先运行 ConnectionXMLMaker.encoder(Contour) 看一下返回的格式化后的 xml 数据,如图:
分享ActionScript3骨骼动画和贴图整合支持Starling_动画_07
这里需要注意的是,由于 xml 是在 Contour 的第一帧赋值的,所以初始化的时候并不能马上使用 Contour 的实例,而需要延时一帧或一段时间再使用实例,这样这个骨骼的关系就配置好了,继续做骨骼动画,为时间轴添加关键帧,并给关键帧标签命名,这个标签名就是骨骼动画的索引名,比如"stand"、"run"、"attack"等。如图:
分享ActionScript3骨骼动画和贴图整合支持Starling_动画_08

分享ActionScript3骨骼动画和贴图整合支持Starling_动画_09

动画可以只有一个关键帧,也可以是两个或多个,并且关键帧之间的帧长度也是会影响动画速度的,可以看下 Example03.fla 里"attack"动画会有帧长度,就能明白大概了。

现在 ConnectionXMLMaker.encoder(Contour) 得到的 xml 格式化数据就包含了骨骼动画的数据(xml 里的 animation 节点),这些 x、y、rotation、scaleX、scaleY、alpha等,都是相对数据,就是相对于上边的 xml 中的 bone 节点的相对运动值。如图:

分享ActionScript3骨骼动画和贴图整合支持Starling_动画_10

这样这个骨骼动画的数据就可以使用了,例子3:骨骼动画模板

可以看到这个例子里,动画数据可以直接使用在普通的 stage 动画上,也可以让 Starling 使用,而 Starling 使用的时候,需用到类似 TexturePacker 的功能,例子4:ExampleTexture

这个例子里,说明了一些如何能更好的修饰动画的方法,可以对比一下上下动画的不同之处,源码里也有注释,例子5:关键帧动画修饰

使用这种拼接的骨骼动画,能灵活的控制动画的细节,而且制作简单,还不需要位图序列,不需要占用大量内存,有的游戏需要换装,换武器,这种动画都能很好的解决,很适合制作独立游戏的同学。

这个例子里,实现了一些如何动态控制骨骼的方法,例子8:动态控制骨骼

《植物大战僵尸》的动画就是用FlashCS制作,并用jsfl读取动画数据,然后在游戏里使用的,因为年度版的游戏里有Fla源码,我提取出来用骨骼直接套用,做了一个例子9:植物大战僵尸
分享ActionScript3骨骼动画和贴图整合支持Starling_动画_11


到这里就基本介绍完了,可能阐述的不是很清晰,大家可以看一下源码,如果觉得有用也可以自己试着尝试些别的方式来实现,我这里就抛砖引玉了。

上面的方法是比较老的版本了,大家如果想了解可以查看源码里的分支1.0,1.2与这个略有不同,但差不多,可以看看例子里的区别。