Dragon Bones插件創(chuàng)建并控制多個(gè)動(dòng)作的骨骼動(dòng)畫(huà)

接下來(lái)你將了解到運(yùn)用DragonBones創(chuàng)建包含多個(gè)動(dòng)作的骨骼動(dòng)畫(huà)，并在程序中通過(guò)鍵盤(pán)交互控制動(dòng)作。

打開(kāi)文件DragonBones_Tutorial_MultiBehavior.fla，雙擊庫(kù)里的動(dòng)畫(huà)元件Dragon，你可以看到此動(dòng)畫(huà)中有四個(gè)動(dòng)作：stand，walk，jump和fail。每個(gè)動(dòng)作的起始幀上添加了對(duì)應(yīng)的幀標(biāo)簽，這也是DragonBones識(shí)別不同動(dòng)作的標(biāo)識(shí)。

打開(kāi)骨骼動(dòng)畫(huà)編輯面板，你會(huì)看到在Behavior List里面會(huì)有多個(gè)動(dòng)作，選擇某個(gè)動(dòng)作就可以為對(duì)應(yīng)動(dòng)作設(shè)置動(dòng)畫(huà)幀數(shù)、緩動(dòng)，設(shè)置此動(dòng)作的某個(gè)骨骼的細(xì)節(jié)參數(shù)等。

請(qǐng)留意Behavior編輯里的Blending Times選項(xiàng)。

這個(gè)選項(xiàng)是表明的其他動(dòng)作切換到當(dāng)前動(dòng)作需要的過(guò)渡時(shí)間。例如這里設(shè)置的跳躍動(dòng)作的Blending Times為0.13，那么其他動(dòng)作切換到跳躍需要0.13秒，DragonBones框架會(huì)自動(dòng)為你添加其中的過(guò)渡幀，讓各種動(dòng)作之間切換變得自然。當(dāng)然，你可以在動(dòng)畫(huà)預(yù)覽窗口中看到各種動(dòng)畫(huà)的切換效果。

Dragon Bones插件 v2.3 官方最新版：http://m.elephantinaurance.com/soft/68403.html

調(diào)整完畢各個(gè)動(dòng)作的細(xì)節(jié)后，點(diǎn)擊“Export”按鈕導(dǎo)出骨骼動(dòng)畫(huà)數(shù)據(jù)。

打開(kāi)DBStarlingMultiBehavior.as文件，代碼如下。此示例是在Starling框架中通過(guò)鍵盤(pán)控制骨骼動(dòng)畫(huà)運(yùn)動(dòng)。

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">

package {     import dragonBones.Armature;     import dragonBones.animation.WorldClock;     import dragonBones.factorys.StarlingFactory;     import flash.ui.Keyboard;     import starling.display.Sprite;     import starling.events.EnterFrameEvent;     import starling.events.KeyboardEvent;     import starling.text.TextField;     import flash.events.Event;     public class DBStarlingMultiBehavior extends Sprite     {         [Embed(source = "../assets/Dragon2.png", mimeType = "application/octet-stream")]         public static const ResourcesData:Class;         private var factory:StarlingFactory;         private var armature:Armature;         private var armatureClip:Sprite;         private var isLeft:Boolean;         private var isRight:Boolean;         private var isJumping:Boolean;         private var moveDir:int=0;         private var speedX:Number = 0;         private var speedY:Number = 0;         private var textField:TextField         public function DBStarlingMultiBehavior()         {             factory = new StarlingFactory();             factory.addEventListener(Event.COMPLETE, textureCompleteHandler);             factory.parseData(new ResourcesData());         }         private function textureCompleteHandler(e:Event):void         {             armature = factory.buildArmature("Dragon");             armatureClip = armature.display as Sprite;             armatureClip.x = 400;             armatureClip.y = 550;             addChild(armatureClip);             WorldClock.clock.add(armature);             updateBehavior()             addEventListener(EnterFrameEvent.ENTER_FRAME, onEnterFrameHandler);             stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyEventHandler);             stage.addEventListener(KeyboardEvent.KEY_UP, onKeyEventHandler);             textField=new TextField(400,30,"A-move left,D-move right,W-jump","Verdana",16,0,true)             textField.x=60;             textField.y=2;             addChild(textField);         }         private function onKeyEventHandler(e:KeyboardEvent):void         {             switch (e.keyCode)             {                 case Keyboard.A :                 case Keyboard.LEFT :                     isLeft=e.type == KeyboardEvent.KEY_DOWN;                     break;                 case Keyboard.D :                 case Keyboard.RIGHT :                     isRight=e.type == KeyboardEvent.KEY_DOWN;                     break;                 case Keyboard.W :                 case Keyboard.UP :                     jump();                     break;             }             var dir:int;             if (isLeft && isRight)             {                 dir=moveDir;                 return;             }             else if (isLeft)             {                 dir=-1;             }             else if (isRight)             {                 dir=1;             }             else             {                 dir=0;             }             if(dir==moveDir)             {                 return;             }             else             {                 moveDir=dir;             }             updateBehavior()         }         private function onEnterFrameHandler(_e:EnterFrameEvent):void         {             updateMove();             WorldClock.clock.advanceTime(-1);         }         private function updateBehavior():void         {             if (isJumping)             {                 return;             }             if (moveDir == 0)             {                 speedX = 0;                 armature.animation.gotoAndPlay("stand");             }             else             {                 speedX=6*moveDir;                 armatureClip.scaleX = -moveDir;                 armature.animation.gotoAndPlay("walk");             }         }         private function updateMove():void         {             if (speedX != 0)             {                 armatureClip.x += speedX;                 if (armatureClip.x < 0)                 {                     armatureClip.x = 0;                 }                 else if (armatureClip.x > 800)                 {                     armatureClip.x = 800;                 }             }             if (isJumping)             {                 if (speedY <= 0 && speedY + 1 > 0 )                 {                     armature.animation.gotoAndPlay("fall");                 }                 speedY += 1;             }             if (speedY != 0)             {                 armatureClip.y += speedY;                 if (armatureClip.y > 540)                 {                     armatureClip.y = 550;                     isJumping = false;                     speedY = 0;                     updateBehavior();                 }             }         }         private function jump():void         {             if (isJumping)             {                 return;             }             speedY = -25;             isJumping = true;             armature.animation.gotoAndPlay("jump");         }     } }

