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

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

在大多数 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)

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