1. 程式人生 > >Cocos2d-x 3.0final 終結者系列教程22Cocos Studio動畫編輯器的幀動畫和骨骼動畫詳解

Cocos2d-x 3.0final 終結者系列教程22Cocos Studio動畫編輯器的幀動畫和骨骼動畫詳解

建立骨骼動畫

首先,開啟Cocos Studio 的 Animation Editor(動畫編輯器),新建一個動畫工程。 
同Spine一樣,Cocos Studio動畫編輯器也有兩種模式,但這裡是形體模式和動畫模式。使用者需要在形體模式下組裝角色部件,併為其繫結骨骼;並在動畫模式下調整骨骼相應屬性生成骨骼動畫。

下面我們先來對編輯器整體做一個認識,見下圖。

形體模式下: model1
動畫模式下: 
model2

上面兩圖中,標記為1的部分是渲染區域,也就是我們的畫布,它是資源佈局的主編輯區,在該區域可以對各物件進行移動,縮放,旋轉的操作,所有主要的操作結果都會在這個區域中顯示完成。

第2部分是快捷選單欄,該視窗中有一些常用操作,其中包括模式的切換,建立骨骼,縮放,旋轉等等一系列操作。

第3部分是資源欄,本專案中使用的所有資源都必須匯入到該面板才可以使用。

第4部分是預覽區域,當選中資源欄的資源時,會在該區域中顯示,達到預覽的作用。

第5部分是物件結構欄,編輯器將根據物件結構欄中物件的順序依次渲染物件,在最下層的物件將先於渲染,也就是說它可能會被後渲染的物件遮蓋。另外,物件的順序在該欄中是可調的。

第6部分是屬性欄,當選中一個物件時,屬性視窗會顯示出該物件的所有屬性。修改任意屬性都可以立即改變該節點在渲染區域的狀態。

第7部分是動作列表欄,一個動畫工程是允許有多個動作的,比如:行走、跳躍、奔跑等等。所以在該欄中使用者可以建立多個動作,並在多個動作中切換。

第8部分是動畫幀面板,該面板將顯示畫布中所有物件的序列幀,使用者可通過新增幀和改變物件屬性建立動畫序列幀。

對編輯器有了大致的瞭解後,現在就可以開始編輯動畫了。

  1. 在形體模式下,選擇 檔案->匯入資源 或在資源欄中右鍵選擇需要匯入的資原始檔,也可直接將資源拷入工程的Resources資料夾目錄下,然後重新整理資源面板。
  2. 將資源拖到渲染區,並擺好位置。
  3. 開始建立骨骼:選中快捷選單欄中建立骨骼的按鈕,在角色身體的各部位單擊左鍵並拖動滑鼠畫出骨骼。
  4. 將資源素材與骨骼繫結,右擊渲染區的資源素材,選擇“繫結到骨骼”,然後選擇骨骼(選擇的骨骼會高亮顯示),就可以實現骨骼的繫結。
    bind1 bind2
  5. 當繫結好所有素材和骨骼後,右擊骨骼選擇“繫結父關係”,再選擇該骨骼的父骨骼(選擇的骨骼同樣會高亮顯示),這樣依次根據身體部位的“父子”層級關係設定好。
  6. 切換到動畫模式,選中相應控制元件,移動滑鼠到動畫幀一欄的某幀處,然後,改變被選擇控制元件的某個屬性,如旋轉它,這樣就能實現流暢的補間動畫。
  7. 匯出專案為程式可用的資源:匯出的資源在工程目錄的Export/..資料夾下,一共有三個資原始檔,分別是 .ExportJson,.plist 和 .png檔案。ExportJson檔案中記錄了骨骼動畫的描述資訊,plist檔案則是記錄碎圖整合成大圖後圖片的位置描述資訊,png檔案是整合的大圖。

在 Cocos2d-x 中載入動畫資源

前面我們花了很多精力來建立骨骼動畫,然而要將它執行在實際的專案中卻非常的簡單,只需幾行程式碼,當然在這之前我們需要將動畫編輯器匯出的資源複製到專案Resource目錄中去。

同樣地,在Cocos2d-x程式中使用Cocos Studio動畫首先需要包含相關標頭檔案,如下:

1 2 #include "cocostudio/CocoStudio.h" usingnamespace cocostudio;

建立一個骨骼動畫物件,需要將動畫檔案和資原始檔載入到程式。這裡我們通過ArmatureManager動畫資料管理器來載入動畫。ArmatureManager本身是一個單例,它管理整個場景中的Armature。而Armature則封裝了我們播放動畫需要的Animation。由此可見,這是一個三層締結的層次結構。其中ArmatureManager最大,然後是Armature,最後是Animation。

說完了原理,下面來看看程式碼。修改init函式, 在return前加入如下程式碼:

1 2 3 4 5 6 ArmatureDataManager::getInstance()->addArmatureFileInfo("NewAnimation0.png", "NewAnimation0.plist", "NewAnimation.ExportJson"); Armature *armature = Armature::create( "NewAnimation"); armature->setPosition(Point(visibleSize.width * 0.5, visibleSize.height * 0.5)); // 播放動畫 armature->getAnimation()->play("walk"); this->addChild(armature);

效果圖: result

我們在動畫編輯器中編輯的動作就是Animation,一個動畫工程中可以編輯多個動作,也就是動作列表中可建立多個動作。如下圖所示:
animations

所以播放動畫需要根據具體地需要來播放,這樣才能知道使用者要播放的動畫是哪一個。可以像上面程式碼一樣指定動畫名來播放動畫,也可以通過指定動作編號來播放動畫,如下:

1 armature->getAnimation()->playWithIndex(0);

播放連續地動畫可通過以下函式實現:

1 2 voidplayWithNames(conststd::vector<std::string>& movementNames, intdurationTo = -1, boolloop = true); voidplayWithIndexes(conststd::vector<int>& movementIndexes, intdurationTo = -1, boolloop = true);

(暈了吧)