全民打枪！在3D模型上的2D血条如何实现？
全民打枪！在3D模型上的2D血条如何实现？
作者：杨宗宝 排版：张晓衡
在大多数 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)这两句代码大家可以忽略，主要是根据角色离摄像机的位置对血条的大小进行缩放，实现近大远小的效果
本文分享自 Creator星球游戏开发社区 微信公众号，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文参与 腾讯云自媒体分享计划 ，欢迎热爱写作的你一起参与！