hw9-UI系统

作业要求-血条的预制设计

本次作业是五选一，我选择了【血条(Health Bar)的预制设计】，要求如下：

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

代码和演示视频

• 代码见我的Github
• 演示视频见爱奇艺

实现过程

首先建立一个文件夹Prefab，用于存放预制体。

IMGUI实现

1. 新建一个Emtpy命名为HealthBarIMGUI。
2. 实现血条的增减，用按钮来控制，代码如下：

其中血条用水平滚动条表示，函数原型如下：

public static float HorizontalScrollbar(Rect position, float value, float size, float leftValue, float rightValue);

函数的参数解释如下：

3. 把代码挂载到HealthBarIMGUI上，再拖入Prefab文件夹即可，效果如下：

UGUI实现

构建基本场景

1. 菜单 Assets -> Import Package -> Characters，导入资源
2. 在层次视图，Create -> 3D Object -> Plane，添加 Plane 对象
3. 资源视图展开 Standard Assets :: Charactors :: ThirdPersonCharater :: Prefabs
4. 将 ThirdPersonController 预制拖入场景，改名为 Ethan
5. 设置以下属性

• Plane 的 Transform 的 Position = (0,0,0)
• Ethan 的 Transform 的 Position = (0,0,0)，Rotation = (0,180,0)，使人物正面面对Camera
• Main Camera 的 Transform 的 Position = (0,1,-10)

6. 运行检查效果

给人物加上血条

• 选择 Ethan 用上下文菜单（鼠标右键） -> UI -> Canvas，添加画布子对象
• 选择 Ethan 的 Canvas，用上下文菜单 -> UI -> Slider，添加滑条作为血条子对象
• 选择 Ethan 的 Canvas，在 Inspector 视图
  • 设置 Canvas 组件 Render Mode 为 World Space
  • 设置 Rect Transform 组件的 (PosX, PosY, Width, Height) 为 (0,1.8,160,20)
  • 设置 Rect Transform 组件的 Scale（x, y）为 (0.01,0.01)
• 展开 Slider
  • 选择 Handle Slider Area，禁灰（disable）该元素
  • 选择 Background，禁灰（disable）该元素
  • 选择 Fill Area 的 Fill，修改 Image 组件的 Color 为 红色
• 选择Slider，在 Inspector 视图
  • 设置 Rect Transform 组件的Rotation = (0,180,0)
  • 设置Slider 组件的 MaxValue 为1，value为0
• 运行检查结果，发现人物运动时（用方向键控制），血条会跟着人物旋转，没有面对主摄像机,故需要给 Canvas 添加以下脚本 LookAtCamera.cs，代码如下：
  
• 为了有增减血量动作，在healthbarIMGUI.cs上增加使用UnityEngine.UI。
  添加变量：
  public Slider slider;
  在OnGUI函数中最后添加：
  slider.value = health;
  把Canvas的子对象Slider拖入对象HealthBarIMGUI的healthbarIMGUI.cs组件中的Slider属性，运行，点击按钮就能实现两条血条同时增减血量。
• 把Canvas拖入Prefab文件夹即可,效果如下：
  

两种方法的优缺点

IMUGUI

优点：

• IMGUI 的存在符合游戏编程的传统
• 在修改模型，渲染模型这样的经典游戏循环编程模式中，在渲染阶段之后，绘制 UI 界面无可挑剔
• 这样的编程既避免了 UI 元素保持在屏幕最前端，又有最佳的执行效率，一切控制掌握在程序员手中

缺点：

• 传统代码驱动的 UI 面临效率低下，难以调试等
• 不利于布局，在协调对象之间的位置关系的时候会很麻烦
• 调用OnGUI，每一帧都需要重算布局重新渲染，性能低下

UGUI

优点：

• 所见即所得（WYSIWYG）设计工具，设计师也能参与程序开发
• 支持多模式、多摄像机渲染
• UI 元素与游戏场景融为一体的交互
• 面向对象的编程

缺点：

• 上手比较困难，学习成本比较高

预制的使用方法

1. 直接将HeatlthBarIMGUI预制体拖入场景
2. 按照前面提到的方法导入资源，用预制体生成游戏对象Ethan，构建基本场景
3. 将Canvas预制体拖入到Ethan对象，成为其子对象
4. 将Canvas的子对象Slider拖入HeatlthBarIMGUI对象的healthbarIMGUI.cs组件中的Slider属性
5. 运行后点击增/减血按钮即可实现两种血条的同时增/减血

参考博客

https://blog.youkuaiyun.com/Runner1st/article/details/80582780