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

接下來你將了解到運用DragonBones創(chuàng)建包含多個動作的骨骼動畫，并在程序中通過鍵盤交互控制動作。

打開文件DragonBones_Tutorial_MultiBehavior.fla，雙擊庫里的動畫元件Dragon，你可以看到此動畫中有四個動作：stand，walk，jump和fail。每個動作的起始幀上添加了對應的幀標簽，這也是DragonBones識別不同動作的標識。

打開骨骼動畫編輯面板，你會看到在Behavior List里面會有多個動作，選擇某個動作就可以為對應動作設置動畫幀數(shù)、緩動，設置此動作的某個骨骼的細節(jié)參數(shù)等。

請留意Behavior編輯里的Blending Times選項。

這個選項是表明的其他動作切換到當前動作需要的過渡時間。例如這里設置的跳躍動作的Blending Times為0.13，那么其他動作切換到跳躍需要0.13秒，DragonBones框架會自動為你添加其中的過渡幀，讓各種動作之間切換變得自然。當然，你可以在動畫預覽窗口中看到各種動畫的切換效果。

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

調(diào)整完畢各個動作的細節(jié)后，點擊“Export”按鈕導出骨骼動畫數(shù)據(jù)。

打開DBStarlingMultiBehavior.as文件，代碼如下。此示例是在Starling框架中通過鍵盤控制骨骼動畫運動。

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");         }     } }

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

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

對于每個動畫，除了指定其播放之外，DragonBones框架提供了動畫播放相關(guān)的各種事件。

動作切換事件:

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

動作開始事件:

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

動作結(jié)束事件

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

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

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

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

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

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

此示例通過鼠標在場景中的移動來控制骨骼。我們創(chuàng)建了一個跟隨鼠標運動的小鳥，小龍人會與小鳥保持一定距離，同時小龍人的頭和胳膊會跟隨小鳥運動而做出不同姿勢，非常有趣。

打開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;         }     } }

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

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