如何打造細緻的2D捏臉系統

大家好，我是漢家松鼠的CG，《江湖X》、《漢家江湖》的製作人和主程，今天給大家介紹一下我們遊戲中的捏臉系統是如何設計和開發的。

背景介紹

遊戲《漢家江湖》是我們一款2D原創武俠題材RPG獨立遊戲，我們提供了一個2D的捏臉系統供玩家自定義角色，同時也供我們自己捏造遊戲中的各種非重要角色。

整個捏臉系統由我和我們的美術（文藝呂布）兩個人開發設定而成，一開始做的初衷是因為我們在開發《江湖X》的時候，發現故事設定的NPC數量實在是太多——如果每個都畫，則工作量恐怖。為了節省工作量，當時本來打算的方案是只畫重要人物，其他人物全部用黑人小剪影（如下）

後來我們開發時期業餘時間玩某個H遊戲的時候（是的，你沒看錯，就是某H遊戲……），該遊戲隨機NPC是從一個隨機的頭像庫里抽取然後進行簡單的顏色替換，我們突發靈感的覺得，我們可以更進一步做一個純2D的捏臉系統嘛！

於是乎我們搜羅了一圈資料，發現大多遊戲普遍的2D捏臉都比較簡單，能夠自定義的部分相當有限。而且也幾乎從來沒有中國風元素的2D捏臉，我們覺得這裡是一個亮點，既可以解決我們的量產NPC的問題，也可以讓主角多一個定製化捏臉的功能，同時似乎也是國風2D遊戲的首創——所以我們決定來設計自己的標準和規範。

我們第一版在《江湖X》里最終的捏臉系統成品效果如下（請無視當時醜陋的UI）

以及在後續的資料片《漢家江湖》中重做了整個美術素材以及更加優化了整個捏臉系統。

核心問題

開發這個系統的核心是兩個層面：美術規範和技術規範

美術規範需要解決的問題——我們需要將美術資源拆成多少層？每一層的美術標準如何制定？各層之間的關係是怎樣？每個層可以自定義調整的參數有哪些？如何保證這些參數最終出來的結果「和諧」？（而不是眼睛眉毛鼻子擠到一起之類的）

技術規範需要解決的問題——對於捏好的臉如何存儲和讀取？資源如何打包存取以達到效率最大化？（運行時內存、運行時繪製效率、資源打包和存儲效率）

下面，我們就這些問題一一展開：

美術規範：

我們根據項目設定的需要，考慮主要人物構成由 身體+頭部+武器+面部配飾 組成。

其中頭部包括 頭髮（包括帽子等頭部配飾）、臉部輪廓、眼睛、鼻子、眉毛、嘴巴、鬍鬚等。同時我們還考慮了角色的膚色變色、衣服調色等……

這一步大家可以根據自己的實際項目需要來設定拆分部分，提幾個我們當時考慮的一些特殊情況提煉而成的規範吧：

• 要想表現力好，頭髮和帽子不好做分開，否則無法組合出很好的效果（會由於髮型和帽子的穿插而美術設計上受限很大）
• 髮型要想表現力好，也得分為多個層：同樣一個髮型會有部分頭髮在面部以後、面部以前身體之後、以及身體之前。（見下圖對比1：我們是分了4個層——前發、前發陰影、中發、後發。並且後來發現，若干髮型還可以做前後發的組合來形成更多的搭配，但是不完全可以適配所有的髮型情況，所以最終捏臉規範上也需要做限制——我們後面會做解釋）關於前發陰影：為了美觀起見，我們設定了前發在面部的投影的層，來處理虛擬光照下統一的陰影繪製（見下圖對比2）。

對比1：典型的前、中、後發示意

對比2：前發投影對比示意

• 同以上道理，一個身體也可能需要分若干層。因為其中涉及到頭髮在身體表現上的層次穿插，這裡就不具體舉例示意了。

所以我們最終確定的層次結構從前到後依次是

• bitem（身後道具）
• bhair（後部分頭髮）
• body（身體）
• mhair（中部頭髮）
• head（面部）
• fhairshadow（前發陰影投影）
• nose（鼻子）
• mouth（嘴巴）
• reye（右眼）
• leye（左眼）
• lbrow（左眉）
• rbrow（右眉）
• beard（鬍鬚）
• fitem（身前道具）
• fhair（前發）
• fbody（身體前部分）

這樣，我們最後規範的美術的繪製方法也是按照各個層繪製，然後逐步拆出來，最後組合微調。我們規定了面部、五官、脖子等中心位置範圍，根據每一個部位設置偏移（包括橫向和縱向）、旋轉的錨點。

部分拆出素材示例：

技術規範：

捏臉部分的素材涉及大量的2D資源貼圖，那麼如何存儲是一個問題。在Unity等遊戲引擎中，我們需要綜合考慮的存儲和運行時載入的效率。

