2D動畫的3D體積感：AngerForce幕後故事

AngerForce: Reloaded是我們製作的一款九十年代街機風格的STG遊戲，目前已經發布，可以在Steam中下載到。你沒有玩過這款遊戲也沒有關係，這並不影響你閱讀後面的內容。

本篇文章將主要講述遊戲中的Boss恐懼破壞者（Terror Cracker）設計和迭代的過程。這個Boss是2016年重製AngerForce時，我們嘗試製作的第一個新追加Boss，希望以此測試新工具和製作流程。我們在早期做了一個巨屎的版本，根本沒法忍，經過了一次製作流程的迭代後，才有了最終的樣子。

前面部分是開發故事，可以直接跳到後面動畫設計製作部分不影響閱讀。 (??_??)

文章同載於奶牛關。

AngerForce

2014年我們曾製作了一款復古風格的STG遊戲，並發布到了iOS平台上，那就是AngerForce: Relaoded的前身AngerForce: Strikers。這款遊戲發布後，受到了AppStore北美地區的推薦，並被PocketGamer和TouchArcade主動評測，說明遊戲的質量還算不錯。

但說實話，我們在完成這款遊戲後，覺得很多細節應該可以做得更好。直到2016年我們決定將這個遊戲重做一遍，發布到更多平台上，也就是後來的《憤怒軍團：重裝》AngerForce: Reloaded。

動畫難題

我們團隊在組建的時候是個票友團隊——沒做過遊戲。在開發AngerForce初代時我們就遇到了很多難題，其中最大的問題就是動畫。我們團隊當中沒有專職的動畫師。

不過運氣還算不錯，通過我一鄰居，在北京西邊門頭溝的大山裡請到了一位可以建模動畫一把抓的大腿，幫我們解決了問題。但大腿看我們實在是太Indie（diao si）了，幫我們解決完動畫她就又回山裡開火鍋店去了。

大腿走後，開發組只剩我們5個雜魚了，我們需要再次面對動畫這一難題。

初代《憤怒軍團》我們使用Cocos2d-iPhone開發，當時從動畫打包、彈幕製作到關卡製作全部由我們自己開發的整套工具鏈來完成，而我們的動畫工具只能支持幀序列。

我們決定要重製遊戲時，為了解決跨平台問題，已經確定要更換引擎，所以我們需要拋棄曾經的絕大部分開發工具，尋找新的替代品。

最終我們決定使用Unity來進行開發，為了能保持效率，還將復用大部分資源，繼續保留遊戲的2D畫面，動畫使用第三方工具Spine來製作。

傳統2D骨骼動畫

Spine最近幾年非常流行，有許多便捷的功能：曲線調整動畫節奏、網格形變動畫、允許混合動畫播放等等，對主流引擎的支持也很好。

AngerForce: Reloaded雖然叫重裝（下文就都以《重裝》來稱呼），但是我們打算再追加些新的敵人、Boss和關卡，這些都要使用新的工具來製作了。我們嘗試使用手繪素材製作了一些動作比較簡單的小型敵人，還都比較順利，接下來就打算試試去製作一個全新的Boss。

我們很快完成了設計方案：

根據我們的設想，這個Boss將完全使用2D手繪的紋理，動畫採用骨骼動畫和關節原件替換的形式來實現。然後我們就做出了一開始提到的那個巨屎的版本……

其實我們對自己的設計方案還是有信心的，但純2D方案製作有很多局限性，製作出的效果非常廉價，對於2D動畫方案我有一些總結：

①無關節變化的2D紋理只適合做簡單動畫。

②單純靠轉動、縮放和位移沒辦法表現出複雜、震撼的大幅度動作，製作精良動畫需要引入關節替換。

③紋理的繪製的細節越多，製作這張紋理的其他透視關節就越困難，工作量也就越大——越細越難畫准。

④多關節的複雜骨骼動畫能製作出非常有表現力的動畫效果，但製作調試比較耗時，最適合應用在主角這種登場頻率較高的單位身上。

⑤利用前後層遮蔽有一些「偷懶」技巧，不用考慮動作時模型穿透一類的問題。

涉及到項目中的這個Boss，在繪製紋理上我們有很大的矛盾——畫太細不好做關節，細節少做出來又覺得作為Boss效果不行。

