如何為2D遊戲做出空間感和3D感？

這是我之前在cowlevel中寫的一篇回答。

這個專欄剛剛開闢，內容少的慘不忍睹，所以搬運了過來。AngerForce: Reloaded在開發過程當中有一些有意思的事情比較值得記錄，後面有時間的時候，我會慢慢整理出來。這裡先提前挖個坑。

cowlevel的提問是「如何為2D遊戲做出空間感、3D感？」，以下是原回答，略有刪減。

有的奶牛提到了光影、視差場景、還有一些動畫技術。我也分享一些自己的經驗。

針對靜態素材：

1. 透視準確。
2. 不同層級的對象位置得當。
3. 適當的光線和陰影。

素材其實是基礎，如果2D的素材繪製的問題一堆，將很難做出好的效果。

動畫實現上的一些技巧：

1. 動畫對象的部件充分拆解。
2. Free Form Deformation。（近幾年非常流行的2D動畫技術，不太清楚官稱是什麼。我們使用Spine作為動畫解決方案，官網上這麼叫的。上面有奶牛提到了。我也聽過一些其他名字：Live2D、網格形變動畫、Mesh動畫、XX變形等等等等無所謂叫什麼，總之是指通過變形2d紋理來實現動畫的技術。）
3. 適當設計「遮蔽物」（障眼法）。
4. 混合位移和部件關鍵幀，製造整體的立體效果。
5. 必要時使用一些3D技術進行輔助。

場景方面已經有奶牛提到了視差滾動場景、動態光源、陰影等內容，我知道就這麼多也就不獻醜了。單位的動畫我結合自己的遊戲舉些例子吧。

我們的遊戲(AngerForce-Reloaded)是一個2D的頂視角縱版捲軸射擊遊戲，九十年代調調的STG（簡單說就是打飛機(′?ω?`) ），一些方案希望可以對其他開發者有參考作用。

動畫對象充分拆解

2D的骨骼動畫要出效果，需要把單位拆解成足夠細分的單元，這樣製作動畫時分開操作不同關節可以表現出良好的前後層關係，製造3D的錯覺。

上圖是近些年比較流行的動態角色立繪；

這是動畫所用的Atlas。這個動畫有用到Free Form Deformation，用於模擬3D狀態下的關節透視變化時的形態，比如，乳搖……

自由網格形變Free Form Deformation

這項功能目前主流的動畫編輯工具基本都有支持，技術上沒有什麼難點。

我們為遊戲中的每個Boss設計了一個這樣的出場動畫，類似九十年代電影的角色介紹。

這部分我們採用Free Form Deformation模擬製造了一個近似3D的轉身的動畫。這個角色設定上有很多規整的幾何圖形，在進行形變時產生了非常好的效果，甚至有同學以為我們的遊戲是3D實現的，實際上只用一張紋理。

這是紋理的網格方案和所用Atlas。

這個動畫單獨播放是這樣的效果，如果仔細看還是有很多瑕疵的，能夠發現並不是由3D實現的，但在遊戲實際應用中，由於動畫播放時間很短，足夠以假亂真。

Free Form Deformation的原理很簡單，但具體實現所展現出的效果取決於上面提到過的因素：透視準確、適當的陰影、前後層部件適當的縮放和位移、運動規律以及充分的拆解。

遮蔽物

有時「雞賊」點，適當設計一些遮蔽物是比較理想的做法，無論是優化紋理，還是為了減少工作量。

我們有一個車造型的Boss，想給他設計一個在鏡頭前漂移著呼嘯而過的出場動畫。

基本過程設想是下圖這樣：

車尾在鏡頭前漂移駛過，而後再加速向前方駛去，在最後時再來一個慢鏡頭特寫，配合Boss名字砸在屏幕上，歐耶，完美！（這得畫到什麼時候（╯－＿－）╯╧╧ ）

用2D幀動畫的話，從①到③的過程需要很多幀，得畫尿血，3轉2最後也會是一張超大Atlas。後來我們討論了一下，決定做的「偷」一點，使用了如下方案——加入遮蔽煙霧。

車尾在屏幕右側進場，在鏡頭前滑過，這整個過程車子只有位移和縮放，沒有任何透視的變化。但由於大部分畫面車子都有煙霧的幀動畫進行遮擋，配合上位移和鏡頭的晃動，車子最後的」慢鏡效果「是使用Free Form Deformation，整體看上去是不是有了3D的景深和立體感？

換了沒有煙霧的效果再看下：

遮蔽物的使用原則是——用小的素材進行動畫去遮蔽大的素材，或是用簡單的動畫去遮蔽一個複雜的動畫。此處煙霧的應用減少了關鍵幀，營造了「漂過的似乎車子真的有透視變化」的效果，並且煙霧還有一個關鍵作用，就是作為「遮眼法」，過渡了「漂移的大車」這一幀替換「向前駛去的小車」幀的鏡頭，觀眾會根據前搖和後搖的運動軌跡去腦補被遮蔽的中間的過程。（看到車子先向左划過的前搖，和衝出去的後搖，把沒看到的過程自動腦補成S彎，其實就是平移和縮放。）

混合使用位移和部件關鍵幀

僅關鍵部件使用不同透視的紋理而其餘部件僅採用位移，有時能產生「似乎整體都有透視變化」的錯覺。

圖中機甲的移動只有大腿和膝蓋兩個關鍵部件擁有不同透視的幀動畫，其餘部件僅僅使用位移，讓觀眾覺得似乎小腿、腳、胸部和頭似乎都有一些透視上的變化。用這種要注意動作符合運動規律，被遮擋的部件可以大幅移動（腳和小腿），較大的和暴露在最頂的層部件不適合做過大幅度動作（胸口和頭），畢竟它們沒有透視變化，大位移容易穿幫。

這部分內容，日系的2D遊戲提供了很多範例，就不獻醜了。

使用3D技術輔助

想要3D的感覺最簡單的方式就是直接用3D（廢話…（⊙＿⊙；）… ）。這部分無需多言，一些透視要畫準的話是2D，必要時也需要一些3D的工具的輔助，比如草圖大師，甚至是建模。

2D做出3D感其實就是用2D的素材來模擬3D世界的運動規律，但2D遊戲畢竟是2D的紋理，想要百分百的3D效果那說明使用3D來製作遊戲是最經濟的。2D只是用技巧製造一些視覺表現力，達到欺騙眼睛的效果就夠了。

最後，丟個過場動畫的GIF，使用2D素材和Free Form Deformation實現。

推薦閱讀：