2D RPG游戲里面玩家扮演的角色叹话，是非常核心的游戲元素之一墩瞳。角色的外形、動作喉酌、裝備、技能千變?nèi)f化泪电，玩家可以自由搭配。本文就由一個簡單的RPG角色動畫開始相速，對比了序列幀動畫和骨骼動畫，最后給出一個基于序列幀的簡單設(shè)計和實現(xiàn)突诬。

1. 一個簡單的RPG角色動畫

玩家扮演的角色又稱為Avatar（紙娃娃），可以通過操作裝備或不同的技能展示出不同的動畫效果绒极。下面是一個簡單的角色使用攻擊技能的動畫， 主要由下面幾部分組成：

• 外形：一個女性角色。
• 翅膀：綠色的翅膀伏社。
• 武器：斧子塔淤。
• 技能：斧子砍下去的火焰特效。

一個簡單的RPG角色動畫

（PS. Avatar的確也是電影阿凡達的英文高蜂，若翻譯成“替身”顯得有些Low啊罕容。哈哈）

2. 序列幀動畫 vs. 骨骼動畫

2D游戲角色動畫的實現(xiàn)一般分為兩類：序列幀動畫、骨骼動畫锦秒。

序列幀動畫：

序列幀動畫就是利用一張張的圖片按照一定的幀率進行播放即可，實現(xiàn)簡單旅择，運行效率高。

下面用斧子砍的動畫生真，可以拆分為三個部件：角色外形、武器柱蟀、技能。

角色動畫

外形動畫序列：

外形

武器動畫序列：

武器

技能動畫序列：

技能

合在一起畜眨，使用固定的幀率同時播放即可，每一幀三種類型的圖片位置比較對應(yīng)好胶果。當然，幀率和位置信息一般都是美工同學繪制時通過工具生成的早抠。

骨骼動畫：

骨骼動畫，只保存各部分切圖組成的紋理集和動畫數(shù)據(jù)蕊连，只需要極少的原畫，便可完成千變?nèi)f化的動作動畫組合甘苍。在動畫制作時，只需要完成對關(guān)鍵幀的編輯载庭，通過動畫補間，便可自動生成流暢的動畫動作囚聚。

骨骼動畫

序列幀 vs. 骨骼動畫：

骨骼動畫聽起來是完美的角色動畫實現(xiàn)方案，對于3D游戲也是唯一的實現(xiàn)方案顽铸。對于2D游戲來說，骨骼動畫不一定是最適用的方案：

• 動作細節(jié)缺失：骨骼動畫說白了就是使用一些部件運行時進行旋轉(zhuǎn)谓松、縮放、平移鬼譬，靠數(shù)學運算生成一幀，勢必會讓角色動作中的細節(jié)缺失拧簸。

• 運行性能不如序列幀：骨骼動畫的一幀是由多個部件拼湊成的，每個部件對應(yīng)一個紋理對象盆赤，運行時的Draw Call會明顯高于序列幀。序列幀方式牺六，每一幀都是一個紋理對象而已。

• 資源占用極小是最大的優(yōu)勢：序列幀方式會使用大量的圖片資源淑际，動作稍有不同就得繪制不同的美術(shù)資源。

對于2D游戲春缕，如何選擇？下面給一個簡單的選擇標準：

• 寫實類锄贼，動作復(fù)雜，細節(jié)要求較高宅荤，選擇序列幀方式。（一般2.5D RPG游戲都會選擇使用序列幀方式冯键，2.5D角色方向一般都是8個，骨骼做起來也比較麻煩）
• 卡通類惫确，動作簡單蚯舱，角色方向單一掩蛤，可以選擇骨骼動畫。（什么機甲之類的最適合了盏档，動作本來就比較機械）
• 空間換時間燥爷，還是時間換空間？

3.基于序列幀的設(shè)計

下面基于序列幀做一個簡單的設(shè)計前翎。假設(shè)角色狀態(tài)如下：

• 方向：當前的方向，一共有八個方向港华。
• 動作：站立、移動立宜、攻擊。

• 外形：角色外形橙数。
• 武器：手里拿的武器，刀灯帮、斧等。
• 技能：攻擊時的特效钟哥。
• 翅膀：增加表現(xiàn)力的翅膀。

注意：外形腻贰、武器、技能银受、翅膀這些繪制的時候，根據(jù)情況針對不同的方向和動作都要準備相應(yīng)的圖宾巍。所以，添加新的動作時顶霞，相應(yīng)的部件可能都需要提供一套圖片資源锣吼。

角色方向：

八個方向如下。為了節(jié)約資源玄叠，也可以僅制作0-4五個方向的圖，方向5读恃、6、7分表使用3寺惫、2、1的圖進行翻轉(zhuǎn)西雀，當然要考慮翻轉(zhuǎn)后效果是否滿足畫面要求。（比如艇肴，雙手武器，來個翻轉(zhuǎn)就不協(xié)調(diào)了）

角色八方向

資源命名：

更加動作和方向再悼，不同的部件需要提供多張圖片資源。制定一個好的命名規(guī)則很有必要帮哈，比如：

類型-編號-動作-方向

假設(shè)當前角色正在進行攻擊，方向是1娘侍。那我們就需要取下面的動畫序列進行播放即可：

• player-100-attack-1.png
• weapon-200-attack-1.png
• wing-300-attack-1.png
• skill-400-attack-1.png

資源目錄：

針對不同的資源類型，可以分不同目錄憾筏，或者一個資源數(shù)據(jù)庫的形式都是可以的。下面只是一個簡單的基于目錄的示例：

avatar
   |- roles
   |     |- player
   |     |     |- p-x-stand-0.png
   |     |     |- p-x-move-0.png
   |     |     |_ p-x-attack-0.png
   |     |_ npc
   |- weapon
   |     |- w-x-stand-0.png  
   |     |_ w-x-attack-0.png  
   |- wing
   |     |- wing-x-stand-0.png  
   |     |_ wing-x-attack-0.png  
   |- skill  
   |    |- skill-x-attack-0.png    
   |  

4. 基于Egret的演示

Egret提供了MovieClip來播放動畫氧腰，基于MovieClip實現(xiàn)一個簡單Avatar系統(tǒng)刨肃。

效果如下：

演示

代碼位置：

https://github.com/david-pp/egret-code/tree/master/demo_avatar

歡迎訂閱