• 《AngerForce》研發故事:如何將2D動畫做出3D體積感?

    7人開發團隊Screambox Studio(驚叫盒游戲)與騰訊游戲創意大賽的淵源可不淺。在剛剛落幕的創意大賽上,Screambox Studio攜《輪回深淵》獲得了入圍獎。其實,早在一年前,團隊的另一款重要作品便登上過創意大賽的舞臺,它就是《憤怒軍團:重裝(AngerForce: Reloaded)》。本篇文章主要記錄了《AngerForce》中的Boss恐懼破壞者(Terror Cracker)設計和迭代的過程。

    這個Boss是2016年重制《AngerForce》時,我們嘗試制作的第一個新追加Boss,希望以此測試新工具和制作流程。我們在早期做了一個版本,根本沒法忍,經過了一次制作流程的迭代后,才有了最終的樣子。

    前面部分是開發故事,后面是動畫制作部分。

     

    《AngerForce》

    2014年我們曾制作了一款復古風格的STG游戲,并發布到了iOS平臺上,那就是《AngerForce: Relaoded》的前身《AngerForce: Strikers》。

    這款游戲發布后,受到了AppStore北美地區的推薦,并被PocketGamer和TouchArcade主動評測,說明游戲的質量還算不錯。

    《AngerForce – Strikers》

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

    《AngerForce: Reloaded》

    動畫難題

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

    不過運氣還算不錯,通過我一鄰居,在北京西邊門頭溝的大山里請到了一位可以建模動畫一把抓的大腿,幫我們解決了問題。

    但大腿看我們實在是太Indie了,幫我們解決完動畫她就又回山里開火鍋店去了。

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

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

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

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

     

    傳統2D骨骼動畫

     

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

    《AngerForce: Reloaded》雖然叫重裝(下文就都以《重裝》來稱呼),但是我們打算再追加些新的敵人、Boss和關卡,這些都要使用新的工具來制作了。

    我們嘗試使用手繪素材制作了一些動作比較簡單的小型敵人,還都比較順利,接下來就打算試試去制作一個全新的Boss。

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

    設計稿

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

    看著讓人尷尬的臉酸…… (;?_?)

     

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

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

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

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

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

    ⑤利用前后層遮蔽有一些“偷懶”技巧,不用考慮動作時模型穿透一類的問題。

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

    最后,我們決定用3D來輔助。

    Boss恐懼破壞者

     

    解決老問題

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

    2012年的主流移動設備甚至都不支持加載如此大的紋理,拆解為1024×1024大小的紋理是大概是12張,若使用32位圖片存儲,加載后圖冊單像素占用32位是4字節*1024*1024*12=48M內存占用!

    原始版本3轉2圖冊

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

    我們這次計劃全部用2D工藝——使用自由網格形變(Free Form Deformation)、關節替換配合骨骼動畫來制作。

    優化后的動畫圖冊

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

     

    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制作。

    本文來自騰訊游戲學院,觀點不代表本站立場,轉載請聯系原作者

    發表評論

    電子郵件地址不會被公開。

    關注微信
    新疆体育彩票11选5