全民打枪！在3D模型上的2D血条如何实现？-技术圈

大家好，我是「杨宗宝」，穿越来到了现代！很高兴你能认识到我，因为我现在不喜欢舞枪弄棒，而痴迷于敲代码，特别是游戏代码！

虽然我参与过触控的“捕鱼打人3”，但好像没什么感觉！唯一有感觉的就是，我上了10多款小游戏！

作者：杨宗宝
排版：张晓衡

在大多数 3D 对战或者打怪游戏中，角色身上的血量条会很直观的显示出生命值，伤害值等信息，让游戏效果更加完美，先上两张简单的效果图：

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)

这两句代码大家可以忽略，主要是根据角色离摄像机的位置对血条的大小进行缩放，实现近大远小的效果

最后

希望对大家了解 Cocos Creator3D 有所帮助，同时在此推荐几个私人小游戏二维码，欢迎大家光顾：

其中的《躲一躲》与《机智三角》已经上架张哥微店（阅读原文）：

https://weidian.com/item.html?itemID=3766874060
https://weidian.com/item.html?itemID=3755120093

后面我将会分享更多 Cocos Creator 3D 相关项目经验，感谢大家多多支持！