使用IMGUI和UGUI实现人物血条

分别是用IMGUI和UGUI实现人物血条

血条（Health Bar）的预制设计。具体要求如下：

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

先用传统的IMGUI的方式来实现一个简单的任务血条，再用最新的UGUI来实现一个人物血条

GUI方式实现血条

废话不多说直接上代码

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class IMGUIxuetiao : MonoBehaviour {
    public Slider slider;
    private Rect healthPos; //血条的位置
    private Rect addPos; // 加血按钮的位置
    private Rect subPos; //减血按钮的位置
    private float health = 0.0f; //生命值
    private float temp; //一个临时变量
    // Use this for initialization
    void Start () {

        addPos = new Rect(0, 0, 50, 25);
        subPos = new Rect(50, 0, 50, 25);
    }

    // Update is called once per frame
    void Update () {

    }
    private void OnGUI()
    {
        if (GUI.Button(addPos, "加血"))
        {
            temp = health + 0.1f > 1.0f ? 1.0f : health + 0.1f;
        } else if (GUI.Button(subPos, "减血"))
        {
            temp = health - 0.1f < 0 ? 0.0f: health - 0.1f;
        }
        healthPos = new Rect(Screen.width / 2 - 50, 0, 100, 50);
        health = Mathf.Lerp(health, temp, 0.05f);
        GUI.HorizontalScrollbar(healthPos, 0, health, 0, 1);
    }
}

为了让血条能平滑的增加或减少，不出现突变效果，使用Mathr.Lerp函数插值来计算新的health.

新建一个空对象，将脚本挂载在上面, 点击运行，得到如下效果

使用UGUI实现

为了让我们的血条更接近实际效果，我们让我们的血条跟随角色移动。
为了让血条能跟角色移动，我们要把血条作为角色的一个子对象。

1. 首先我们先导入游戏角色: 菜单 Assets -> Import Package -> Characters，导入资源
2. 然后将游戏对象放入场景中: Assets -> Standard Assets :: Charactors :: ThirdPersonCharater :: Prefab:, 将 ThirdPersonController 预制拖入场景，改名为 Ethan
   
3. 在场景中新建一个plane对象
4. 检查以下属性
   * Plane 的 Transform 的 Position = (0,0,0)
   * Ethan 的 Transform 的 Position = (0,0,0)，Rotation = (0,180,0)
   * Main Camera 的 Transform 的 Position = (0,1,-10)
   * 运行检查效果

现在完成了任务的导入，接下来就是给任务添加血条了

1. 选择 Ethan 用上下文菜单（鼠标右键） -> UI -> Canvas，添加画布子对象
2. 选择 Ethan 的 Canvas，用上下文菜单 -> UI -> Slider，添加滑条作为血条子对象
3. 选择 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)
     
4. 展开 Slider
   
   • 选择 Handle Slider Area，禁灰（disable）该元素
   • 选择 Background，禁灰（disable）该元素
   • 选择 Fill Area 的 Fill，修改 Image 组件的 Color 为 红色
5. 选择Slider，在 Inspector 视图
   
   • 设置 Rect Transform 组件的Rotation = (0,180,0)
   • 设置Slider 组件的 MaxValue 为 1
     
     运行检查结果，我们会发现血条会跟着任务移动，但任务旋转时血条也会跟着旋转，这显然不是我们想要，所以我们需要给我们的canvas添加一个脚本，让canvas能始终对准我们的相机

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class LookAtMamera : MonoBehaviour {

    // Use this for initialization
    void Start () {

    }

    // Update is called once per frame
    void Update () {
        this.transform.LookAt(Camera.main.transform.position);
    }
}

重新运行，我们会发现血条会时钟对着相机

接下来我们我让人物的血条能随着我们的按钮的按下而增加而减少
在OnGUI的脚本中添加一个Silder实例

 public Slider slider;

在OnGUI函数中添加这一行代码

slider.value = health;

运行，点击加血减血按钮，我们就会发现人物的血条会随着我们的点击而增加或减少

两种实现的优缺点

IMGUI的优缺点

• 优点：
  
  • IMGUI 的存在符合游戏编程的传统
  • 在修改模型，渲染模型这样的经典游戏循环编程模式中，在渲染阶段之后，绘制 UI 界面无可挑剔
  • 这样的编程既避免了 UI 元素保持在屏幕最前端，又有最佳的执行效率，一切控制掌握在程序员手中
• 缺点：
  
  • 传统代码驱动的 UI 面临效率低下
  • 难以调试等
• 按 Unity 官方说法，IMGUI 主要用于以下场景：
  
  • 在游戏中创建调试显示工具
  • 为脚本组件创建自定义的 Inspector 面板。
  • 创建新的编辑器窗口和工具来扩展 Unity 环境。

IMGUI系统通常不打算用于玩家可能使用并与之交互的普通游戏内用户界面。为此，应该使用 Unity 的基于 GameObject 的 UGUI 系统。

UGUI

优点

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

预制的使用方法

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