全民打枪!在3D模型上的2D血条如何实现?
大家好,我是「杨宗宝」,穿越来到了现代!很高兴你能认识到我,因为我现在不喜欢舞枪弄棒,而痴迷于敲代码,特别是游戏代码!
虽然我参与过触控的“捕鱼打人3”,但好像没什么感觉!唯一有感觉的就是,我上了10多款小游戏!
作者:杨宗宝
排版:张晓衡
在大多数 3D 对战或者打怪游戏中,角色身上的血量条会很直观的显示出生命值,伤害值等信息,让游戏效果更加完美,先上两张简单的效果图:
1
3D角色血量条的实现
从上边的图片可以很清楚的看到,此功能主要分为两部分:
3D角模型
2D血条UI
将这两部分结合起来(说白了就是将 3D 角色坐标转化到 UI 界面上)就实现了这个功能
1. 首先将 3D 角色放到场景中去,可以简单的让其在场景中行走
2. 创建脚本 Monster.ts 将脚本挂载 3D 角色节点上
3. 在脚本的start生命周期中动态创建血条(提前将血条做成一个预制体)
initLifeBarUi(): void {this.lifeBarNode = PoolController.getDictPool(PoolRes.MONSTER_LIFE_BAR_KEY);let monsterLifePanel: Node = find("monsterLifePanel", GameEntity.mGameUI);monsterLifePanel.addChild(this.lifeBarNode);this.lifeBarNode.getComponent(MonsterLifeBar).initLife(this.mLife);this.lifeBarNode.active = false;
}
考虑到了性能,我将血条预制体放在了对象池中,PoolController是自己封装的一个对象池类,通过键值去从对象池中拿。将创建的血条添加到界面上,(在这里本人对血条创建了一个单独的脚本进行血条属性的控制刷新MonsterLifeBar)
4. 实时去刷新进度条的位置
refreshLifeBarUi(): void {if (!this.lifeBarNode) return;let _v3_0: Vec3 = new Vec3(0, 0, 0);this.lifeBarParentNode.getWorldPosition(_v3_0);GameEntity.mCamera.getComponent(CameraComponent).convertToUINode(_v3_0, this.lifeBarNode.parent, _v3_0);this.lifeBarNode.setPosition(_v3_0);let distance: any = Math.sqrt(Math.pow(this.node.position.x, 2) + Math.pow(this.node.position.z, 2));this.lifeBarNode.getComponent(MonsterLifeBar).refresh(distance)}
主要代码就是下面三行,将 3D 坐标转换到 2D 下:
let _v3_0: Vec3 = new Vec3(0, 0, 0);
this.lifeBarParentNode.getWorldPosition(_v3_0);
GameEntity.mCamera.getComponent(CameraComponent).convertToUINode(_v3_0, this.lifeBarNode.parent, _v3_0);
this.lifeBarParentNode—这个节点是 3D 角色节点下创建的一个用来与血条对应的空节点,位置是在默认角色头部偏高一点的位置,为了防止血条和模型重叠。GameEntity.mCamera—摄像机节点。
大家也可以直接使用this.node.getWorldPosition(_v3_0),然后再this.lifeBarNode.setPosition(_v3_0)设置血条坐标的时候,对y轴的坐标适当的向上调整来避免模型个血条重叠。
let distance: any = Math.sqrt(Math.pow(this.node.position.x, 2) + Math.pow(this.node.position.z, 2));
this.lifeBarNode.getComponent(MonsterLifeBar).refresh(distance)
这两句代码大家可以忽略,主要是根据角色离摄像机的位置对血条的大小进行缩放,实现近大远小的效果
3
最后
希望对大家了解 Cocos Creator3D 有所帮助,同时在此推荐几个私人小游戏二维码,欢迎大家光顾:
其中的《躲一躲》与《机智三角》已经上架张哥微店(阅读原文):
https://weidian.com/item.html?itemID=3766874060
https://weidian.com/item.html?itemID=3755120093
后面我将会分享更多 Cocos Creator 3D 相关项目经验,感谢大家多多支持!
全民打枪!在3D模型上的2D血条如何实现?相关推荐
- 基于ThreeJS实现3D模型上的室内灯光效果模拟
基于ThreeJS实现3D模型上的室内灯光效果模拟 示例描述与操作指南 示例效果展示 实现步骤 示例描述与操作指南 当前示例用于展示室内灯光的多角度光影效果. 示例效果展示 实现步骤 第一步 创建聚光 ...
- 如何在3D模型上实现太阳光照模拟?
如何在3D模型上实现太阳光照模拟? 示例描述与操作指南 示例效果展示 实现步骤 示例描述与操作指南 当前示例用于模拟太阳光照效果. 示例效果展示 实现步骤 第一步 添加屏幕炫光 /*** @descr ...
- Unity 2D血条制作方式
博主在前两篇博客中写了关于分段式血条和多层血条的实现方式,但是基于一下初学者的考虑,还是决定把2D的血条制作方式也是贴出来,方便大家进行学习和使用. 第一步:我们创建一个Slider,把图片和背景修改 ...
- ResNet也能用在3D模型上了,清华「计图」团队新研究已开源
鱼羊 发自 凹非寺 量子位 报道 | 公众号 QbitAI 用AI处理二维图像,离不开卷积神经网络(CNN)这个地基. 不过,面对三维模型,CNN就没有那么得劲了. 主要原因是,3D模型通常采用网格数 ...
- 清华大学胡事民是计算机视觉,ResNet也能用在3D模型上了,清华「计图」团队新研究已开源...
鱼羊 发自 凹非寺 量子位 报道 | 公众号 QbitAI 用AI处理二维图像,离不开卷积神经网络(CNN)这个地基. 不过,面对三维模型,CNN就没有那么得劲了. 主要原因是,3D模型通常采用网格数 ...
- 清华大学胡事民是计算机视觉,ResNet也能用在3D模型上了,清华“计图”团队新研究已开源...
鱼羊 发自 凹非寺 量子位 报道 | 公众号 QbitAI 用AI处理二维图像,离不开卷积神经网络(CNN)这个地基. 不过,面对三维模型,CNN就没有那么得劲了. 主要原因是,3D模型通常采用网格数 ...
- 自己做的3D模型上传成功以后要多久才可以在thingjs中使用呢?
看客户端"DIY模型库-已上传的模型"目录,显示"转换完成"差不多就可以了 具体时间和您模型复杂度.平台模型服务繁忙程度相关 @Black 这种情况,弹窗纯用代 ...
- 在3D模型上选择顶点
gluPickMatrix:http://blog.csdn.net/augusdi/article/details/7282336 void gluPickMatrix(GLdouble x,GLd ...
- BundleTrack:无需实例或类级别3D模型的6D姿态跟踪算法(IROS2021)
点击上方"3D视觉工坊",选择"星标" 干货第一时间送达 作者丨paopaoslam 来源丨泡泡机器人SLAM 标题:BundleTrack: 6D Pose ...
最新文章
- 独家 | 决策树VS随机森林——应该使用哪种算法?(附代码链接)
- iOS编程上获取本地时间以及星期几时间
- 一段关于中国人口老龄化的评论
- SWF 学习笔记 ——《如何在内存中提取出加密的SWF》
- 【ubutun22.04】mac修改与吉林大学校园网链接
- 全球科学家公认的高效学习法——费曼学习法
- java雪崩_java-雪崩效应及解决办法
- Hibernate报错org.hibernate.MappingException: Unknown entity解决方法
- RL gym 环境(2)—— 自定义环境
- HRBU 2021年暑期训练阶段二Day3
- 不礼让行人怎么抓拍的_斑马线前不礼让行人抓拍处罚,到底怎么才算
- P2655 2038年问题
- ClickHouse和他的朋友们(5)存储引擎技术进化与MergeTree
- deo.php viewkey,新编粤语读音字典 - 粤语 | Cantonese | 白话 - 声同小语种论坛 - Powered by phpwind...
- 遇到bug的解决办法,测试再也不背锅了
- python web开发屠龙刀flask
- c#加入json库引用,添加JSON包引用;新到Java
- 华为员工自杀事件有感
- golang GF框架
- MSN 8.1 优化
热门文章
- 百-寒-进-15-D-小石子游戏
- dos系统下Python换行方法
- C/C++程序的断点调试 - Microsoft Visual Studio
- Android Tencent X5 WebView 集成封装
- 对于香农采样定律的简短理解
- 在php中line的意思,CAD如何使用XLINE命令,cad中xline是什么意思
- 利用ENVI、Maxent等软件分析制作生态环评中所需各种图件
- linux端口隔离,华为MA5626 取消端口隔离
- 达芬奇五年沉浮—嵌入式处理器架构之争决战2012
- python机器学习——支持向量机回归与波士顿房价案例