通過(guò)上面的代碼我們可以發(fā)現(xiàn)，我們只需要在程序中需要播放相關(guān)骨骼動(dòng)畫(huà)的時(shí)候調(diào)用函數(shù)armature.animation.gotoAndPlay()即可。

除了指定需要播放的動(dòng)作名稱(chēng)，你還可以通過(guò)此函數(shù)來(lái)動(dòng)態(tài)指定動(dòng)作的總幀數(shù)、是否循環(huán)等。

對(duì)于每個(gè)動(dòng)畫(huà)，除了指定其播放之外，DragonBones框架提供了動(dòng)畫(huà)播放相關(guān)的各種事件。

動(dòng)作切換事件:

armature.addEventListener(dragonbones.events.Event.MOVEMENT_CHANGE, aramtureEventHandler);

動(dòng)作開(kāi)始事件:

armature.addEventListener(dragonbones.events.Event.START, aramtureEventHandler);

動(dòng)作結(jié)束事件

armature.addEventListener(dragonbones.events.Event.COMPLETE, aramtureEventHandler);

動(dòng)作循環(huán)完畢事件:

armature.addEventListener(dragonbones.events.Event.LOOP_COMPLETE, aramtureEventHandler);

通過(guò)各種事件與動(dòng)作的配合，你可以輕松創(chuàng)建具有復(fù)雜運(yùn)動(dòng)角色的游戲。 

控制骨骼框架中的每根骨頭

對(duì)于一個(gè)有趣的游戲，僅僅播放預(yù)先設(shè)置的骨骼動(dòng)畫(huà)或許不夠，我們需要角色具有動(dòng)態(tài)可控的各自動(dòng)作。令人高興的是DragonBones提供了訪問(wèn)并控制骨骼框架里每根骨頭的方法，讓你的角色在游戲中隨意運(yùn)動(dòng)。

此示例通過(guò)鼠標(biāo)在場(chǎng)景中的移動(dòng)來(lái)控制骨骼。我們創(chuàng)建了一個(gè)跟隨鼠標(biāo)運(yùn)動(dòng)的小鳥(niǎo)，小龍人會(huì)與小鳥(niǎo)保持一定距離，同時(shí)小龍人的頭和胳膊會(huì)跟隨小鳥(niǎo)運(yùn)動(dòng)而做出不同姿勢(shì)，非常有趣。

打開(kāi)DBStarlingControlBone.as，代碼如下。

