2013/2/28

Spriter好好玩系列 (一) ---- 什麼是Spriter ?


Spriter 是一套專門製作2D 遊戲動畫用的工具,官方自稱的副標是:
"The Ultimate 2D Game Animation Solution"
最近試玩幾天的心得是:假如他把一些小細節修得更完善的話,確實是有潛力揹起這樣的稱號。

Spriter 最早是出現在Kickstarter 上,並於2012/4 完成募資。可以先看一下他在Kickstarter上的介紹影片,之後再到他們的官網看看介紹及教學,還有目前版本狀況。
(本文撰寫時仍為alpha 4.1版,可免費下載,正式版預計2013 Q1 release)

簡單來說,目前2D遊戲的開發,不論是用什麼工具或程式語言,其動畫部份大多都會先請美術人員輸出一份SpriteSheet圖及描述檔。

(大概像這樣的東西)

上圖的動畫是用Flash繪製的,角色是由許多parts組成,然後在時間軸上設定多個keyframe,並於各個keyframe上將角色擺成不同的姿勢,最後才串成動畫

上圖動畫共使用了18個parts,拆解後的樣子如下圖:

利用這18個parts,我們可以擺出至少十多種不同的姿勢,但隨之而來的問題是,動作愈多最後產生的SpriteSheet檔就會愈大;而且不是只有關鍵姿勢而已,為了讓動畫效果流暢,姿勢與姿勢之間還會需要許多keyframes來串接。

以上面動畫的為例,從揮拳出去,再收拳回來到原點,一個簡單的動畫就用了8個keyframes來組成,如此不難想像一個完整的遊戲角色,全部動畫輸出的SpriteSheet檔後會有多大張,這些都會在程式開發階段,對記憶體管理及效能優化上造成負擔。

尤其近年來大家特別關注的手機、平板遊戲市場,在記憶體、CPU有限,但畫質又要與桌機品質相似(retina display)的狀況下,這種問題就格外需要注意。

而Spriter就是因應這樣的問題而生,他提供了一個像是陽春版的Flash介面,有timeline、keyframe這些東西。

(介面大致如上圖)

我們可以import多個png檔,當做組成角色的parts,然後在他的timeline上設計不同的動作並標示成keyframe,而keyframe完成後,中間的tween會自動產生。最後Spriter 會將所有keyframe的資訊輸出成一份SCML檔,我們只要將這份SCML檔連同那些parts圖檔,import到任何支援Spriter 格式的開發平台後,即可播放這些動畫。
(這邊可以查詢目前已支援Spriter的技術有哪些)

而SCML的內容其實只是XML,裏面是只記錄了每個keyframe的時間及各個parts所在的位置、尺寸、角度等資訊,如此即使再多的動作,也只是增加文字資訊,圖檔則只有一開始的那些parts而已。這種做法會比傳統的SpriteSheet省下許多的檔案大小負擔。

這種模式其實會讓人想起90年代末期,Flash崛起的過程。當時也是頻寬不足的狀況下,一般動畫格式不是GIF就是MPG,AVI等影片檔,但不論哪種,其原理都是連續圖檔播放,檔案都會很大,讓user難以下載。而Flash就是改以元件化的播放格式,大大減小了動畫檔的大小。而Spriter目前做的事情,便是類似的邏輯。
所以我個人認為:下一版的Flash應該要做出類似或直接支援SCML格式,不要再像CS6一樣,輸出了一堆SpriteSheet格式給別人用,然後自己一點符合時勢的創新都沒有。

最後,Spriter這套軟體目前還在alpha中,有許多UI操作上的小細節我個人覺得還不是很順手,期望他未來的版本可以更加成熟。



Index:
Spriter好好玩系列 (一) ---- 什麼是Spriter ?
Spriter好好玩系列 (二) ---- Spriter 基本操作
Spriter好好玩系列 (三) ---- 使用SpriterAS
Spriter好好玩系列 (四) ---- 使用SpriterMC

2 則留言:

kevin ni 提到...

好文,期待下集lereina

Maso Lin 提到...

thanks!