如何理解CCSkeleton Cocos2D中的骨骼動畫

如何理解CCSkeleton Cocos2D中的骨骼動畫，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

CCSkeleton

Cocos2d-X 2.1.3 的Test中新增加了一個例子SpineTest。SpineTest這個例子主要是來介紹，新增加的一個類 CCSkeleton 它是用來播放骨骼動畫的（多謝五哥提醒哦）。跟觸控的L大聊過，據說他們下個版本的CocoStudio中骨骼動畫就要用這個來實現。好了閑話少說我們來介紹一下這個新來的驚喜把！

   CCSkeleton 播放動畫主要依靠三個文件。

   1.“.png”    用來保存尸塊的合成圖。

   2.“.atlas”   用來保存合成圖中每個尸塊的信息。

   3.“.JSON”   用來保存動作的信息。

   打開 Resource 我們會看到，spineboy.atlas 這個就是我們看到的那個小人 每個尸塊的信息。下面用一段簡短的代碼來介紹下他的結構。具體的還要等工具發布出來才能確定。

//Atlas文件中每個參數的含義：
spineboy.png            //該atlas文件是作用于哪個png
format: RGBA8888    //格式RGBA8888
filter: Linear,Linear    //濾波器 ：線性
repeat: none             //重復：無
/**下面的可以有多個，因為是單個尸塊的信息*/
head                        // 尸塊名稱 頭
  rotate: false            //是否需要旋轉
  xy: 1, 122                //起始點，以左上角為0,0
  size: 121, 132         //圖的大小
  orig: 121, 132        //應該和圖的大小相同
  offset: 0, 0        
  index: -1

我們看到了，Atlas 文件的文件頭中包含一個 format:RGBA8888 這個跟TxtruePacker一樣，可以更好的來節省內存。而下面包含了尸塊的 名稱、起始點、大小等信息。

spineboy.json 它里面包含了所有的動作、骨骼信息，所以它的體積也是很大的，一個跳和一個走路的動作就占了25K的空間，如果你的游戲中角色和動作比較多的話，就要有很多的資源需要第一次進入游戲時更新了。好我們現在打開 spineboy.json 來看一下它里面的結構。

JSON中 每個數據的含義：
{   //骨骼
    "bones":
    [   //第一個骨骼點 root
        { "name": "root" },
        //第二個骨骼點 hip 他的父節點為root x:0.64 y:114.41
        { "name": "hip", "parent": "root", "x": 0.64, "y": 114.41 },
        //第三個骨骼點 left upper leg 他的父節點為hip x:0.64 y:114.41 旋轉角度:-89.09
        { "name": "left upper leg", "parent": "hip", "length": 50.39, "x": 14.45, "y": 2.81, "rotation": -89.09 }
     /*這里的屬性都是骨骼的初始屬性*/
     ],
    //連接
    "slots":
    [
        //連接器:left upper leg    骨骼點名稱:left upper leg    連接物:left-upper-leg
        { "name": "left upper leg", "bone": "left upper leg", "p_w_upload": "left-upper-leg" }
    ],
    "skins":
    {
        "default":
        {
            "left upper leg":
            {
                "left-upper-leg": { "x": 26.12, "y": -1.85, "rotation": 89.09, "width": 33, "height": 67 }
            }
        }
    },
    //動作
    "animations":
    {
        //動作名稱:walk
        "walk":
        {
            //walk中 bones 在時間線上的變化
            "bones":
            {
                //left upper leg 骨骼在時間上的變化
                "left upper leg":
                {
                    //roate的變化
                    "rotate":
                    [
                        //時間線上0 角度變化-26.55
                        { "time": 0, "angle": -26.55 },
                        //時間線上0.1333 角度變化-8.78
                        { "time": 0.1333, "angle": -8.78 }
                    ],
                    //坐標的變化
                    "translate":
                    [
                        //時間線上0 X變化-3 Y變化-2.25
                        { "time": 0, "x": -3, "y": -2.25 },
                        //時間線上0.4 X變化-2.18 Y變化-2.25
                        { "time": 0.4, "x": -2.18, "y": -2.25 }
                    ]
                }
            }
        }
    }
}

   從上面的注釋我們看到了，其實JSON中有兩大部分。

       1.骨骼、連接器等等相關骨骼的信息。

       2.動作信息，有著動作在時間線上每個時間點的變化信息。

   細心的同學會發現，每個尸塊的 旋轉、坐標 這兩項變化的數據是分開的，這也是作者的多年的經驗體現之處。這樣做的好處可以讓動作更加靈活。否則，旋轉和坐標變化在時間線上不一致的話就麻煩了。

   經過上面介紹動作所需的文件后，很多同學已經大概了解了。下面我們來看一下在Cocos2d-X中CCSkeleton 這個類的構成。

!!!!新改版的博客編輯器不能添加圖片0 0 ，大家去附件中下載圖吧。

CCSkeleton 主要是由 Atlas 和 Skeleton 來組成的， Atlas 中主要來保存尸塊貼圖的信息，而 Skeleton 主要來保存其中的動畫信息。

skeletonNode = CCSkeleton::createWithFile("spine/spineboy.json","spine/spineboy.atlas");

   //參數1：動作解析文件 參數2：尸塊解析文件 參數3：（可缺省）縮放比例 缺省值為1

   創建一個骨骼動畫的對象就是這么簡單，給他提供你的尸塊解析文件，動畫解析文件就可以了。至于尸塊的大圖，它會去超找Atlas 文件中文件頭的那個png名字。

AnimationStateData_setMixByName(skeletonNode->state->data,"walk","jump",0.4f);

//參數1：動作數據 參數2：起始的動作名稱 參數3：要到的動作名稱 參數4：銜接動畫的時間

   這個函數主要是用來銜接兩個動作的，例如：跳的動作結束之后如果直接執行走路的動作，你會發現小人的動作中間沒有銜接，這樣在游戲中的表現是很不好的。所以我們需要給兩個動作之間加一個過渡，而這個函數它的功能就體現在此。

AnimationState_setAnimationByName(skeleton->state,"walk",false);

//參數1：動作 參數2：動作名稱 參數3：是否重復播放

   例如走路我們是要重復的播放動畫，利用這個函數，我們就不用自己去寫重復播放的代碼了。只需要一個BOOL 輕松解決！

skeletonNode->timeScale = 0.3f;
skeletonNode->debugBones = false;

   代碼1主要來控制動畫的播放速度，我們默認的是1。

代碼2是用來顯示小人身上那些點和線，這些點和線就是骨骼，開啟了debugBones我們可以清楚的看到在動畫過程中每個骨骼所進行的改變。

  我們發現update中還有部分代碼，我來解釋一下。

skeletonNode->state->loop

這個loop的變量可以獲取到當前執行的動畫是否是循環播放的動畫，他會返回一個布爾值，讓我們可以用來邏輯判斷。

skeletonNode->state->time

他會返回一個float值，這個float值會告訴你當前的動畫已經重復的播放了幾次,像Test中這樣走一次路，跳一次的動作用他來做非常方便。

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。