cocos2dx骨骼動畫Armature源碼分析(一)

時間 2019-11-24

標籤 cocos2dx cocos 骨骼動畫 armature 源碼分析欄目 Cocos2d-x 简体版

原文原文鏈接

<!DOCTYPE html>css

源碼分析一

cocos2dx骨骼動畫Armature源碼分析(一)

cocos2dx中的骨骼動畫使用起來比較方便，從編輯器(cocostudio或flash插件dragonBones)獲得xml或json數據，調用相似下面的代碼就能夠展現出動畫html

ArmatureDataManager::getInstance()->addArmatureFileInfoAsync(
        "armature/Dragon.png", "armature/Dragon.plist", "armature/Dragon.xml",
         this, schedule_selector(TestAsynchronousLoading::dataLoaded));
    Armature *armature = nullptr;
    armature = Armature::create("Dragon");
    armature->getAnimation()->playWithIndex(1);
    addChild(armature);

那麼調用內部是怎麼實現的呢？Armature::create和armature->getAnimation()->playWithIndex都實現了些什麼呢？這幾篇文章將從源碼上分析Armature。git

本文是Armature分析的第一篇，將從總體上對cocos2dx裏的骨骼動畫進行分析。涉及到內容以下:github

什麼是骨骼動畫
編輯器導出數據格式概覽
源碼概述

什麼是骨骼動畫

遊戲中的動畫大致能夠分紅下面三種：web

幀動畫
補間動畫(Tween)
骨骼蒙皮動畫

幀動畫

這個是最基本的動畫，也是下面兩個動畫的基礎，一幀展現一張圖，cocos2dx Action中Animate就是幀動畫。優勢是實現簡單，缺點是浪費資源(一幀一張圖，可對比下面兩種動畫)。json

補間動畫

flash中補間動畫用的比較多，不須要一幀一張圖，只需起始狀態和結束狀態，中間的狀態能夠進行根據差值與通過時間計算出來。優勢是節省資源，美術人員比較熟悉。markdown

骨骼蒙皮動畫

骨骼動畫能夠認爲是補間動畫的一種擴展，讓動畫的各個部分之間產生關聯結構(骨骼)，以後把圖綁定到骨骼上。缺點是程序實現較複雜，其優勢較補間動畫有下面兩點(其餘優勢暫時沒有發現)：session

1.導出配置數據少而且美術製做簡單數據結構

假設有一個下面這樣結構的骨骼架構

body

armLeft

handLeft

armRight

handRight

head

legLeft

legRight

假設想在一幀中把動畫總體向右移動，採用補間動畫須要把body、armLeft、legRight等等所有移動，建立新的幀，而骨骼動畫只需移動body的位置，其子節點會跟隨父節點移動。對應導出的配置中，補間動畫要處理body、armLeft等全部子節點導出的數據，而骨骼動畫只有body一個節點數據的改變，導出的數據會小不少。

2.關節裂紋修復

下面的圖是偷的《遊戲引擎架構》449頁，意思是若是美術做圖時候不注意，關節連接處可能會有裂縫。採用骨骼動畫能夠解決這個問題，骨骼動畫中的蒙皮能夠按權重綁定到多個關節(骨骼中),而且能夠按權重進行拉伸，cocostudio骨骼動畫編輯器不熟，不知可不可多綁定，flash的dragonBones插件是不行的。spine對這種多綁定有不錯的支持。

編輯器導出數據格式概覽

cocostudio導出的json結構和dragonbones導出的xml結構類似，都是骨骼層，動畫層，圖片層三層結構，已dragonbones官方的demo爲例(有刪減)：

<skeleton name="DragonBones_Tutorial_MultiBehavior" frameRate="24" version="2.2">
  <armatures>
    <armature name="Dragon">
      <b name="tail" parent="body" x="45.9" y="-70.8" kX="30" kY="30" cX="1" cY="1" pX="11.5" pY="176.35" z="10">
        <d name="parts-tail" pX="0" pY="-63.8"/>
      </b>
    </armature>
  </armatures>
  <animations>
    <animation name="Dragon">
      <mov name="stand" dr="7" to="6" drTW="100" lp="1" twE="0">
      </mov>
      <mov name="walk" dr="8" to="5" drTW="200" lp="1" twE="0">
      </mov>
      <mov name="jump" dr="5" to="3" drTW="5" lp="1" twE="NaN">
      </mov>
      <mov name="fall" dr="5" to="6" drTW="5" lp="1" twE="NaN">
      </mov>
    </animation>
  </animations>
  <TextureAtlas name="DragonBones_Tutorial_MultiBehavior" width="512" height="512">
  </TextureAtlas>
</skeleton>

<armatures></armatures>是骨骼部分，對應flash中1區域，一個layer就是一個bone。

<animations></animations>是動畫部分，對應flash中2區域，用幀標籤區分哪一個動畫，好比stand、walk、jump等。

<TextureAtlas></TextureAtlas>是骨骼部分，對應flash中3區域，是皮膚，也就是圖信息。

有了這些信息，就能夠在程序中還原flash中的動畫效果，具體dr、drTW、x、kX、kY等等是什麼意思以後的文章裏會說。

源碼概述

代碼大致能夠分紅xml或json數據的解析和用解析出的數據產生動畫兩部分。

數據解析的相關代碼的UML

大體介紹下每一個類的做用：

DataReaderHelper：解析armatures、animations、TextureAtlas的數據生成程序能直接使用的數據結構ArmatureData、AnimationData、TextureData。
ArmatureDataManager：管理DataReaderHelper及其解析出來的數據。
ArmatureData：對應xml中的<armature></armature>。
AnimationData：對應xml中的<animation></animation>。
TextureData：對應xml中的<SubTexture></SubTexture>。
BoneData：對應xml中的。
DisplayData：對應xml中的<d></d>。
MovementData：對應xml中的<mov></mov>。
MovementBoneData：對應xml中的<mov></mov>。
FrameData：對應xml中的<mov><f></f></mov>。