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)
这两句代码大家可以忽略，主要是根据角色离摄像机的位置对血条的大小进行缩放，实现近大远小的效果
最后
希望对大家了解Creator3D有所帮助
同时上几个私人小游戏二维码，欢迎大家光顾
