UI系统

实验内容

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

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

IMGUI制作血条并设为预制

方案

血条可用水平滑动条 (HorizontalSlider) 来显示，教程提供了使用例子。

滑块旋钮的位置存储为浮点数hSlideValue，通过设定这个值能决定我们能看到多少。有两个附加值确定最小值和最大值，决定Slide右端的最近位置和最远位置。

private float hSliderValue = 0.0f;
void OnGUI () {
    hSliderValue = GUI.HorizontalSlider (new Rect (25, 25, 100, 30), hSliderValue, 0.0f, 10.0f);
}

步骤

1. 添加HealthBar_IMGUI脚本

   using System.Collections;
   using System.Collections.Generic;
   using UnityEngine;
   
   public class HealthBar_IMGUI : MonoBehaviour {
       public float currentHealth; //当前血量值
       public float changedHealth; //增/减后的血量值
   
       private Rect HealthBar;     //血条区域
       private Rect AddButtonArea; //加血按钮区域  
       private Rect SubButtonArea; //减血按钮区域
   
       void Start()
       {
           //设置血条和按钮显示区域的位置和大小
           HealthBar = new Rect(120, 100, 200, 20);
           SubButtonArea = new Rect(350, 100, 40, 20);
           AddButtonArea = new Rect(410, 100, 40, 20);
   
           currentHealth = changedHealth = 0.0f;//初始化
       }
   
       void OnGUI()
       {
           if (GUI.Button(AddButtonArea, "加血"))     //设置加血GUI按钮和点击事件
           {
               changedHealth = changedHealth + 0.1f > 1.0f ? 1.0f : changedHealth + 0.1f;
           }
           if (GUI.Button(SubButtonArea, "减血"))   //设置减血GUI按钮和点击事件
           {
               changedHealth = changedHealth - 0.1f < 0.0f ? 0.0f : changedHealth - 0.1f;
           }
   
           //插值计算health值，以实现血条值平滑变化
           currentHealth = Mathf.Lerp(currentHealth, changedHealth, 0.05f);
   
           // 用水平滚动条的宽度作为血条的显示值
           GUI.HorizontalScrollbar(HealthBar, 0.0f, currentHealth, 0.0f, 1.0f);
       }
   
   	// Update is called once per frame
   	void Update () {
   		
   	}
   }
   
   

2. 制作预制

   • 在Hierarchy创建一个空对象，命名为IMGUI_Bar，挂载HealthBar_IMGUI脚本
   • 右键Assert -> Create Floder -> 命名为Prefabs
   • 运行，将Hierarchy栏中IMGUI_Bar拖入Prefabs文件夹中，生成预制
   • 结束运行，可以看到Prefabs中的预制IMGUI_Bar依然存在
     

效果：

UGUI制作血条并设为预制

构建基本场景

1. 菜单 Assets -> Import Package -> Characters，导入资源
2. 在层次视图，Create -> 3D Object -> Plane，添加 Plane 对象
3. 资源视图展开 Standard Assets :: Charactors :: ThirdPersonCharater :: Prefabs
4. 将 ThirdPersonController 预制拖入场景，改名为 Ethan
5. 检查以下属性
   1） Plane 的 Transform 的 Position = (0,0,0)
   2） Ethan 的 Transform 的 Position = (0,0,0)，Rotation = (0,180,0)
   3） Main Camera 的 Transform 的 Position = (0,1,-10)
6. 运行检查效果

给人物加上血条

1. 选择 Ethan 用上下文菜单（鼠标右键） -> UI -> Canvas，添加画布子对象

2. 选择 Ethan 的 Canvas，用上下文菜单 -> UI -> Slider，添加滑条作为血条子对象

3. 选择 Ethan 的 Canvas，在 Inspector 视图
   1）设置 Canvas 组件 Render Mode 为 World Space
   2）设置 Rect Transform 组件的 (PosX, PosY, Width, Height) 为 (0,2,160,20)
   3） 设置 Rect Transform 组件的 Scale（x, y）为 (0.01,0.01)

4. 展开 Slider
   1）选择 Handle Slider Area，禁灰（disable）该元素
   2）选择 Background，禁灰（disable）该元素
   3）选择 Fill Area 的 Fill，修改 Image 组件的 Color 为 红色

5. 选择Slider，在 Inspector 视图
   1）设置 Rect Transform 组件的Rotation = (0,0,0)
   2）设置Slider 组件的 MaxValue 为 1

6. 运行检查结果，发现血条随人物旋转

设置血条面向Camera
给 Canvas 添加以下脚本 LookAtCamera.cs

using UnityEngine;

public class LookAtCamera : MonoBehaviour {

	void Update () {
		this.transform.LookAt (Camera.main.transform.position);
	}
}

添加血量控制
参照IHealthBar_IMGUI中的方法，添加控制血条加减的部分，脚本中新增一个Slider变量HealthSlider
添加脚本HealthBar_UGUI，如下

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

public class HealthBar_UGUI : MonoBehaviour
{
    public Slider HealthBar;     //血条

    public float currentHealth; //当前血量值
    public float changedHealth; //增/减后的血量值

    private Rect AddButtonArea; //加血按钮区域  
    private Rect SubButtonArea; //减血按钮区域

    void Start()
    {
        SubButtonArea = new Rect(350, 100, 40, 20);
        AddButtonArea = new Rect(410, 100, 40, 20);
        currentHealth = changedHealth = 0.0f;
    }

    void OnGUI()
    {
        if (GUI.Button(AddButtonArea, "加血"))     //设置加血GUI按钮和点击事件
        {
            changedHealth = changedHealth + 0.1f > 1.0f ? 1.0f : changedHealth + 0.1f;
        }
        if (GUI.Button(SubButtonArea, "减血"))   //设置减血GUI按钮和点击事件
        {
            changedHealth = changedHealth - 0.1f < 0.0f ? 0.0f : changedHealth - 0.1f;
        }

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

        HealthBar.value = currentHealth;
    }

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

在Ethan上挂载脚本，并把Canvas/Slider拖入HealthBar_UGUI.cs组件中的HealthSlider属性，运行

创建预制
将Hierarchy栏中制作好的Ethan直接拖入Prefabs中，生成预制

两种实现的优缺点

IMGUI

优点：

• 新手 UI 入门容易，帮助新手理解引擎的游戏循环
• 高级程序员，创建在线调试环境
• 工具开发者，定义 Unity 新的编程工具

缺点：

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

UGUI

优点：

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

预制的使用方法

预制的制作方法在上面已经说明

使用IMGUI_HealthBar预制时：

• 直接把预制拖入Hierarchy

使用UGUI_HealthBar预制时：

• 创建plane
• 直接把预制拖入Hierarchy

视频