Dragon Bones实现骨骼动画换装

在游戏中我们往往有这样的需求：角色更换服饰、装备或武器等。对于DragonBones来说，所谓的换装可以通过更换对应骨骼的材质来轻松实现。

因为是更换骨骼的材质，所以我们可以在程序中动态创建新材质并赋予对应骨骼，新的材质可以是来自其他方式创建或加载的图片，也可以来自DragonBones骨骼动画编辑面板导出的材质图集（Texture Atlas）。或许你会问，如何在Flash Pro中把没有预先放在动画时间轴的材质一起打包在骨骼动画编辑面板导出的材质图集中呢？

打开本教程的示例文件DragonBones_Tutorial_ChangeClothes.fla 。这个文件中，我们把动画元件Dragon穿上了一件黄马褂，将其放在时间轴上名为clothes的层上，并调整符合各种动作。

然后请注意库中的clothTextureTemp动画元件，双击打开它，你会发现我们把打算换装的4件衣服放在时间轴不同层上，并分别将层名称与其对应。这4件衣服因为大小形状一样，所以在层中重合了。不过实际项目中，很多时候更换的衣服、武器或道具大小不尽相同，所以需要相对于骨骼动画中原始服饰的位置调整好各自坐标位置。

留意在层label上我们给第一帧的帧标签取名为temp。因为没有帧标签的动画元件，是不会被骨骼动画编辑面板识别导入的。

选中库中的Dragon和clothTextureTemp两个元件，打开骨骼动画编辑面板，点击“Import”按钮导入所选的元件，你会发现在面板中Armature List里有了一个名为clothTextureTemp的骨架并且包含clothes1至clothes4的骨骼。不用管它，我们将它们导入面板的目的不是为了编辑骨骼动画，仅仅是为了最终导出这些服装材质与骨骼动画材质到一个文件中。

接下来你只需对Dragon这个骨架进行相关的骨骼动画调整，然后点击”Export”按钮导出素材资源。这里我们导出为合并XML数据的DragonWithClothes.png 。你会发现导出的材质图集中包含了我们需要的各自衣服。:)

现在我们看看在程序中如何实现换装。打开教程3中创建的DBStarlingMultiBehavior.as文件，我们直接在这个文件中添加换装代码即可。首先将嵌入的素材更改为DragonWithClothes.png：

PSE: collapse; FONT-FAMILY: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; MAX-WIDTH: 100%; FLOAT: none !important; HEIGHT: auto !important; FONT-SIZE: 1em !important; VERTICAL-ALIGN: baseline !important; OVERFLOW: hidden !important; BORDER-TOP: 0px; TOP: auto !important; RIGHT: auto !important; FONT-WEIGHT: normal !important; BORDER-RIGHT: 0px; PADDING-TOP: 0px !important; LEFT: auto !important; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px" border="0" cellspacing="0" cellpadding="0">

[Embed(source = "../assets/DragonWithClothes.png", mimeType = "application/octet-stream")]

然后添加2个变量，数组textures保存了我们要更换服装材质的名称，整数textureIndex用来做切换材质时候的索引。

private var textures:Array = ["parts/clothes1", "parts/clothes2", "parts/clothes3", "parts/clothes4"]; private var textureIndex:int = 0;

请注意这里写的是“parts/clothes1”而不是“clothes1”，原因是Flash Pro的库中不同目录的元件名称可以相同，所以DragonBones在保存资源路径的时候也包含了目录结构。打开DragonBones_Tutorial_ChangeClothes.fla看看库里的衣服动画元件所在的目录你就明白了。:)

在键盘响应函数onKeyEventHandler中添加下面代码，这样按下键盘C键的时候调用换装函数。

case Keyboard.C:     if (e.type == KeyboardEvent.KEY_UP) {         changeClothes();     }     break;

创建换装函数changeClothes()如下：

private function changeClothes():void {     //循环更换贴图     textureIndex++;     if (textureIndex >= textures.length) {         textureIndex = textureIndex - textures.length;     }     //从骨骼面板导出的textureData中获取Image实例，也可以单独从其他图片文件中构造Image     var _textureName:String = textures[textureIndex];     var _image:Image = factory.getTextureDisplay("_textureName") as Image;     //用image替换bone.display完成换装（注意bone.display的回收）     var _bone:Bone = armature.getBone("clothes");     _bone.display.dispose();     _bone.display = _image; }

这里我们用到了dragonBones.factorys.StarlingFactory.getTextureDisplay(_textureData:TextureData, _fullName:String):Image来获取由骨骼动画编辑面板导出的材质数据，然后将对应的材质赋予给骨骼的display对象，实现了换装。当然，正如前面所说，换装的材质可以随意来自程序中载入的其他图片资源。

另外，当你熟悉了DragonBones的开源框架，你会发现可以通过代码实现更加灵活的变换，除了更换骨骼材质，你还可以在骨骼框架（Armature）中动态的删除、添加骨骼，改变骨骼的从属关系等。

OK，到此你掌握了如何在DragonBones中为你的游戏角色换装，赶紧在你的游戏中试试吧。:)