使用DragonBones开发FLASH骨骼动画入门教程
转自:使用DragonBones开发FLASH骨骼动画入门教程 本文转载(并略作修改)自黄竣的教程,URL是:http://dragonbones.github.com/getting_started_cn.html全文如下: DragonBones是什么?DragonBones是一套开源的 2D骨骼动画框架和工具,它包含了基于Flash Pro的骨骼动画编辑面板Skeleton Animation Design Panel及骨骼动画ActionScript框架。 它可以让开发者运用熟悉的Flash Pro元件及时间轴编辑方式,快速创建2D骨骼动画,并运用到Flash或其他技术的应用中。 Features
下载与安装设置开源项目地址:http://dragonbones.github.com
教程源码下载接下来,我们将通过几个简单的教程快速了解DragonBones的用法。 请从这里下载本教程相关源码。 教程1:针对设计师 使用DragonBones在Flash Pro中创建骨骼动画作为设计师,你只需要准备好动画角色的各个部分,在Flash Pro的时间轴中把他们有序组装起来、设置好动作关键帧并运用DragonBones的骨骼动画编辑面板搞定一切。
朱先忠注: 教程2:针对程序开发 在ActionSript项目中应用骨骼动画在设计师用骨骼动画编辑面板导出好相关格式数据之后,程序开发者就可以运用DragonBones的开源动画框架将数据资源导入到程序并让动画角色运动起来。只需几步操作,非常简单! 接下来,你将了解如何在传统DisplayList或支持GPU加速的Starling框架中调用骨骼动画。 下载Skeleton Animation Framework,将这个包导入至你的开发项目中。 在开始代码前,让我们了解下骨骼动画框架的基本概念。 Factory: 这是构建骨骼动画的基础。它负责从前面骨骼面板导出的资源中解析数据格式和准备图像资源,并且通过它创建骨骼容器Armature。 Armature: 我们可以把它想像为一个容器,它对应在Flash Pro中编辑并通过骨骼面板导出的一个MoiveClip。通过Armature来对各骨骼进行管理,播放动画等。 现在我们来看看在在传统DisplayList显示模式中添加骨骼的示例。打开此教程对应的源文件DB_Tutorial_Walk_DisplayList.as。
OK,仅此几行代码,你就可以将骨骼动画添加到已有项目。很简单,不是么?:) 下面我们聊聊在Starling中添加骨骼动画的方法。Starling是一个非常不错的开源游戏框架,它可以帮助你快速创建基于Stage 3D技术GPU加速的2D游戏。如果你对它还不了解,请访问Starling的官方网站:http://starlingframework.org。 使用Starling的用户或许对用Sprite Sheet的位图序列来构建动画非常熟悉,这种方式最大问题是对于复杂动画会占用过多内存。以下图为例,一个简单的行走动作,就会占用一大张位图材质。 而DragonBones解决了这个问题,不但仅需要少量骨骼素材,而且可以让动画更加丰富生动。 DragonBones可以完美的结合Starling,创建基于GPU加速的2D骨骼动画。 打开本示例的项目DBStarlingWalk.as源码你会发现,我们创建了一个基于Starling的factory:
而余下的代码,跟上个DisplayList的示例代码完全一致。 关于Starling中嵌入的骨骼动画素材资源,可以是合并骨骼XML数据的PNG格 式,也可以是合并XML数据的SWF格式。对于SWF格式的矢量资源,Skeleton Animation Framework会自动在程序运行时转换矢量为位图材质,节省你项目尺寸。? 教程3:创建并控制多个动作的骨骼动画接下来你将了解到运用DragonBones创建包含多个动作的骨骼动画,并在程序中通过键盘交互控制动作。
控制骨骼框架中的每根骨头对于一个有趣的游戏,仅仅播放预先设置的骨骼动画或许不够,我们需要角色具有动态可控的各自动作。令人高兴的是DragonBones提供了访问并控制骨骼框架里每根骨头的方法,让你的角色在游戏中随意运动。 此示例通过鼠标在场景中的移动来控制骨骼。我们创建了一个跟随鼠标运动的小鸟,小龙人会与小鸟保持一定距离,同时小龙人的头和胳膊会跟随小鸟运动而做出不同姿势,非常有趣。 打开DBStarlingControlBone.as,代码如下。
从上面代码我们可以看到,通过方法dragonBones.Armature.getBone(_name:String):Bone来获取某个骨骼。骨骼中的node对象包含了此骨骼的位置坐标,旋转弧度,拉伸比例,倾斜数据等等。我们根据游戏逻辑的需要对骨骼的这些参数赋数,即可实现动态控制此骨骼的效果。 在上面示例中,请留意updateBones()函数里,我们先获取到当前鼠标位置与骨骼框架中心点的夹角,然后根据这个角度,来改变小龙人的头部和胳膊的旋转弧度,从而实现了这个有趣的效果。 实现骨骼动画换装在游戏中我们往往有这样的需求:角色更换服饰、装备或武器等。对于DragonBones来说,所谓的换装可以通过更换对应骨骼的材质来轻松实现。 因为是更换骨骼的材质,所以我们可以在程序中动态创建新材质并赋予对应骨骼,新的材质可 以是来自其他方式创建或加载的图片,也可以来自DragonBones骨骼动画编辑面板导出的材质图集(Texture Atlas)。或许你会问,如何在Flash Pro中把没有预先放在动画时间轴的材质一起打包在骨骼动画编辑面板导出的材质图集中呢?
OK,到此你掌握了如何在DragonBones中为你的游戏角色换装,赶紧在你的游戏中试试吧。:)
??
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |