【Unity3D】血条（Health Bar）

作业要求

---

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

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

实验内容

---

IMGUI制作简单血条

通过代码实现：

public class IMGUIhealth : MonoBehaviour
{
    public float value;
    public float pos;
    private float tmp;

    private void OnGUI()
    {
        if (GUI.Button(new Rect(450, 50, 40, 40), "+"))
        {
            tmp += 5;
            if (tmp > 100)
                tmp = 100;
        }

        if (GUI.Button(new Rect(100, 50, 40, 40), "-"))
        {
            tmp -= 5;
            if (tmp < 0)
                tmp = 0;
        }

        value = Mathf.Lerp(value, tmp, 0.05f);

        GUI.color = Color.red;
        GUI.HorizontalScrollbar(new Rect(200, 50, 200, 20), pos, value, 0, 100);
    }
}

含有三部分：两个Button负责加减血量，一个水平滚动条负责显示血量。

HorizontalScrollbar

UGUI设计血条预制

1. 创建一个Canvas对象作为UGUI控件的一个载体，并且取名为HealthBar。
2. 在这个载体里面添加一个Slider.对象结构如下:
   
3. 设置 Canvas 组件的参数：
   
4. 由于我们不需要拖动Slider，所以把Handle Slide Area禁用掉
   
5. 更改fill的属性值，在Image的部件中找到color一项，改变它的颜色：
   
6. 改变Slider的属性：
   设置 MaxValue 为 100，设置 Value 为 60 ，效果如下：
   
7. 自动脚本：
   控制血条自动增加减少，同时添加随血量大小修改血条颜色的逻辑。

    public Slider slider;
    float factor = 0.1f;
    public bool active = true;
    private int turn = 1;
    
    private void Start(){ }
    
    void change() {
        if (turn == 1)
            slider.value -= 1f;
        else 
            slider.value += 1f;
        if (slider.value <= 0) {
            slider.value = 0;
            turn = 2;
        }
        if (slider.value >= 100) {
            slider.value = 100;
            turn = 1;
        }
    }
    void Update () {
		this.transform.LookAt (Camera.main.transform.position);
        if (active)
            change();
        Color current = slider.fillRect.transform.GetComponent<Image>().color;
        if (slider.value <= 60) {
            slider.fillRect.transform.GetComponent<Image>().color = Color.Lerp(current, Color.red, factor);
        }
        else {
            slider.fillRect.transform.GetComponent<Image>().color = Color.Lerp(current, Color.green, factor);
        }
	}

将脚本拖到Heath的画布上面去，将Slider拖入脚本的slider变量中去，完成脚本与Slider的绑定。

目前效果：


血条和之前的方向相反了，也就是说左右反了。

因为实际上创建Slider时，他的Z轴是朝向正方向的，也就是说他的正方向恰好的背对着摄像头，这时候我们看到的效果才是正常的，但是如果设置了LookatCamera，那么就会出现了相反的效果，这时候我们可以通过设置他的方向来调整：

实验效果

两种制作的优缺点

IMGUI：主要是用来设置开始游戏和结束游戏的界面。实现方法是在onGUI函数中添加相应的控件（Label、Button等）,也就是说每次都调用onGUI都会刷新一次所有控件。

UGUI：主要设计可以通过鼠标拖拽、设置属性等方式，在二维平面上完成UI设计，即时能够看到效果。换句话说可以不通过代码就能实现一定的UI效果。

1. IMGUI优缺点分析

优点：

• 编程实现，符合游戏编程的传统。
• 避免了 UI 元素保持在屏幕最前端，又有最佳的执行效率，一切控制掌握在程序员手中。对于简单UI的制作十分有好处。
• 对新手友好，入门容易，同时帮助理解游戏引擎渲染的调用函数

缺点

• 效率低下，难以调试
• 无法直观看到UI布局情况，需要使用代码一点一点更改位置
• 渲染在屏幕最前端，所以简单的实现只能够用于初始界面、结束界面等的设计，如果想要映射到游戏场景中去，还需要实现更加复杂的大小、位置映射关系，非常麻烦

按 Unity 官方说法，IMGUI主要用于以下场景：

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

2. UGUI优缺点分析

优点：

• UGUI出现了锚点的概念，更方便屏幕自适应。
• 所见即所得，设计师也能参与程序开发
• UI 元素与游戏场景融为一体的交互，支持复杂的布局，功能更加强大！
• 面向对象的编程，每个控件都是一个对象，通过对其加减Component或者改变属性可以实现不同的效果。

缺点

• 使用困难，许多设计技巧和方法都需要查阅大量资料去学习

IMGUI不是我们想象中的与用户交互的UI，UGUI更像我们玩游戏的时候见到的UI。

预制使用方法

1. 新建一个对象，然后从预制文件夹中找到对应的预制Health，将其拖到一个物体上，使其成为该物体的子对象。
2. 直接将预制拖到场景中，单独查看血条的效果
   

后记

---

这一次的实验比较容易，其中就是UGUI设计血条时，血条在游戏界面是和我预期的左右相反，刚开始有点奇怪，本来打算不管了，毕竟基本功能已经实现了，后面才发现是创建Slider的时候，他的Z轴是朝向正方向的，也就是他的正方向恰好的背对着摄像头，可以通过设置来修改。

GitHub

参考博客