Creator3D:3D模型上的2D血条实现分享

作者：玻璃小屋

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

下边简单写一下3D角色血量条的实现

从上边的图片可以很清除的看到，此功能主要分为两部分。1.3d角色，2.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下

this.lifeBarParentNode-----这个节点是3d角色节点下创建的一个用来与血条对应的空节点，位置是在默认角色头部偏高一点的位置，为了防止血条和模型重叠。
GameEntity.mCamera–摄像机节点

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.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)

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

微信公众号：搬砖小菜鸟

5.推荐