基于 Creator 3.0 的 3D 换装
需求
无论是2d或是3d游戏,换装都是比较受欢迎的游戏体验,也是游戏开发者经常需要面对的开发需求,本文主要介绍3D换装需求,关于2d换装(spine或龙骨)后续会向大家介绍。
从换装的方式分类,可以分为整体换装以及局部换装,整体换装较为简单,我们就不做讨论,本文主要介绍一下局部换装(其实理解过后也是非常的简单)。
从换装的模型分类, 主要分为两种类型:
一种类型是对于静态模型的换装,就是直接将身体需要换的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<key-PartName, value-Node>,这一步是为了后续替换装备时可以检索到对应部位的节点
替换装备节点:
删除旧装备节点。检索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<string, Node> = new Map();start() {this.initAllData();}initAllData() {this.data.clear();for (let i = 0; i < this.bodyPart.length; i++) {let partName = this.bodyPart[i];let nodeName = `${this.sex}_${partName}-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}_${partName}-${index}`, 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[0], parseInt(params[1]));}onClickAnimation(touch: EventTouch, animationName: string) {console.debug("onClickAnimation", animationName);this.modelNode.getComponent(SkeletalAnimation)!.play(animationName);}update(deltaTime: number) {// [4]} }
小结
换装的核心是要理解为什么能换,理解了骨骼动画的原理以及构成,一旦弄清”为什么“?,换装的实现就会是非常简单的一件事了。
如果羽毛的理解存在错误,欢迎回复进行指导。
更多
快速实现3d抛物线绘制
奇形怪状-不规则按钮实现
今日技能你学废了吗?关注公众号回复“换装”获取源码
基于 Creator 3.0 的 3D 换装相关推荐
- 浅谈游戏中的2D/3D换装
骨骼动画 换装一直是游戏系统中不可或缺的部分,尤其是在RPG游戏中,如暗黑破坏神,冒险岛,DNF等,早期PC上的2D游戏上采用的比较多的是帧动画,手游兴起后,骨骼动画因储存空间和内存占用小,更平滑等优 ...
- unity 3d换装之 SkinMeshRenderer
http://www.cnblogs.com/shamoyuu/p/6505561.html 关注公众号 风色年代(itfantasycc) 200G Unity资料合集送上~ 一.换装原理 游戏角色 ...
- Cocos Creator 的 web/原生多平台 Spine 换装方案解析,附 Demo 源码
引言:Spine 换装是游戏开发中的一种常见实现方案,本次,羽毛先生将介绍自己对整体换装和局部换装实现方案的探索与选择. 运行环境 Cocos Creator 3.5.2 web/native 需求 ...
- 3D游戏中角色的换装原理-落樱之剑实例图文详细剖析(JME3,JMonkeyEngine游戏开发)...
**************************************************************************************************** ...
- 3D游戏中角色的换装原理-落樱之剑实例图文详细剖析(JMonkeyEngine游戏开发)
前言 本文将详细讲解3D游戏中换装的原理及换装中的一些重点问题,先粗略看一下换装的简单原理: 没错,看起来很简单吧!!! 那么接下来,开始讲复杂的地方! 在阅读本文之前如果你能够了解或知道以下一些基础 ...
- Cocos Creator 3.0 入门 ! 2D 素材 3D 效果!
用 2D 素材实现 3D 效果! 前言 好久没写教程笔记了,不知大伙是否想念教程干货了? 温馨提示:所有内容纯属个人瞎玩研究,如要上线项目,请自行评估~ oh 最近逛论坛,看到有一位小伙伴想实现下面这 ...
- Blender建模与游戏换装(转载文)
本文转载自https://my.oschina.net/huliqing/blog/880113?hmsr=toutiao.io 如果本文涉及侵权行为,请原作者联系博主邮箱,我将及时进行删除处理 博主 ...
- Unity体感设备KinectV2虚拟换装解决方案
准备工作 Unity创建一个新工程(我使用的是2020.3.25),KinectFouUnity插件版本:Kinect v2 Examples with MS-SDK 2.13,Kinect插件示例3 ...
- 麒麟子Cocos Creator 3D研究笔记三:角色换装(无动画)
零.效果展示 先来两张图 在线演示地址: https://showcase.ukylin.net/avatar/ 3D换装有两种情况,一种是身体各部件(如头发.上衣.裤子.手套.鞋子等身体各部分),另 ...
- 基于图像的虚拟换装:Morphing architectures for pose-based image generation of people in clothing
项目的重点是变形操作的特征化与实现,解决卷积神经网络中的信息失准问题.我们将所研究的方法应用到一个换衣服的任务中,将其建模为一个条件图像生成问题.尽管对抗性方法在生成性任务中很流行,但我们将此项目的范 ...
最新文章
- Codeforces Round #319 (Div. 1) B. Invariance of Tree 构造
- SAP UI5 应用开发教程之二十八 - SAP UI5 应用的集成测试工具 OPA 介绍
- Java程序创建Kafka Topic,以及数据生产消费,常用的命令
- 【hdu3294】Girls' research
- bash shell 快捷键
- 数组不能将数值传给int_[day day go]数组
- 防止sql拼接的Java方法_JAVA程序防止SQL注入的方法
- 计算机辅助设计排版,计算机辅助设计
- 基于Binder机制之AIDL原理分析
- PRD文档范例,千万收藏的产品经理写作手册
- Windows10 pycharm 前进后退快捷键配置
- 善网ESG报告(第十期)
- 毕设论文中第一章的图注出现“图一.1”,转化为“图1.1”的方法
- win7计算机二进制,二进制-系统爱好者
- PR中直接打开AE去做特效方法?
- 【百度点石(WSDM)】 Retention Rate of Baidu Hao Kan APP Users 小白经验分享
- 百度云加速提升网站访问速度
- HTML5 是对 HTML 标准的第五次修订
- 2017中国智能商用车国际峰会
- Java 集合系列3、骨骼惊奇之LinkedList