從存儲和內存載入的角度來說，2的次冪正方形紋理是效率最高的。同時由於我們美術規範上分了如此多的層，載入的時候如何dynamic batch也是一個問題。如何劃分圖集，如何載入，成為了一個需要取捨的點。

我最終的方案是，分三類資源打包：

1、最大的部分（主要是角色的身體）單獨一張圖一個文件，存成2的次冪文件，統一放在一個 assetbundle里，運行時按需載入，延遲釋放（比如切場景時釋放所有臨時緩存的該類紋理資源）。

2、較大的部分（占面積較大的頭髮、物品），根據類型使用TexturePacker打包圖集，放在assetbundle里，運行時按需載入，延遲釋放

3、最小的部分（臉部、眼睛、鼻子、眉毛等），使用TexturePacker統一打一個圖集（為了降低drawcall，動態合批），啟動遊戲時直接載入常駐內存。

配置約束語法

這裡再提供我們的整體捏臉配置的數據結構供大家參考一下

這裡template "C"是我們所有的男性捏臉

avata_template節點下

partnumber標誌的是各個部位對應的資源數量

canhide是指該部位是否可以被隱藏

pivots是各個部位對應的偏移/旋轉的錨點

adjusts是對應我們構圖各個部位的像素微調配置

底下的子節點

bind 是指某個項在某些條件下是否可以被使用

bhair是指在某個髮型(index)能夠使用的後發編號（這裡是根據實際美術資源是否協調進行配置的）

<avata_template name="C" w="512" h="512" atlas="2" partnumber="40 30 37 34 30 34 33 19 0 30" canhide="0 0 0 0 0 0 0 0 1 1" bindmode="0 0 0 0 0 0 0 0 1 1" pivots="0.5 0.57 0.54 0.64 0.47 0.64 0.54 0.64 0.46 0.64 0.5 0.59" adjusts="6 5 5 5 25 25 12 5 15 15 0.2 5 0.3 3 5 0.2 10 10" > <bind part="fitem" index="0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21" condition=""/> <!--<bind part="bitem" index="1 2 6 26" condition=""/>--> <bhair index="1" support="3 4 6 9 10 12 16 17 19 21 22 23 25 26 27"/> <bhair index="2" support="2 4 5 10 13 16 17 21 22 23 27"/> <bhair index="3" support="3 9 17 18"/> <bhair index="4" support="3 4 6 9 10 12 13 16 17 18 19 21 22 23 25 26"/> <bhair index="5" support="4 5 9 10 12 13 16 18 19 21 22 23 25"/> <bhair index="6" support="1 3 4 6 9 10 12 16 17 18 19 21 22 23 25 26"/> <bhair index="7" support="7 13 18 21"/> <bhair index="8" support="8 13 17 18 27"/> <bhair index="9" support="1 2 3 4 5 6 7 9 10 13 16 17 18 19 21 22 23 25 26 27"/> <bhair index="10" support="1 4 9 10 12 13 16 17 18 19 21 22 23 25 26"/> <bhair index="11" support="5 9 13 17 18"/> <bhair index="12" support="1 9 10 12 13 16 17 18 19 21 22 23 25 26"/> <bhair index="13" support="5 10 13 18 21 27"/> <bhair index="15" support="13 15 18 21"/> <bhair index="16" support="5 10 12 13 16 19 21 22 23 25 27"/> <bhair index="17" support="1 3 4 6 9 10 12 13 16 17 18 19 21 22 23 25 26 27"/> <bhair index="18" support="3 8 9 17 18 21 27"/> <bhair index="19" support="1 4 5 6 7 9 10 12 13 16 17 18 19 21 22 23 25 26 27"/> <bhair index="20" support="18 19 20"/> <bhair index="21" support="3 6 13 17 18 21"/> <bhair index="22" support="2 3 4 6 9 10 12 13 16 17 18 19 21 22 23 25 26"/> <bhair index="23" support="1 3 4 6 9 10 12 13 16 17 18 19 21 22 23 25 26 27"/> <bhair index="24" support="5 9 10 13 17 18 21 25 27"/> <bhair index="25" support="1 4 5 7 9 10 12 13 16 17 18 19 21 22 23 25 27"/> <bhair index="26" support="1 4 5 6 9 10 12 13 16 17 18 19 21 22 23 25 26"/> <bhair index="27" support="1 3 5 13 18 21 27"/> <bhair index="28" support="21 22 23 25 28"/> <bhair index="29" support="2 5 13 18 21 27 29"/> <bhair index="30" support="2 5 13 18 21 27 29 30"/> </avata_template>

另外我們還做了一些膚色變化、衣服變色的方案，是使用的unity中的顏色混合和調色板，這裡就不細說了。

結語

最終我們出的效果還不錯，也在標準制定好以後，通過美術外包的小夥伴迅速拓展了內容量。以下是一些有才玩家的捏臉，供大家娛樂娛樂~

更多的玩家捏臉可以看這篇taptap的玩家貼