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

http://blog.sina.com.cn/s/blog_570dfe6a01013wua.html

 

 

 

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

网站 http://dragonbones.github.com/

为了方便制作独立游戏，便于制作动画，高效灵活的控制游戏动画，写了这个骨骼动画工具。时间轴动画、位图序列动画都耗时耗力，没有美术是做不出来好的效果的。这个工具很轻量，包含一套简易的骨骼引擎以及缓动引擎，做简单的动画完全没有问题，实现了类似的制作工具 Spriter 的功能，支持普通的 stage 和 Starling ，简单的实现了 TexturePacker 的功能，采用 Starling 来制作独立游戏的同学可以看看，能方便高效的控制游戏角色动画。

骨骼动画并没有实现反向动力学，主要是用于给在 FlashCS 里制作的关键帧补间，可以在运行的时候动态的修改控制动画的细节。

例子1：骨骼的构成原理

例子2：骨骼动画的原理

动画关键帧包含坐标 x、y 和 rotation，另外还有 scaleX、scaleY 和 alpha，不过这三个只有在用 CS 制作关键帧动画的时候才起作用。

下面简单介绍一下怎么在 FlashCS 里做一个可以让骨骼系统读取数据的动画。

创建一个显示对象，继承 Contour 类，这个显示对象里所有一级的子显示对象就是骨骼动画的关节。如图：

而这些关节的实例名用来在骨骼动画中索引骨骼和显示关节用，因为 Contour 是继承的 MovieClip，可以在第一帧的时间轴上配置这个骨骼动画的骨骼关系（Contour 是生成骨骼动画的数据用的，生成数据之后，Contour 的实例就没有用处了可以销毁，而且动画数据只需要生成一次就可以重复使用，所以 Contour 设计成不考虑性能而是偏向易用性），如图：

这个 xml 就是配置这个骨骼的关节的从属关系用的，xml 的 name() 是这个骨骼的 ID，也是 Contour.getName() 的数据来源。

这时可以先运行 ConnectionXMLMaker.encoder(Contour) 看一下返回的格式化后的 xml 数据，如图：

这里需要注意的是，由于 xml 是在 Contour 的第一帧赋值的，所以初始化的时候并不能马上使用 Contour 的实例，而需要延时一帧或一段时间再使用实例，这样这个骨骼的关系就配置好了，继续做骨骼动画，为时间轴添加关键帧，并给关键帧标签命名，这个标签名就是骨骼动画的索引名，比如"stand"、"run"、"attack"等。如图：

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

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

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

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

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

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

例子6

例子7

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

《植物大战僵尸》的动画就是用FlashCS制作，并用jsfl读取动画数据，然后在游戏里使用的，因为年度版的游戏里有Fla源码，我提取出来用骨骼直接套用，做了一个例子9：植物大战僵尸

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

附上源码地址 https://github.com/akdcl/skeleton/tree/1.2

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