骨骼動畫 vs. 精靈表（sprite sheets）

?

創(chuàng)建動畫又快又簡單的方法是使用“精靈表”（sprite sheets）.當(dāng)你意識到游戲需要大量動畫,內(nèi)存消耗會漲上來,而且需要耗時去加載所有數(shù)據(jù).此外,限于大小,你需要為了動畫限制自己使用低FPS,這意味著動畫不是你想要的那么平滑.這就是骨骼動畫的由來.

?

骨骼動畫簡述

骨骼動畫是cocos2d-x動畫在人物渲染方面的技術(shù),分二個部分:用于繪制人物的外觀呈現(xiàn)（被稱為蒙皮或者mesh）和用于mesh進(jìn)行動畫(造型和關(guān)鍵幀) 的一組分層的相互連接的骨骼.

在你的應(yīng)用中,Cocos2d-x提供了擁有2d骨骼動畫的方式.構(gòu)建骨骼動畫過程開始可能有點復(fù)雜,但隨后用起來卻非常簡單,而且有一些工具可以簡化此過程.

當(dāng)使用骨骼動畫時，動畫由一些相互連接的骨骼組成。影響一個骨骼將會影響其所有的子對象。通過每根骨頭上不同的變換組合，你會得到骨骼的各種造型。

現(xiàn)在，如果你定義了關(guān)鍵幀，即某個時間點骨骼中每根骨頭特定的變換，你就能在關(guān)鍵幀之間插入平滑的過渡，從而使骨骼運動。

在附加的代碼中，我使用一個名叫Transformation的類，它含有2D變換的數(shù)據(jù)，如translation（平移）、rotation（旋轉(zhuǎn)）和scale（縮放）。通過幀的編號和一個Transformation能定義一個關(guān)鍵幀。關(guān)鍵幀的集合定義了一個KeyFrameAnimation.最后，骨骼動畫就是一個KeyFrameAnimation的集合，每個KeyFrameAnimation應(yīng)用于骨骼中的每根骨頭。

另外，你使用骨骼，它保存了關(guān)節(jié)列表，關(guān)節(jié)定義了骨骼中骨頭的層級。不同于“精靈表”，每根骨頭指定了特定的texture，如下所示：

?

骨骼動畫工具

據(jù)我們所知，在創(chuàng)建骨骼動畫方面CocosBuilder是一個不錯的、免費（MIT協(xié)議）的工具。

CocosBuilder為Cocos2d的Javascript綁定而創(chuàng)建的。這意味著你的代碼、動畫和接口會無修改地在Cocos2d-x中運行。

cocos2d-iphone的教程可以在Zynga Engineering blog找到。

?

與cocosbuilder動畫協(xié)作

你可以使用CocosBuilder創(chuàng)建人物動畫，全場景動畫或者你所想的任何動畫。該動畫編輯器已完全支持多分辨率、關(guān)鍵幀間的緩沖動畫、骨骼動畫和多時間軸等特性。

基礎(chǔ)

在主窗口的下部，你可以找到時間軸。你可以使用時間軸來創(chuàng)建你的動畫。

默認(rèn)情況下你的ccb-file只有一條時長10秒的時間軸。CocosBuilder編輯動畫的幀率是每秒30幀，但是當(dāng)你在應(yīng)用程序中回放動畫時，會使用你給cocos2d設(shè)置的幀率（cocos2d中默認(rèn)是60fps）。當(dāng)前時間會在右上角顯示，格式是分：秒：幀。藍(lán)色垂直線也顯示了當(dāng)前時間。單擊顯示時間以更改當(dāng)前時間線的時間間隔。

增加 Keyframes

CocosBuilder中的動畫是基于關(guān)鍵幀的。你可以添加關(guān)鍵幀以設(shè)置node的不同屬性并且CocosBuilder會自動在關(guān)鍵幀間插入不同類型的可選（ease）緩沖動作。

為了添加關(guān)鍵幀，首先通過點擊node名字右邊的三角形展開node的視圖。上面會展現(xiàn)該node所有可動畫的屬性。基于你選擇的node類型，可以動畫的屬性會稍微有點不一樣。凡是可見的屬性，你可以在時間軸中按住option鍵并點擊該屬性。在點擊的那個時間點就會創(chuàng)建新的關(guān)鍵幀?；蛘?#xff0c;你可以通過選擇一個node再在Animation菜單中選Insert Keyframe從而在時間標(biāo)志器的那個時間點生成一個新的關(guān)鍵幀。

如果你在畫布區(qū)域變換一個node,并且該node所變換的屬性在時間軸上已經(jīng)有一個或多個關(guān)鍵幀，那么CocosBuilder會自動在當(dāng)前時間點添加關(guān)鍵幀。

?

編輯 Keyframes

移動時間標(biāo)志器至特定關(guān)鍵幀的時間點并選擇該node，編輯該關(guān)鍵幀。你可以通過雙擊關(guān)鍵幀聚焦于該幀（聚焦即選擇該node并移動時間標(biāo)志器）。

