Dragon Bones實現骨骼動畫換裝

在游戲中我們往往有這樣的需求：角色更換服飾、裝備或武器等。對于DragonBones來說，所謂的換裝可以通過更換對應骨骼的材質來輕松實現。

因為是更換骨骼的材質，所以我們可以在程序中動態(tài)創(chuàng)建新材質并賦予對應骨骼，新的材質可以是來自其他方式創(chuàng)建或加載的圖片，也可以來自DragonBones骨骼動畫編輯面板導出的材質圖集（Texture Atlas）�；蛟S你會問，如何在Flash Pro中把沒有預先放在動畫時間軸的材質一起打包在骨骼動畫編輯面板導出的材質圖集中呢？

打開本教程的示例文件DragonBones_Tutorial_ChangeClothes.fla 。這個文件中，我們把動畫元件Dragon穿上了一件黃馬褂，將其放在時間軸上名為clothes的層上，并調整符合各種動作。

然后請注意庫中的clothTextureTemp動畫元件，雙擊打開它，你會發(fā)現我們把打算換裝的4件衣服放在時間軸不同層上，并分別將層名稱與其對應。這4件衣服因為大小形狀一樣，所以在層中重合了。不過實際項目中，很多時候更換的衣服、武器或道具大小不盡相同，所以需要相對于骨骼動畫中原始服飾的位置調整好各自坐標位置。

留意在層label上我們給第一幀的幀標簽取名為temp。因為沒有幀標簽的動畫元件，是不會被骨骼動畫編輯面板識別導入的。

選中庫中的Dragon和clothTextureTemp兩個元件，打開骨骼動畫編輯面板，點擊“Import”按鈕導入所選的元件，你會發(fā)現在面板中Armature List里有了一個名為clothTextureTemp的骨架并且包含clothes1至clothes4的骨骼。不用管它，我們將它們導入面板的目的不是為了編輯骨骼動畫，僅僅是為了最終導出這些服裝材質與骨骼動畫材質到一個文件中。

接下來你只需對Dragon這個骨架進行相關的骨骼動畫調整，然后點擊”Export”按鈕導出素材資源。這里我們導出為合并XML數據的DragonWithClothes.png 。你會發(fā)現導出的材質圖集中包含了我們需要的各自衣服。:)

現在我們看看在程序中如何實現換裝。打開教程3中創(chuàng)建的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;

創(chuàng)建換裝函數changeClothes()如下：

private function changeClothes():void {     //循環(huán)更換貼圖     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的開源框架，你會發(fā)現可以通過代碼實現更加靈活的變換，除了更換骨骼材質，你還可以在骨骼框架（Armature）中動態(tài)的刪除、添加骨骼，改變骨骼的從屬關系等。

OK，到此你掌握了如何在DragonBones中為你的游戲角色換裝，趕緊在你的游戲中試試吧。:)