体验地址:Cocos Creator | CustomCharacter
看到Cocos 3.5 居然支持分层动画,我也忍不住做个捏脸游戏,今天时间比较赶,明天会补完
先分析一下需求,一共拆成5类
- 角色五官
- 角色五官位置
- 角色皮肤颜色
- 角色体型
- 角色衣服
通过思维导图进一步做行为归纳
通过归纳把需求拆解成6类
- 骨骼变换,变换骨骼节点位置,scale,角度等(如胸部)
- 贴图变换,改变眼睛,皮肤,衣服等贴图
- 颜色变换,改变肤色
- Mesh变换,改变衣服Mesh
- Morph变换,改变脸部Morph,自定义五官
其中Mesh,贴图,颜色改变都需要走节点的MeshRenderer,这里通过一个预制体统一进行管理
设置为空的时候就不穿衣服或者不设置这项属性,其中可以配置多个需要修改的节点,我们使用节点的path+名字进行查找,查找到的节点通过map保存,方便复用。
public static getNode(path: string, name: string, target: Node) {
if (!path) path = "" let node = this.nodeMap.get(name) if (!node) { node = find(path + name, target) if (node) { this.nodeMap.set(name, node) } else { console.error("Node not found===", name) return null } } return node }
Morph动画处理
Morph动画可以参考Cocos的Demo,通过配置文件获取权重值,做动态调整和保存
骨骼偏移和动态修改
在3.5 版本之前没有层级动画,设置胸部和脸部一些骨骼,会被覆盖点。
首先在3.5版本创建一个动画Mask,把需要参与骨骼变换的胸部,脸部都做一下屏蔽,方便修改骨骼
比如获取胸部节点+父节点Z轴方向的位移,就可以改变胸部大小,眼部大小可以通过morph+scale一起改变
这里使用了inverseTransformPoint这个方法
获取父节点世界坐标加偏移量,再转换到本地坐标
public static morphNode(target: Slider, node: Node, direction: Vec3) {
_tempV1.set(this.getPos(node)); _tempV2.set(direction); Vec3.add(_tempV2, node.parent.worldPosition, _tempV2) node.parent.inverseTransformPoint(_tempV2, _tempV2) Vec3.add(_tempV1, _tempV1, _tempV2.multiplyScalar(target.progress)) node.setPosition(_tempV1) } public static getPos(node: Node): Vec3 { let pos: Vec3 = this.posMap.get(node.name) if (!pos) { pos = node.position; this.posMap.set(node.name, pos.clone()) } return pos; }
to-do
- 继续更新更多设置
- 更新动作和跳舞
- 增加保存和截图功能
- 3.5上线后灰开源项目
- 优雅的按钮事件处理方法
- 小游戏
- 更多交互
to-to-to-to-to-do
- spring bone 弹簧骨骼绑定衣服等
- 神经网格捏脸训练
其他重点是 流程优化+配置简化,明天周末重点更新