基于CocosCreator3.0的3D换装

无论是 2D 或是 3D 游戏，换装类都是比较受欢迎的游戏，也是游戏开发者经常需要面对的开发需求。

本文主要介绍 3D 换装需求，关于 2D 换装（Spine 或龙骨）后续会向大家介绍。

本周六羽毛先生也将出席Cocos Star Meetings 广州站，为大家带来《3D 项目经验分享》，欢迎大家到现场一起快乐交流玩耍~

需求

从换装的方式分类，可以分为整体换装以及局部换装。整体换装较为简单，我们就不做讨论，本文主要介绍一下局部换装（其实理解过后也是非常的简单）。

从换装的模型分类， 主要分为两种类型：

一种类型是对于静态模型的换装，就是直接将身体需要换的 Mesh 更新即可。

另一种类型是动态模型的换装（有动作的模型）。

本文主要介绍动态模型的换装实现。

效果展示

（素材仅用于学习交流）

原理介绍

在开始描述换装前，首先要具备骨骼动画的知识。

如果对骨骼动画的原理不熟悉，换装是比较难以理解的。换装的核心其实并不在换上，而是要理解为什么能换，而这些都和骨骼动画密不可分。

骨骼动画的组成：

图 1（引用于 Shader 实验室）

网格（Mesh）：

模型（Model）是由一个个三角形组成的，而这种三角形的学名则是网格（Mesh）

网格蒙皮数据（Skin Info）

顶点的 Skin 数据包括顶点受哪些骨骼影响以及这些骨骼影响该顶点时的权重（Weight），另外对于每块骨骼还需要骨骼偏移矩阵（BoneOffsetMatrix）用来将顶点从Mesh空间变换到骨骼空间。可简单理解为：SkinMesh = Mesh+Skin Info

骨骼（Skeleton）:

如图 1，骨架由一系列具有层次关系的关节（骨骼）和关节链组成，是一种树结构，选择其中一个是根关节，其它关节是根关节的子孙，可以通过平移和旋转根关节移动，并确定整个骨架在世界空间中的位置和方向。

骨骼的动画（关键帧）数据

骨骼动画是通过关键帧驱动骨骼运动，随之依次调整每块骨头的朝向和坐标，骨头再带动顶点运动，蒙皮信息描述了每个顶点受哪些骨头的影响，以及他们的权重，这样骨骼动画就实现了运动以及形变。

实现思路

导入模型进入 Creator，可发现节点下含有 SkinnedMeshRenderer 组件，其中含有 Mesh 属性，按照我的理解这里的 Mesh 特指 SkinMesh = Mesh+Skin Info，而非普通的静态 Mesh。

动态模型换装需要更新 SkinnedMeshRenderer 组件的中 SkinMesh，Skeleton（骨骼资源）， SkinningRoot（骨骼根节点的引用——控制此模型的动画组件所在节点）。

本案例中采取直接更换蒙皮网格渲染器组件（SkinnedMeshRenderer）的方式实现换装。

实现步骤

骨骼动画及部位装备 Prefab 的制作,核心——共享一套骨骼。动画师制作时，同一部位的不同装备绑定同一根骨骼，整体输出，在 Creator 中将各部件装备制作为 Prefab 后从主角删除，主角只保留一套默认装备。

主角节点需要关闭预烘焙功能，否则无法实时运算以实现换装功能。

初始化模型。建立 Map，这一步是为了后续替换装备时可以检索到对应部位的节点。

替换装备节点：

删除旧装备节点。检索 Map，根据部位 key-PartName 获得 OldNode 引用，移除 OldNode（保留骨骼根节点引用 SkinningRoot，后续备用）。

增加新装备节点，加载部位 A 新装备 Prefab 并实例化为 NewNode，添加 NewNode。

刷新部位 key-PartName 的 value 值为 NewNode。

刷新骨骼，取得步骤 1 中的 SkinningRoot 来刷新 NewNode 的 SkinningRoot，完成（我实现到这步，后续步骤为了节省性能大家可以研究）。

合并 Mesh。

合并贴图（贴图的宽高最好是 2 的 N 次方的值）。

重新计算 UV。

核心代码

import { _decorator, Component, Node, resources, Prefab, instantiate, SkinnedMeshRenderer, EventTouch, SkeletalAnimation } from 'cc';

const { ccclass, property } = _decorator;

@ccclass('ChangeCloth')

export class ChangeCloth extends Component {

@property({

type: Node

})

modelNode!: Node;

sex: string = "male";

bodyPart: string[] = ["hair", "top", "pants", "shoes"];

data: Map = new Map();

start() {

this.initAllData();

}

initAllData() {

this.data.clear();

for (let i = ; i

let partName = this.bodyPart[i];

let nodeName = `${this.sex}_$-1`;

let nodePart = this.modelNode.getChildByName(nodeName);

if (nodePart) {

console.debug("init part", nodeName);

this.data.set(partName, nodePart);

}

}

}

changeCloth(partName: string, index: number) {

resources.load(`prefab/${this.sex}_$-$`, Prefab, (err, prefab) => {

if (err) {

console.debug(err);

return;

}

let oldNode = this.data.get(partName);

let oldModel = oldNode?.getComponent(SkinnedMeshRenderer);

let newNode = instantiate(prefab);

let newModel = newNode.getComponent(SkinnedMeshRenderer);

if (oldModel?.skinningRoot && newModel) {

newModel.skinningRoot = oldModel?.skinningRoot;

oldNode?.removeFromParent();

this.modelNode.addChild(newNode);

this.data.set(partName, newNode);

}

})

}

onClickChange(touch: EventTouch, data: string) {

console.debug("onClickChange", data);

let params = data.split("-");

this.changeCloth(params[], parseInt(params[1]));

}

onClickAnimation(touch: EventTouch, animationName: string) {

console.debug("onClickAnimation", animationName);

this.modelNode.getComponent(SkeletalAnimation)!.play(animationName);

}

update(deltaTime: number) {

// [4]

}

}

小结

换装的核心是要理解为什么能换，理解了骨骼动画的原理以及构成，一旦弄清“为什么”？，换装的实现就会是非常简单的一件事了。

如果羽毛的理解存在错误，欢迎回复进行指导。

原标题：基于CocosCreator3.0的3D换装