你可以選擇關(guān)鍵幀并通過拖拉它們周圍的選擇框來移動它們。你也可以在node間復(fù)制、黏貼關(guān)鍵幀。當(dāng)黏貼關(guān)鍵幀時，確保你只選擇了一個node。關(guān)鍵幀會黏貼在時間標(biāo)志線標(biāo)志的時間。

如果你已經(jīng)選擇了一系列關(guān)鍵幀，可以通過選擇Animation菜單中的Reverse Selected Keyframes來反向關(guān)鍵幀的次序。使用Stretch Selected Keyframes選項可以通過一個縮放因子來加速或者減速動畫。

導(dǎo)入多張連續(xù)圖片

如果你通過sprite frame幀組創(chuàng)建動畫，需要冗長的時間來將每個獨立的幀移至?xí)r間軸上。CocosBuilder通過自動導(dǎo)入圖像序列簡化了這一過程。選擇你想要導(dǎo)入到左邊項目視圖的幀，然后選擇時間軸上的一個CCSprite。現(xiàn)在選擇Animation菜單中的Create Frames from Selected Resources.這些幀會在時間標(biāo)志線開始的地方添加。如果你需要放慢動畫，選擇新創(chuàng)建的關(guān)鍵幀組，并使用Stretch Selected Keyframes…命令。

?

應(yīng)用漸變

CocosBuilder提供了cocos2d給予的一些精心挑選的緩沖動作（easing）子集。應(yīng)用一個緩沖動作只需在兩個關(guān)鍵幀之間右鍵點擊并選擇你想應(yīng)用的緩沖動作的類型即可。

一些緩沖動作有額外的選項，在應(yīng)用緩沖動作之后，你可以再次右擊并從彈出菜單中選擇Easing Setting…。

使用多個時間軸

CocosBuilder的動畫編輯器有一個非常強(qiáng)大的特性就是在單個文件中可以含有多個時間軸。你可以命名不同的序列并通過它們的名字從代碼中播放它們。在不同的時間軸之間會有平滑的過渡。

在選擇之前，使用時間軸彈出菜單添加并編輯你的時間軸：

在編輯時間軸的對話框中，你可以獲得時間軸的大致信息、重命名它們、添加新的時間軸以及（可選）設(shè)置時間軸中的一條在ccbi文件從你的應(yīng)用程序加載后立即自動開始播放。

沒有設(shè)置關(guān)鍵幀的時間軸中的屬性會在時間軸時間共享它們的值。例如，如果你移動某條的一個node，只要它沒有為位置屬性設(shè)置關(guān)鍵幀，它就會在所有的時間軸中被移動。有時，我覺得為一個特定的時間軸添加單個關(guān)鍵幀來覆蓋共享值是挺有用的。

鎖定時間軸

你可以通過鎖定時間軸來自動回放時間軸序列。你也可以使用這個特性來自動重播一個時間軸。

為了播放時間軸序列中的一個時間軸，點擊No chained timeline文本并選擇當(dāng)前時間軸后你想播放的那個。

通過代碼播放動畫

想要通過代碼控制你用CocosBuilder創(chuàng)建的動畫，你需要檢索CCBAnimationManager。當(dāng)ccbi文件加載時，該動畫管理器將分配node userObject。

 
CCNode *myNodeGraph = ccbReader->readNodeGraphFromFile("myFile.ccbi", this); 

動作管理器會作為一個自動釋放對象返回?；胤盘囟ǖ臅r間軸需調(diào)用runAnimationsForSequenceNamed: 方法。如果時間軸當(dāng)前正在播放，當(dāng)調(diào)用此方法時它會立刻停止。

 
animationManager->runAnimationsForSequenceNamed("My Timeline"); 

或者，你可以使用時間軸之間的時間間隔來平滑過渡到新的時間軸。一般情況下線性插入會應(yīng)用于此過渡。

 
animationManager->runAnimationsForSequenceNamedTweenDuration("My Timeline",0.5f); 

也可以在時間軸播放完畢后接收一個回調(diào)。即使另外的時間軸鎖在序列中，你也能接收到這些回調(diào)。你可以用CCBAnimationManagerDelegate來接收回調(diào)。

逐幀動畫

逐幀動畫是一種常見的動畫形式（Frame By Frame），其原理是在“連續(xù)的關(guān)鍵幀”中分解動畫動作，也就是在時間軸的每幀上逐幀繪制不同的內(nèi)容，使其連續(xù)播放而成動畫。 因為逐幀動畫的幀序列內(nèi)容不一樣，不但給制作增加了負(fù)擔(dān)而且最終輸出的文件量也很大，但它的優(yōu)勢也很明顯：逐幀動畫具有非常大的靈活性，幾乎可以表現(xiàn)任何想表現(xiàn)的內(nèi)容，而它類似與電影的播放模式，很適合于表演細(xì)膩的動畫。例如：人物或動物急劇轉(zhuǎn)身、 頭發(fā)及衣服的飄動、走路、說話以及精致的3D效果等等。