關於《死亡細胞》美術工作流的初步探索

基礎思路：
在 maya 中使用 aiutility 材質渲染“畫素級”color、normal 序列切片。
在 Photoshop 中使用“將檔案載入堆疊”使序列按層級排布。
以 psb 格式儲存在 unity 中，修改 secondary textures 與 pivot。

1、分析死亡細胞的工作流

筆者在 18 年接觸《死亡細胞》時就發現了其美術的特點：

雖然是畫素畫，但是動作的流程程度不像是逐幀畫出來的，更像是三渲二。
不同的光線會對精靈產生不同的著色影響，如果是法線，不敢相信是手工畫的法線貼圖。
有些怪物之間只是顏色，護甲有無的區分，如果是顏色直接替換到還能理解，有些怪物就比另一個多了一些配件道具，如果還是用逐幀重畫一遍感覺不太合理。
但無奈當時還是個小白沒有足夠的知識儲備去解決這個問題，直到最近想起這事便進行初步探索。

使用扒皮工具，把《死亡細胞》的源素材提取出，動畫序列的排列雜亂錯落，不像是按畫素間距直接排列，而是使用 psb 格式，以圖層來儲存序列。



顏色精靈上的只保留了固有色，並沒有新增陰影，而每張顏色精靈都使用一張法線精靈，這個使用 sprite editor 賦予貼圖到也可以。

大致按這個思路試了試，得到了一個最終的嘗試，只使用 sprite 序列，每一張序列對應一張法線資訊。


下面分享操作過程。

2、使用 maya 匯出序列

2.1 畫素級渲染

將畫面渲染為畫素的風格，需要將抗鋸齒關閉，這裡筆者使用阿諾德渲染器，則在 arnold renderer 中將 filter type 設定為 closest 模式，並且將公用中將圖形儲存設定為 32*32（這裡根據專案需求，但建議使用 2 的冪次方）。


而使用 maya hardware 渲染的話，則直接在抗鋸齒中關閉所有選項，如果使用 maya software 則在抗鋸齒質量中，將邊緣抗鋸齒調整到低質量。

2.2 設定固有色與法線

同樣使用阿諾德渲染模式，在 hypershade 中，以 arnold→aiutility 材質模板建立兩個新的材質球：

① 一個用於渲染固有色，將其 shader mode 改為 flat，color mode 改為 color，color 則節點連結 basecolor 貼圖。


② 一個用於渲染法線，將其 shader mode 改為 flat，colormode 改為 normal，其他不需要改變。


2.3 渲染序列

這部分直接使用傳統流程：在渲染設定中設定開始幀與結束幀，再使用 maya 的渲染序列功能，匯出 tiff 格式的序列影像（這裡使用 png 會不保留 alpha 通道，匯出 tiff 格式並不影響後續進入 unity）。


3、使用 Photoshop 載入序列

進入 Photoshop 中，在“檔案”→“指令碼”→“將檔案載入堆疊”，選擇序列檔案，最後點選確定即可，color 與 normal 各載入一次。


這樣便可準備進入 unity，也可以先從圖層建立序列幀，在 ps 中預覽動畫有無問題。

4、進入 unity 及後置修改

4.1 匯入 unity

在 Photoshop 中，儲存為 psb 大型檔案格式，直接匯入 unity 中。

Ps 匯出檔案時，命名字尾可以參考：法線精靈（XXX_NormalMap.psb）顏色精靈（XXX_BaseColor.psb）。

4.2 後置修改

4.2.1. 畫素級專案通常設定：（insoecrtor 屬性）

① Filterr 設定為 Pixel;

② Compression 設定為 None。

4.2.2. 切片設定：（這一步針對於 XXX_BaseColor.psb 操作，從 sprite editor 按鈕進入）

① 在 Slice 中，將 pivot 設定為 bottom（這裡根據專案需求，pivot 為錨點的統一，通常在角色動畫中會將錨點放在底部），mathod 設定為 smart（這一步很重要，是個神坑）。


② spriteEditor → secondart textures，在小視窗中設定，name →_NormalMap，Texture 選擇導進來的法線貼圖檔案。


4.2.3. 燈光設定

在 unity 中，2D 的燈光渲染通常使用 URP（universal RP），在 Light 2D 設定中需要將 Use Normal Map 開啟，這樣即算完成。


5、總結

在《死亡細胞》美術總監的開發演講中，提到他們製作了一個小工具來進行這一套工作流的進行，但是筆者推測可能是一個將整個流程一步到位的工具（省去中間匯入到堆疊步驟），或者是統一處理畫素點，批次修改顏色的輔助工具（這個可以從主角在 3D 是藍褲子，在 2D 中是黃褲子中推斷，有可能是類似 ps 修改顏色的工具）。


或者與 emission 通道有關，能夠統一處理切片中發光的色彩資訊。

另外，傳統的 2D 畫素畫在美術動畫上的效率太低，《貓頭鷹男孩》是 2D 畫素美術的一種機制，但即使遊玩流程不長，其開發任然用了 10 年，可見傳統畫素動畫的耗時之久，所以《死亡細胞》為我們提供了一種新的思路，利用 3D 轉 2D 來進行高效的動畫工作。

使用螢幕後處理來統一畫素風格也是一種新的思路。

總之，傳統工藝在工業化面前必定會式微，遊戲研發的工業化趨向必須要求我們不斷探索更加高效的工作流，正如影視行業，迪士尼也不會因為手繪動畫更有匠心與情懷而放棄 3D 轉型。

參考文獻:

Art Design Deep Dive: Using a 3D pipeline for 2D animation in Dead Cells
https://www.gamasutra.com/view/news/313026/Art_Design_Deep_Dive_Using_a_3D_pipeline_for_2D_animation_in_Dead_Cells.php
Dead Cells 3D to 2D Animation crunching
https://www.reddit.com/r/howdidtheycodeit/comments/dwst09/dead_cells_3d_to_2d_animation_crunching/

作者：IWSE
來源：INDIENOVA
地址：https://indienova.com/indie-game-development/discovering-art-of-dead-cells/