血条（Health Bar）的预制设计

您所在的位置：网站首页 › cocos3d角色添加血条预制体 › 血条（Health Bar）的预制设计

血条（Health Bar）的预制设计

#血条（Health Bar）的预制设计| 来源: 网络整理| 查看: 265

血条（Health Bar）的预制设计前言

这是中山大学数据科学与计算机学院2019年3D游戏编程与设计的第九次作业所有项目与代码已上传至github当中，欢迎大家访问。 github个人主页: https://starashzero.github.io 3D游戏编程与设计主页: https://starashzero.github.io/3DGameDesign 本次作业项目地址: https://github.com/StarashZero/3DGameDesign/tree/master/hw9

项目要求

参考潘老师博客血条（Health Bar）的预制设计。具体要求如下

分别使用 IMGUI 和 UGUI 实现使用 UGUI，血条是游戏对象的一个子元素，任何时候需要面对主摄像机分析两种实现的优缺点给出预制的使用方法 IMGUI实现

IMGUI比较简单，使用GUI.HorizontalScrollbar来实现，其他要做的只是计算出HorizontalScrollbar的位置和大小

//初步计算血条位置 Vector3 worldPos = new Vector3(transform.position.x, transform.position.y -0.2f, transform.position.z); Vector3 screenPos = Camera.main.WorldToScreenPoint(worldPos);

因为IMGUI不会随着物体移动，HorizontalScrollbar大小自然也不会随着远近变化，我简单计算人物与摄像机的距离，随着距离增大减少这里只是简单模拟，所以设计的公式是 1 1 + d i s t a n c e \frac{1}{1+distance} 1+distance1

//计算血条大小比例 float distance = (transform.position.z - Camera.main.transform.position.z - 10); float newScale = (distance //初步计算血条位置 Vector3 worldPos = new Vector3(transform.position.x, transform.position.y -0.2f, transform.position.z); Vector3 screenPos = Camera.main.WorldToScreenPoint(worldPos); //计算血条大小比例 float distance = (transform.position.z - Camera.main.transform.position.z - 10); float newScale = (distance Import Package -> Characters 导入资源在层次视图，Context 菜单 -> 3D Object -> Plane 添加 Plane 对象资源视图展开 Standard Assets :: Charactors :: ThirdPersonCharater :: Prefab将 ThirdPersonController 预制拖放放入场景，改名为 Ethan检查以下属性 Plane 的 Transform 的 Position = (0,0,0)Ethan 的 Transform 的 Position = (0,0,0)Main Camera 的 Transform 的 Position = (0,1,-10) 运行检查效果选择 Ethan 用上下文菜单 -> UI -> Canvas, 添加画布子对象选择 Ethan 的 Canvas，用上下文菜单 -> UI -> Slider 添加滑条作为血条子对象运行检查效果选择 Ethan 的 Canvas，在 Inspector 视图设置 Canvas 组件 Render Mode 为 World Space设置 Rect Transform 组件 (PosX，PosY，Width， Height) 为 (0,2,160,20)设置 Rect Transform 组件 Scale （x,y）为 (0.01,0.01) 运行检查效果，应该是头顶 Slider 的 Ethan，用键盘移动 Ethan，观察展开 Slider 选择 Handle Slider Area，禁灰（disable）该元素选择 Background，禁灰（disable）该元素选择 Fill Area 的 Fill，修改 Image 组件的 Color 为红色选择 Slider 的 Slider 组件设置 MaxValue 为 100设置 Value 为 75

给 Canvas 添加以下脚本 LookAtCamera.cs

using UnityEngine; public class LookAtCamera : MonoBehaviour { void Update () { this.transform.LookAt (Camera.main.transform.position); } } UGUI Srceen Space - Overlay实现

如果只用UGUI World Place实现我感觉这次作业不像是我做的，而是直接跟着做，所以就试着做了一个UGUI Srceen Space - Overlay版本，其实这个版本和IMGUI很像，也算是将它当作IMGUI来做，但是现在血条是一个对象预制体制作与UGUI World Place一致首先计算血条位置

//计算healthBar位置 Vector3 worldPos = new Vector3(transform.position.x, transform.position.y + 1.8f, transform.position.z); Vector3 screenPos = Camera.main.WorldToScreenPoint(worldPos); healthBar.transform.position = new Vector3(screenPos.x, screenPos.y, screenPos.z);

然后计算血条比例，任然使用 1 1 + d i s t a n c e \frac{1}{1+distance} 1+distance1

//计算scale比例 float distance = (transform.position.z - Camera.main.transform.position.z - 10); float newScale = (distance healthBar = GetComponentInChildren(); } void Update() { //计算healthBar位置 Vector3 worldPos = new Vector3(transform.position.x, transform.position.y + 1.8f, transform.position.z); Vector3 screenPos = Camera.main.WorldToScreenPoint(worldPos); healthBar.transform.position = new Vector3(screenPos.x, screenPos.y, screenPos.z); //计算scale比例 float distance = (transform.position.z - Camera.main.transform.position.z - 10); float newScale = (distance

【本文地址】

血条（Health Bar）的预制设计

血条（Health Bar）的预制设计

今日新闻

推荐新闻