Dragon Bones實(shí)現(xiàn)骨骼動(dòng)畫換裝

在游戲中我們往往有這樣的需求：角色更換服飾、裝備或武器等。對(duì)于DragonBones來(lái)說(shuō)，所謂的換裝可以通過(guò)更換對(duì)應(yīng)骨骼的材質(zhì)來(lái)輕松實(shí)現(xiàn)。

因?yàn)槭歉鼡Q骨骼的材質(zhì)，所以我們可以在程序中動(dòng)態(tài)創(chuàng)建新材質(zhì)并賦予對(duì)應(yīng)骨骼，新的材質(zhì)可以是來(lái)自其他方式創(chuàng)建或加載的圖片，也可以來(lái)自DragonBones骨骼動(dòng)畫編輯面板導(dǎo)出的材質(zhì)圖集（Texture Atlas）�；蛟S你會(huì)問(wèn)，如何在Flash Pro中把沒有預(yù)先放在動(dòng)畫時(shí)間軸的材質(zhì)一起打包在骨骼動(dòng)畫編輯面板導(dǎo)出的材質(zhì)圖集中呢？

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

然后請(qǐng)注意庫(kù)中的clothTextureTemp動(dòng)畫元件，雙擊打開它，你會(huì)發(fā)現(xiàn)我們把打算換裝的4件衣服放在時(shí)間軸不同層上，并分別將層名稱與其對(duì)應(yīng)。這4件衣服因?yàn)榇笮⌒螤钜粯樱�所以在層中重合了。不過(guò)實(shí)際項(xiàng)目中，很多時(shí)候更換的衣服、武器或道具大小不盡相同，所以需要相對(duì)于骨骼動(dòng)畫中原始服飾的位置調(diào)整好各自坐標(biāo)位置。

留意在層label上我們給第一幀的幀標(biāo)簽取名為temp。因?yàn)闆]有幀標(biāo)簽的動(dòng)畫元件，是不會(huì)被骨骼動(dòng)畫編輯面板識(shí)別導(dǎo)入的。

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

接下來(lái)你只需對(duì)Dragon這個(gè)骨架進(jìn)行相關(guān)的骨骼動(dòng)畫調(diào)整，然后點(diǎn)擊”Export”按鈕導(dǎo)出素材資源。這里我們導(dǎo)出為合并XML數(shù)據(jù)的DragonWithClothes.png 。你會(huì)發(fā)現(xiàn)導(dǎo)出的材質(zhì)圖集中包含了我們需要的各自衣服。:)

現(xiàn)在我們看看在程序中如何實(shí)現(xiàn)換裝。打開教程3中創(chuàng)建的DBStarlingMultiBehavior.as文件，我們直接在這個(gè)文件中添加換裝代碼即可。首先將嵌入的素材更改為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個(gè)變量，數(shù)組textures保存了我們要更換服裝材質(zhì)的名稱，整數(shù)textureIndex用來(lái)做切換材質(zhì)時(shí)候的索引。

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

請(qǐng)注意這里寫的是“parts/clothes1”而不是“clothes1”，原因是Flash Pro的庫(kù)中不同目錄的元件名稱可以相同，所以DragonBones在保存資源路徑的時(shí)候也包含了目錄結(jié)構(gòu)。打開DragonBones_Tutorial_ChangeClothes.fla看看庫(kù)里的衣服動(dòng)畫元件所在的目錄你就明白了。:)

在鍵盤響應(yīng)函數(shù)onKeyEventHandler中添加下面代碼，這樣按下鍵盤C鍵的時(shí)候調(diào)用換裝函數(shù)。

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

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

private function changeClothes():void {     //循環(huán)更換貼圖     textureIndex++;     if (textureIndex >= textures.length) {         textureIndex = textureIndex - textures.length;     }     //從骨骼面板導(dǎo)出的textureData中獲取Image實(shí)例，也可以單獨(dú)從其他圖片文件中構(gòu)造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來(lái)獲取由骨骼動(dòng)畫編輯面板導(dǎo)出的材質(zhì)數(shù)據(jù)，然后將對(duì)應(yīng)的材質(zhì)賦予給骨骼的display對(duì)象，實(shí)現(xiàn)了換裝。當(dāng)然，正如前面所說(shuō)，換裝的材質(zhì)可以隨意來(lái)自程序中載入的其他圖片資源。

另外，當(dāng)你熟悉了DragonBones的開源框架，你會(huì)發(fā)現(xiàn)可以通過(guò)代碼實(shí)現(xiàn)更加靈活的變換，除了更換骨骼材質(zhì)，你還可以在骨骼框架（Armature）中動(dòng)態(tài)的刪除、添加骨骼，改變骨骼的從屬關(guān)系等。

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