作业9-UI系统

一、作业要求

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

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

二、IMGUI实现

建立空对象GameObject，挂载IMGUI.cs代码。代码如下。health变量表示scrollbar的值，初始值设置为1.0，即最大值。在OnGUI函数中，设置“+”“-”按键。点击“+”，health值加0.1，如果加0.1会超过最大值1.0，则将health置为最大值1.0。点击“-”，health值减0.1，如果减0.1会小于最小值0，则将health置为最小值0。将颜色设置为红色，并且设置HorizontalScrollBar。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class IMGUI : MonoBehaviour {
    public float health;
    void Start(){
        health = 1.0f;
    }
    void OnGUI(){
        if (GUI.Button (new Rect(160, 70, 40, 20), "+")) {
            if (health + 0.1f > 1.0f){
                health = 1.0f;
            }
            else{
                health += 0.1f;
            }
        }
        if (GUI.Button (new Rect(80, 70, 40, 20), "-")) {
            if (health - 0.1f < 0.0f){
                health = 0.0f;
            }
            else{
                health -= 0.1f;
            }
        }
        GUI.color = Color.red;
        GUI.HorizontalScrollbar(new Rect(40, 40, 200, 20), 0.0f, health, 0.0f, 1.0f);
    }
}

IMGUI实现的效果图如下，点击“+”号，scrollbar的值增长10%，点击“-”号，scrollbar的值减小10%。

三、UGUI实现

1. 新建Plane。
2. 导入Standard Assets中的ThirdPersonCharacter和相关资源，拖入prefabs中的ThirdPersonController。
3. 在ThirdPersonController下新建Scrollbar，将包含Scrollbar的Canvas的Pos改成（0，2，0），width = 2， height = 1，scale = （0.01，0.01，0.01），RenderMode改为WorldSpace。为了表示是血条，将scrollbar的颜色设置为红色。

此时，效果如下图，可以看出人物头顶有血条，并且会随着人物运动，但是人物转向时，血条也会转变角度，这和我们想要的不一样。

4. 为了使血条一直朝向摄像机，在Canvas上挂载Followcam.cs，代码如下。使Canvas始终面向摄像头，这样血条也能始终朝向摄像机。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class Followcam : MonoBehaviour
{
    // Start is called before the first frame update
    void Start()
    {
        
    }
    // Update is called once per frame
    void Update()
    {
    this.transform.LookAt (Camera.main.transform.position);
    }
}

5. 为了控制人物头上的血条，需要修改IMGUI.cs，加入Scrollbar对象bar2，并将它的value值与health值关联。将人物头上的Scrollbar拖到bar2上，如下图。

修改后的IMGUI.cs如下。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class IMGUI : MonoBehaviour {
    public float health;
    public Scrollbar bar2;
    void Start(){
        health = 1.0f;
    }
    void OnGUI(){
        if (GUI.Button (new Rect(160, 70, 40, 20), "+")) {
            if (health + 0.1f > 1.0f){
                health = 1.0f;
            }
            else{
                health += 0.1f;
            }
        }
        if (GUI.Button (new Rect(80, 70, 40, 20), "-")) {
            if (health - 0.1f < 0.0f){
                health = 0.0f;
            }
            else{
                health -= 0.1f;
            }
        }
        GUI.color = Color.red;
        GUI.HorizontalScrollbar(new Rect(40, 40, 200, 20), 0.0f, health, 0.0f, 1.0f);
        bar2.value = health;
    }
}

挂载后的效果如下图，可以看到无论人物怎么转向，血条都始终朝向摄像机，并且血条的值也可以通过按键控制。

四、IMGUI和UGUI的比较

IMGUI：

主要用于以下场景：

1. 在游戏中创建调试显示工具
2. 为脚本组件创建自定义的 Inspector 面板。
3. 创建新的编辑器窗口和工具来扩展 Unity 环境。

优点：

1. 实现简单。
2. 符合游戏编程的传统。

缺点：

1. 不支持可视化。
2. 难以调试。
3. 效率低下，每次都要重新生成所有组件。
4. 没有状态，配置不够灵活。

UGUI：

优点：

1. 可视化，直观，易于使用。
2. 不需要手动写任何代码，设计师也能参与程序开发。
3. 支持多模式、多摄像机渲染。
4. 具有状态，可以比较方便的修改属性。
5. UI 元素与游戏场景融为一体的交互。
6. 每次生命周期不用重复遍历一次UI组件，效率较高。
7. 面向对象的编程。

缺点：

1. 对不同的功能需要提供不同的canvas，并单独配置。

五、预制的使用方法

1. 将ThirdPersonController下的Canvas拖进Assets文件夹，成为Canvas预制。
2. 需要使用时，将Canvas拖到需要添加血条的对象上即可。

ui项目地址