Cocos Creator 3.0 3D 模型換裝及組合動畫實現(xiàn)方案
>>PIE
引擎選擇
在游戲引擎的選擇上，我們之所以確定使用 Cocos Creator 3.0，主要是因為其以下幾個優(yōu)勢：
2D & 3D 融合：Cocos Creator 3.0 實現(xiàn)游戲 2D 與 3D 能力的融合，在一定程度上已基本滿足 PIE 所需要的 2D UI 及 3D 人物的游戲支持。
開源：Cocos 的一大特征就是開源且免費，既能夠大幅度降低項目初期的試錯成本，也提供給游戲引擎定制的能力。PIE 的實際業(yè)務場景相對比較復雜，因此能夠根據(jù)業(yè)務需求對引擎進行特定的調(diào)整對于技術(shù)團隊而言尤其重要。
良好的生態(tài)：Cocos 的技術(shù)生態(tài)相對來說完善，具備獨立的技術(shù)論壇且活躍度足夠，包括官方文檔、各類博客在內(nèi)的學習資源豐富，開發(fā)者能夠快速入門并實踐。同時官方對于 Cocos 也具備穩(wěn)定的迭代周期，能夠保證引入項目之后的穩(wěn)定性。
3D 模型
目前 Cocos Creator 支持 FBX 和 glTF 兩種格式的模型文件，通過對比，我們選擇了 FBX 模型文件來實現(xiàn)我們的功能。對 FBX 模型的使用方法不太熟悉的同學，可以先移步 Cocos Creator 模型資源官方文檔進行了解，上面介紹得比較詳細。鏈接地址：
http://docs.cocos.com/creator/3.0/manual/zh/asset/mesh.html
FBX 模型結(jié)構(gòu)
FBX 資源文件
包含紋理貼圖、材質(zhì)球、Mesh、骨骼動畫和骨骼信息：
FBX 文件生成的預制體
預制體節(jié)點結(jié)構(gòu)：
節(jié)點的組件結(jié)構(gòu)：
從圖中可以看出來，clothes 節(jié)點中 3D 屬性相關(guān)的組件主要是 cc.SkinnedMeshRenderer，這個組件下有 Materials、Mesh 和 Skeleton 三個組件綁定了文件資源中的貼圖，材質(zhì)球和骨骼信息資源。
問題
在調(diào)研使用 FBX 模型生成的人物進行換裝和播放多個動作時，遇到了如下幾個問題：
只更換節(jié)點下的 Materials 組件，只能達到變換 clothes 顏色的效果，不能更換 clothes 的樣式。
更換 Mesh 組件，會對整個模型的綁定關(guān)系有影響，整個人物的顯示會出現(xiàn)問題。
人物模型在播放第二個動作時，會將第一個動作先停掉，直接開始播放第二個動作，不能同時播放多個動作。
解決方案
思路
最核心的思路就是拆分，本來是用一個模型組成的節(jié)點，拆分成多個模型，每個需要替換的部位都獨立拆分成一個模型，所有部位模型的骨骼信息相同，只保留自身部位的材質(zhì)，然后控制好層級，就能達到和使用一個模型同樣的效果。
>>拆分前
>>拆分后
上面是拆分前和拆分后人物在 Creator 中的節(jié)點結(jié)構(gòu)。
拆分前人物形象只由一個 FBX 文件生成，root 節(jié)點下是各個部位的節(jié)點。
拆分后由一個空節(jié)點 user_famale 作為根節(jié)點，根節(jié)點下的 hair-root，cloth-root，body-root 和 face-root 是拆分后各部位的父節(jié)點的占位節(jié)點，每個父節(jié)點下會添加一個的 FBX 生成的模型節(jié)點，total、hair、cloth、body 和 face 都是由 FBX 模型生成的 prefab 掛載在對應的父節(jié)點上（total-root 也是單獨一個 FBX 生成的預制體，這里保存了這個人物的所有動畫信息）。
由上面兩種方式實現(xiàn)的 3D 人物，展示效果是一致的，具體如下圖：
同一人物下的不同部位使用的 FBX 模型的骨骼信息必須是一樣的，比如上面的人物模型，hair-root，cloth-root，body-root 和 face-root 這幾個部位的對應的模型節(jié)點使用的 FBX 模型，需要使用同樣的骨骼信息。
換裝實現(xiàn)步驟
確定人物結(jié)構(gòu)
按照換裝需求將人物拆分成不同的部位，比如需要換衣服的，則 cloth 分出一個節(jié)點；需要換發(fā)型的，則 hair 分出一個部位，下圖是實現(xiàn)的例子的拆分圖。
關(guān)鍵代碼
實現(xiàn)了一個 Role.ts 腳本組件，綁定在上面所說的 Role 節(jié)點上，以下是換裝主要代碼邏輯 changePart 的實現(xiàn)：
import { _decorator, Component, Node, Prefab, instantiate } from 'cc';
const { ccclass, property } = _decorator;
@ccclass('Role')
export class Role extends Component {
//換裝節(jié)點
@property(Node) totalRoot!: Node
@property(Node) clothRoot!: Node
@property(Node) hairRoot!: Node
@property(Node) faceRoot!: Node
//換裝資源
@property({ type: [Prefab] }) clothPrefabs: Prefab[] = []
@property({ type: [Prefab] }) hairPrefabs: Prefab[] = []
@property({ type: [Prefab] }) facePrefabs: Prefab[] = []
clothIdx = 0
hairIdx = 0
faceIdx = 0
start () {
// [3]
}
changePart(partPrefabs: Prefab[], partName: string, partRoot: Node) {
//更換部件
let partIdx = 0
if (partName === 'cloth') {
this.clothIdx += 1
partIdx = this.clothIdx
}
if (partName === 'hair') {
this.hairIdx += 1
partIdx = this.hairIdx
}
if (partName === 'face') {
this.faceIdx += 1
partIdx = this.faceIdx
}
const partNode = instantiate(partPrefabs[partIdx % partPrefabs.length])
partRoot.removeAllChildren()
partRoot.addChild(partNode)
}
其他
這種拆分的方式能夠支持多個部位同時播放動畫，但本質(zhì)上沒有解決同一個模型不能同時播放兩個動畫的問題，這里是不同部位的模型節(jié)點同時播放動畫。
資源大小分析
這種拆分的方法對資源來說主要是每個部位的模型都需要有一個統(tǒng)一的骨骼信息，但是，如果不拆分，整個 FBX 模型的每個部位也會有自己獨立的骨骼信息，所以拆分的方式和不拆分的方式資源基本一般大。
效果預覽
總結(jié)
開始技術(shù)調(diào)研的時候 Creator 3.0 剛發(fā)布，以為不需要拆分，只需要替換節(jié)點下的材質(zhì)和 Mesh 就能實現(xiàn)換裝，踩了一些坑，再進一步探索后才找到這個方案。
這個方案是開發(fā)同學和設(shè)計同學共同研究探索出來，起初對 Cocos Creator 3D 的能力都不太熟悉，非常感謝設(shè)計同學的幫助。
Creator 3.0 的發(fā)布后，Cocos 對 3D 方面的支持有了巨大的提升，希望 Cocos 在 3D 方面越做越好。
「Cocos Star Meetings」上海站本周六（9月11日）下午14:00即將在上海閔行利豐廣場-2號樓 WeWork 空間1樓會議室正式開始！大城小胖 x 貝塔，攜手樂府互娛夏凱強、夢求游戲魏軍燕、微貍科技夏羊群、以及我們的老朋友 SuperSuRaccoon 將圍繞游戲開發(fā)和 Cocos 引擎使用帶來一系列技術(shù)干貨。活動限額80人，趕快戳【閱讀原文】或掃描下方二維碼報名吧！
往期精彩
