作者:杨宗宝 排版:张晓衡
在大多数 3D 对战或者打怪游戏中,角色身上的血量条会很直观的显示出生命值,伤害值等信息,让游戏效果更加完美,先上两张简单的效果图:
1
3D角色血量条的实现
从上边的图片可以很清楚的看到,此功能主要分为两部分:
将这两部分结合起来(说白了就是将 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 删除。
本文参与 腾讯云自媒体同步曝光计划 ,欢迎热爱写作的你一起参与!