UI系统

作业要求

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

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

参考资料

https://blog.csdn.net/Runner1st/article/details/80582780

IMGUI实现

创建脚本IMGUI_HealthBar .cs如下

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

public class IMGUI_HealthBar : MonoBehaviour {

    public float curHealth;     //当前血量
    public float nextHealth;    //变化后的血量

    private Rect HealthBar;           //血条显示区域
    private Rect AddHealthButton;     //加血按钮
    private Rect MinusHealthButton;   //减血按钮


    // Use this for initialization
    void Start()
    {
        HealthBar = new Rect(300, 100, 200, 20);         //血条显示区域
        AddHealthButton = new Rect(520, 100, 40, 20);    //按钮显示区域
        MinusHealthButton = new Rect(240, 100, 40, 20);  //按钮显示区域

        nextHealth = curHealth = 0.0f; 
    }

    void OnGUI()
    {
        if (GUI.Button(AddHealthButton, "加血"))         //GUI按钮
        {
            nextHealth = nextHealth + 0.1f > 1.0f ? 1.0f : nextHealth + 0.1f;   //血量增加
        }
        if (GUI.Button(MinusHealthButton, "减血"))      //GUI按钮
        {
            nextHealth = nextHealth - 0.1f < 0.0f ? 0.0f : nextHealth - 0.1f;   //血量减少
        }

        //插值计算curHealth值，以实现血条值平滑变化
        curHealth = Mathf.Lerp(curHealth, nextHealth, 0.05f);

        // 用水平滚动条的【宽度】作为血条的显示值
        GUI.HorizontalScrollbar(HealthBar, 0.0f, curHealth, 0.0f, 1.0f);

    }

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

    }
}

GUI.HorizontalScrollbar的使用：

用size表示血条长短

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

参数：

参数	含义
滚动条右端的值。	屏幕上用于滚动条的矩形。
value	最小和最大之间的位置。
size	我们能看到多少？
leftValue	滚动条左端的值。
rightValue	滚动条右端的值。

UGUI实现

构建基本场景

使用 UGUI时，血条是游戏对象的一个子元素，所以需要先创建一个游戏对象，这里导入资源里面的Characters，并构建基本场景：

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)

   • Main Camera 的 Transform 的 Position = (0,1,-10)

6. 运行检查效果

加上血条

这样就完成了资源的导入，接下来就是给人物加上血条，步骤如下：

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 添加脚本 UGUI_HealthBar.cs

public class UGUI_HealthBar : MonoBehaviour {
	void Update()
    {
        this.transform.LookAt(Camera.main.transform.position);

    }
}

血条变化

参照IMGUI中的方法，讲IMGUI_HealthBar中控制血条加减的部分加入。

并在脚本中新增一个Slider变量healthSlider，并在OnGUI函数中设置Slider的值：

healthSlider.value = health;

最后脚本如下：

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

public class UGUI_HealthBar : MonoBehaviour {

    public float curHealth;     //当前血量
    public float nextHealth;    //变化后的血量

    private Rect AddHealthButton;     //加血按钮
    private Rect MinusHealthButton;   //减血按钮

    public Slider HealthBar; 

    // Use this for initialization
    void Start()
    {
        AddHealthButton = new Rect(220, 100, 40, 20);
        MinusHealthButton = new Rect(540, 100, 40, 20);
    }

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

    }

    void OnGUI()
    {
        HealthBar.value = curHealth;

        if (GUI.Button(AddHealthButton, "加血"))
        {
            nextHealth = nextHealth + 0.1f > 1.0f ? 1.0f : nextHealth + 0.1f;
        }
        if (GUI.Button(MinusHealthButton, "减血"))
        {
            nextHealth = nextHealth - 0.1f < 0.0f ? 0.0f : nextHealth - 0.1f;
        }


        curHealth = Mathf.Lerp(curHealth, nextHealth, 0.05f);


    }
}

最后，把Canvas的子对象Slider拖入UGUI_HealthBar.cs组件中的HealthSlider属性，运行。

两种实现的优缺点

IMGUI

优点：

• 新手 UI 入门容易，帮助新手理解引擎的游戏循环

• 高级程序员，创建在线调试环境

• 工具开发者，定义 Unity 新的编程工具

缺点：

• 传统代码驱动的 UI 面临效率低下

UGUI

优点：

• 所见即所得（WYSIWYG）设计工具

• 支持多模式、多摄像机渲染

• 面向对象的编程

预制的使用方法

创建预制：

• 在Assets栏右键 -> create -> Perfab

• 给预制命名

• 将Hierarchy栏中制作好的游戏对象拖入预制中

使用IMGUI_HealthBar预制时：

• 直接把预制拖入左边Hierarchy

使用UGUI_HealthBar预制时：

• 直接把预制拖入左边Hierarchy

• 创建plane

游戏效果