最後，我們決定用3D來輔助。

解決老問題

AngerForce項目早期的動畫使用3轉2幀序列，當時受客觀條件限制Boss動畫優化很差，全部動畫的幀序列打包完畢有3張2048x2048大小的圖冊（Atlas）。

2012年的主流移動設備甚至都不支持載入如此大的紋理，拆解為1024x1024大小的紋理是大概是12張，若使用32點陣圖片存儲，載入後圖冊單像素佔用32位是4位元組*1024*1024*12=48M內存佔用！

Boss的一個形態就占這麼多內存，這沒法忍。雖說《重裝》計劃在PC和主機平台發布，但我們也不打算再用幀序列了。

我們這次計劃全部用2D工藝——使用自由網格形變（Free Form Deformation就是上一篇文章提到的FFD）、關節替換配合骨骼動畫來製作。

手繪關節太痛苦了，我們給單位建了模，想要各個透視角度的關節直接單獨渲出來，精細紋理下的關節繪製問題就解決了。

FFD減少關鍵幀

建模後，渲染關鍵幀很方便了，但我們也不打算濫用。對於大多數平常的小幅度動畫，我們都嘗試使用FFD來製作。

FFD是最近幾年比較流行的技術，原理是在一張2D的紋理上定義網格，然後通過改變網格頂點的位置來變形這張紋理。使用這個技術，可以通過形變來得到單張紋理近似的其他透視角度，從而達到減少關鍵幀的效果。

這裡簡單擺個3D模型來說明：Boss的造型簡單概括就是一個易拉罐後面背倆柱子，在我們的眼睛由攝像機位置①到③的過程中，關節透視如圖中的樣子來變化的。

我們根據這種透視變化的規律，用FFD形變就得到了Boss軀幹關節的其他透視角度了：

使用FFD還有個好處就是，在形變的時候你可以得到平滑的過渡動畫，合理的使用能產生神奇的效果，欺騙玩家的眼睛。

GIF中的動畫沒有使用任何其他的關鍵幀，只是使用同樣的紋理，似乎有了3D的效果。這裡面應用FFD的只有軀幹和肩甲兩個關節，其他關節只有縮放、旋轉和位移。

比如軀幹後的兩個火箭包，只是通過簡單的位移加小角度旋轉，卻讓人感覺似乎和軀幹一起側轉了起來。

其實這個動畫體積感最強的地方是在頭部和肩膀的區域，這裡有一個小技巧：利用2D動畫的不同關節的遮蔽關係，適當的設計一些小的結構，在關節位移的時候顯露出來，能讓人感覺內部似乎隱藏著複雜的結構和體積。

替換關節完成大幅度動畫

FFD在小幅度的動畫里能發揮神奇的效果，但想要做出幅度大表現力強的動作，還需要配合使用關節替換。

這個GIF得動作幅度就比較大了，軀幹部分基本做了一個接近90度的轉體，角度太大FFD就不好使了，但仍可以替換一些關鍵關節，再組合使用FFD、位移、旋轉和縮放用很少的紋理作出很好的效果。

這裡面狀態1到狀態2，軀幹的大幅轉動使用關節替換加FFD完成。在狀態2到狀態3的時候，陸續將遠端的手臂和肩甲兩個關鍵關節替換為合適的角度，而主軀幹使用FFD再配合其他關節的旋轉和位移——搞定。這個動畫所用紋理都已經列在上面了。

總結

這個Boss的整個製作讓我們大致了解到了，自己用各種方案實現動畫效果能達到的「天花板」：

1.純2D工藝能達到的效果確實有限。

2.FFD+關節替換能製作出驚人的效果。

3.2D方案需要衡量好投入和產出——花費30分的力氣能達到70分的效果；但如果想達到90分的效果可能要付出100分的努力，所以某些細節儘力而為就好。

4.複雜的2D動畫投入精力很大，適宜用在出場時間多和獲得關注較高的單位上。

5.適當用3D輔助可以減少工作量。

6.2D動畫追求的還是2D的特性，如果更希望追求3D的效果請用3D製作。

下回預告：下一篇想講講《重裝》的另一個Boss的製作和動畫紋理優化的技巧，不過最近忙著趕新作的版本，抽空再說吧。(;?_?)

推薦閱讀：