大家好喷屋，我是漢家松鼠的CG，《江湖X》戈盈、《漢家江湖》的制作人和主程仇穗，今天給大家介紹一下我們游戲中的捏臉系統(tǒng)是如何設(shè)計(jì)和開發(fā)的流部。
背景介紹
游戲《漢家江湖》是我們一款2D原創(chuàng)武俠題材RPG獨(dú)立游戲，我們提供了一個(gè)2D的捏臉系統(tǒng)供玩家自定義角色纹坐，同時(shí)也供我們自己捏造游戲中的各種非重要角色枝冀。
整個(gè)捏臉系統(tǒng)由我和我們的美術(shù)（文藝呂布）兩個(gè)人開發(fā)設(shè)定而成，一開始做的初衷是因?yàn)槲覀冊(cè)陂_發(fā)《江湖X》的時(shí)候耘子，發(fā)現(xiàn)故事設(shè)定的NPC數(shù)量實(shí)在是太多——如果每個(gè)都畫果漾，則工作量恐怖。為了節(jié)省工作量拴还，當(dāng)時(shí)本來(lái)打算的方案是只畫重要人物跨晴，其他人物全部用黑人小剪影（如下）
后來(lái)我們開發(fā)時(shí)期業(yè)余時(shí)間玩某個(gè)H游戲的時(shí)候（是的，你沒看錯(cuò)片林，就是某H游戲……）端盆，該游戲隨機(jī)NPC是從一個(gè)隨機(jī)的頭像庫(kù)里抽取然后進(jìn)行簡(jiǎn)單的顏色替換，我們突發(fā)靈感的覺得费封，我們可以更進(jìn)一步做一個(gè)純2D的捏臉系統(tǒng)嘛焕妙！
于是乎我們搜羅了一圈資料，發(fā)現(xiàn)大多游戲普遍的2D捏臉都比較簡(jiǎn)單弓摘，能夠自定義的部分相當(dāng)有限焚鹊。而且也幾乎從來(lái)沒有中國(guó)風(fēng)元素的2D捏臉，我們覺得這里是一個(gè)亮點(diǎn)韧献，既可以解決我們的量產(chǎn)NPC的問題末患，也可以讓主角多一個(gè)定制化捏臉的功能，同時(shí)似乎也是國(guó)風(fēng)2D游戲的首創(chuàng)——所以我們決定來(lái)設(shè)計(jì)自己的標(biāo)準(zhǔn)和規(guī)范锤窑。
我們第一版在《江湖X》里最終的捏臉系統(tǒng)成品效果如下（請(qǐng)無(wú)視當(dāng)時(shí)丑陋的UI）
以及在后續(xù)的資料片《漢家江湖》中重做了整個(gè)美術(shù)素材以及更加優(yōu)化了整個(gè)捏臉系統(tǒng)璧针。
核心問題
開發(fā)這個(gè)系統(tǒng)的核心是兩個(gè)層面：美術(shù)規(guī)范和技術(shù)規(guī)范
美術(shù)規(guī)范需要解決的問題——我們需要將美術(shù)資源拆成多少層？每一層的美術(shù)標(biāo)準(zhǔn)如何制定渊啰？各層之間的關(guān)系是怎樣探橱？每個(gè)層可以自定義調(diào)整的參數(shù)有哪些申屹？如何保證這些參數(shù)最終出來(lái)的結(jié)果“和諧”？（而不是眼睛眉毛鼻子擠到一起之類的）
技術(shù)規(guī)范需要解決的問題——對(duì)于捏好的臉如何存儲(chǔ)和讀人砀唷哗讥？資源如何打包存取以達(dá)到效率最大化？（運(yùn)行時(shí)內(nèi)存胞枕、運(yùn)行時(shí)繪制效率杆煞、資源打包和存儲(chǔ)效率）
下面，我們就這些問題一一展開：
美術(shù)規(guī)范：
我們根據(jù)項(xiàng)目設(shè)定的需要曲稼，考慮主要人物構(gòu)成由 身體+頭部+武器+面部配飾 組成索绪。
其中頭部包括 頭發(fā)（包括帽子等頭部配飾）湖员、臉部輪廓贫悄、眼睛、鼻子娘摔、眉毛窄坦、嘴巴、胡須等凳寺。同時(shí)我們還考慮了角色的膚色變色鸭津、衣服調(diào)色等……
這一步大家可以根據(jù)自己的實(shí)際項(xiàng)目需要來(lái)設(shè)定拆分部分，提幾個(gè)我們當(dāng)時(shí)考慮的一些特殊情況提煉而成的規(guī)范吧：
- 要想表現(xiàn)力好肠缨，頭發(fā)和帽子不好做分開逆趋，否則無(wú)法組合出很好的效果（會(huì)由于發(fā)型和帽子的穿插而美術(shù)設(shè)計(jì)上受限很大）
- 發(fā)型要想表現(xiàn)力好，也得分為多個(gè)層：同樣一個(gè)發(fā)型會(huì)有部分頭發(fā)在面部以后晒奕、面部以前身體之后闻书、以及身體之前。（見下圖對(duì)比1：我們是分了4個(gè)層——前發(fā)脑慧、前發(fā)陰影魄眉、中發(fā)、后發(fā)闷袒。并且后來(lái)發(fā)現(xiàn)坑律，若干發(fā)型還可以做前后發(fā)的組合來(lái)形成更多的搭配，但是不完全可以適配所有的發(fā)型情況囊骤，所以最終捏臉規(guī)范上也需要做限制——我們后面會(huì)做解釋）關(guān)于前發(fā)陰影：為了美觀起見晃择，我們?cè)O(shè)定了前發(fā)在面部的投影的層，來(lái)處理虛擬光照下統(tǒng)一的陰影繪制（見下圖對(duì)比2）也物。
對(duì)比1：典型的前宫屠、中、后發(fā)示意
對(duì)比2：前發(fā)投影對(duì)比示意
- 同以上道理焦除，一個(gè)身體也可能需要分若干層激况。因?yàn)槠渲猩婕暗筋^發(fā)在身體表現(xiàn)上的層次穿插，這里就不具體舉例示意了。
所以我們最終確定的層次結(jié)構(gòu)從前到后依次是
bitem（身后道具）
bhair（后部分頭發(fā)）
body（身體）
mhair（中部頭發(fā)）
head（面部）
fhairshadow（前發(fā)陰影投影）
nose（鼻子）
mouth（嘴巴）
reye（右眼）
leye（左眼）
lbrow（左眉）
rbrow（右眉）
beard（胡須）
fitem（身前道具）
fhair（前發(fā)）
fbody（身體前部分）
這樣乌逐，我們最后規(guī)范的美術(shù)的繪制方法也是按照各個(gè)層繪制竭讳，然后逐步拆出來(lái)，最后組合微調(diào)浙踢。我們規(guī)定了面部绢慢、五官、脖子等中心位置范圍洛波，根據(jù)每一個(gè)部位設(shè)置偏移（包括橫向和縱向）胰舆、旋轉(zhuǎn)的錨點(diǎn)。
部分拆出素材示例：
技術(shù)規(guī)范：
捏臉部分的素材涉及大量的2D資源貼圖蹬挤，那么如何存儲(chǔ)是一個(gè)問題缚窿。在Unity等游戲引擎中，我們需要綜合考慮的存儲(chǔ)和運(yùn)行時(shí)加載的效率焰扳。
從存儲(chǔ)和內(nèi)存加載的角度來(lái)說倦零，2的次冪正方形紋理是效率最高的。同時(shí)由于我們美術(shù)規(guī)范上分了如此多的層吨悍，加載的時(shí)候如何dynamic batch也是一個(gè)問題扫茅。如何劃分圖集，如何加載育瓜，成為了一個(gè)需要取舍的點(diǎn)葫隙。
我最終的方案是，分三類資源打包：
1躏仇、最大的部分（主要是角色的身體）單獨(dú)一張圖一個(gè)文件恋脚，存成2的次冪文件，統(tǒng)一放在一個(gè) assetbundle里钙态，運(yùn)行時(shí)按需加載慧起，延遲釋放（比如切場(chǎng)景時(shí)釋放所有臨時(shí)緩存的該類紋理資源）。
2册倒、較大的部分（占面積較大的頭發(fā)蚓挤、物品），根據(jù)類型使用TexturePacker打包圖集驻子，放在assetbundle里灿意，運(yùn)行時(shí)按需加載，延遲釋放
3崇呵、最小的部分（臉部、眼睛域慷、鼻子荒辕、眉毛等）汗销，使用TexturePacker統(tǒng)一打一個(gè)圖集（為了降低drawcall，動(dòng)態(tài)合批）抵窒，啟動(dòng)游戲時(shí)直接加載常駐內(nèi)存弛针。
配置約束語(yǔ)法
這里再提供我們的整體捏臉配置的數(shù)據(jù)結(jié)構(gòu)供大家參考一下
這里template "C"是我們所有的男性捏臉
avata_template節(jié)點(diǎn)下
partnumber標(biāo)志的是各個(gè)部位對(duì)應(yīng)的資源數(shù)量
canhide是指該部位是否可以被隱藏
pivots是各個(gè)部位對(duì)應(yīng)的偏移/旋轉(zhuǎn)的錨點(diǎn)
adjusts是對(duì)應(yīng)我們構(gòu)圖各個(gè)部位的像素微調(diào)配置
底下的子節(jié)點(diǎn)
bind 是指某個(gè)項(xiàng)在某些條件下是否可以被使用
bhair是指在某個(gè)發(fā)型(index)能夠使用的后發(fā)編號(hào)（這里是根據(jù)實(shí)際美術(shù)資源是否協(xié)調(diào)進(jìn)行配置的）
<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=""/>
<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中的顏色混合和調(diào)色板削茁，這里就不細(xì)說了。
結(jié)語(yǔ)
最終我們出的效果還不錯(cuò)掉房，也在標(biāo)準(zhǔn)制定好以后茧跋，通過美術(shù)外包的小伙伴迅速拓展了內(nèi)容量。以下是一些有才玩家的捏臉卓囚，供大家娛樂娛樂~
更多的玩家捏臉可以看這篇taptap的玩家貼
https://www.taptap.com/topic/424730
想自己捏個(gè)臉或者體驗(yàn)一下的話瘾杭，不妨來(lái)試試我們游戲吧！