package {     import dragonBones.Armature;     import dragonBones.Bone;     import dragonBones.animation.WorldClock;     import dragonBones.factorys.StarlingFactory;     import flash.geom.Point;     import flash.ui.Mouse;     import starling.display.Image;     import starling.display.Sprite;     import starling.events.EnterFrameEvent;     import starling.events.TouchEvent;     import starling.textures.Texture;     import flash.events.Event;     public class DBStarlingControlBone extends Sprite     {         [Embed(source = "../assets/Dragon2.png", mimeType = "application/octet-stream")]         public static const ResourcesData:Class;         [Embed(source = "../assets/starling.png")]         private static const starlingImg:Class;         private var factory:StarlingFactory;         private var armature:Armature;         private var armatureClip:Sprite;         private var mouseX:Number = 0;         private var mouseY:Number = 0;         private var moveDir:int=0;         private var dist:Number;         private var speedX:Number = 0;         private var starlingBird:Image;         private var _r:Number;         private var _head:Bone;         private var _armR:Bone;         private var _armL:Bone;         public function DBStarlingControlBone()         {             factory = new StarlingFactory();             factory.addEventListener(Event.COMPLETE, textureCompleteHandler);             factory.parseData(new ResourcesData());         }         private function textureCompleteHandler(e:Event):void         {             armature = factory.buildArmature("Dragon");             armatureClip = armature.display as Sprite;             armatureClip.x = 400;             armatureClip.y = 550;             addChild(armatureClip);             WorldClock.clock.add(armature);             updateBehavior(0)             addEventListener(EnterFrameEvent.ENTER_FRAME, onEnterFrameHandler);             stage.addEventListener(TouchEvent.TOUCH, onMouseMoveHandler);             starlingBird=new Image(Texture.fromBitmap(new starlingImg()))             addChild(starlingBird);             Mouse.hide();             //get the bones which you want to control             _head = armature.getBone("head");             _armR = armature.getBone("armUpperR");             _armL = armature.getBone("armUpperL");         }         private function onEnterFrameHandler(_e:EnterFrameEvent):void         {             checkDist();             updateMove();             updateBones();             WorldClock.clock.advanceTime(-1);         }         private function checkDist():void         {             dist = armatureClip.x-mouseX;             if(dist<150)             {                 updateBehavior(1)             }             else if(dist>190)             {                 updateBehavior(-1)             }             else             {                 updateBehavior(0)             }         }         private function onMouseMoveHandler(_e:TouchEvent):void         {             var _p:Point = _e.getTouch(stage).getLocation(stage);             mouseX = _p.x;             mouseY = _p.y;             starlingBird.x=mouseX-73;             starlingBird.y=mouseY-73;         }         private function updateBehavior(dir:int):void         {             if(moveDir==dir)return;             moveDir=dir;             if (moveDir == 0)             {                 speedX = 0;                 armature.animation.gotoAndPlay("stand");             }             else             {                 speedX=6*moveDir;                 armature.animation.gotoAndPlay("walk");             }         }         private function updateMove():void         {             if (speedX != 0)             {                 armatureClip.x += speedX;                 if (armatureClip.x < 0)                 {                     armatureClip.x = 0;                 }                 else if (armatureClip.x > 800)                 {                     armatureClip.x = 800;                 }             }         }         private function updateBones():void         {             //update the bones' pos or rotation             _r = Math.PI + Math.atan2(mouseY - armatureClip.y+armatureClip.height/2, mouseX - armatureClip.x);             if (_r > Math.PI)             {                 _r -= Math.PI * 2;             }             _head.node.rotation = _r*0.3                    _armR.node.rotation = _r *0.8;             _armL.node.rotation = _r * 1.5;             starlingBird.rotation=_r*0.2;         }     } }

從上面代碼我們可以看到，通過(guò)方法dragonBones.Armature.getBone(_name:String):Bone來(lái)獲取某個(gè)骨骼。骨骼中的node對(duì)象包含了此骨骼的位置坐標(biāo)，旋轉(zhuǎn)弧度，拉伸比例，傾斜數(shù)據(jù)等等。我們根據(jù)游戲邏輯的需要對(duì)骨骼的這些參數(shù)賦數(shù)，即可實(shí)現(xiàn)動(dòng)態(tài)控制此骨骼的效果。

在上面示例中，請(qǐng)留意updateBones()函數(shù)里，我們先獲取到當(dāng)前鼠標(biāo)位置與骨骼框架中心點(diǎn)的夾角，然后根據(jù)這個(gè)角度，來(lái)改變小龍人的頭部和胳膊的旋轉(zhuǎn)弧度，從而實(shí)現(xiàn)了這個(gè)有趣的效果。