UI系统

血条（Health Bar）的预制设计

要求：

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

首先为人物都挂在上一个Health的组件，上面记录着当前的血量和总血量，以及受到伤害和恢复的函数调用

public class Health : MonoBehaviour
{
    public float curHP;
    public float nextHP;
    public float fullHP = 100.0f;

    private void Start() {
        curHP = fullHP;
        nextHP = fullHP;
    }

    private void Update() {
        //Linear interpolation to make HP change smoothly
        curHP = Mathf.Lerp(curHP, nextHP, 0.05f);
    }

    public void Hurt(){
        nextHP = (curHP - 10.0f)>=0f?curHP-10.0f:0.0f;
    }

    public void Recover(){
        nextHP = fullHP;
    }
}

IMGUI实现

将以下代码挂载到人物身上，将血条固定

[RequireComponent(typeof(Health))]
public class IMGUI : MonoBehaviour
{
    private GameObject Character;
    private float curHP;
    private float fullHP;
    private void Start() {
        Character = this.gameObject;
    }

    private void OnGUI() {
        if(GUI.Button(new Rect(20,20,80,40),"Hurt"))
        {
            Character.GetComponent<Health>().Hurt();
        }
        if(GUI.Button(new Rect(110,20,80,40),"Recover"))
        {
            Character.GetComponent<Health>().Recover();
        }

        curHP = Character.GetComponent<Health>().curHP;
        fullHP = Character.GetComponent<Health>().fullHP;

        GUI.HorizontalScrollbar(new Rect(20,90,170,20), 0.0f, curHP, 0.0f, fullHP);
    }
}

UGUI实现

课件中已经描述了该方法的具体实现，在其基础上做一些修改即可

• 菜单 Assets -> Import Package -> Characters 导入资源
• 在层次视图，Context 菜单 -> 3D Object -> Plane 添加 Plane 对象
• 资源视图展开 Standard Assets :: Charactors :: ThirdPersonCharater :: Prefab
• 将 ThirdPersonController 预制拖放放入场景，改名为 Ethan
• 检查以下属性
  • Plane 的 Transform 的 Position = (0,0,0)
  • Ethan 的 Transform 的 Position = (0,0,0)
  • Main Camera 的 Transform 的 Position = (0,1,-10)
• 运行检查效果
• 选择 Ethan 用上下文菜单 -> UI -> Canvas, 添加画布子对象
• 选择 Ethan 的 Canvas，用上下文菜单 -> UI -> Slider 添加滑条作为血条子对象
• 运行检查效果
• 选择 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)
• 运行检查效果，应该是头顶 Slider 的 Ethan，用键盘移动 Ethan，观察
• 展开 Slider
  • 选择 Handle Slider Area，禁灰（disable）该元素
  • 选择 Background，禁灰（disable）该元素
  • 选择 Fill Area 的 Fill，修改 Image 组件的 Color 为 红色
• 选择 Slider 的 Slider 组件
  • 设置 MaxValue 为 100
  • 设置 Value 为 75
• 运行检查效果，发现血条随人物旋转

给 Canvas 添加以下脚本 LookAtCamera.cs

using UnityEngine;

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

为了美观，将

• Background勾选上，将Rect Transform的Left/Top/Right/Bottom都设置为0
• 同时将fillArea/fill的Rect Transform的Left/Top/Right/Bottom都设置为0

血量的属性应该属于EThan对象，所以图像绘制应该都是从该对象上获取，于是为该slider添加脚本

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

namespace HealthBar{
    public class HPChanged : MonoBehaviour
    {
        public GameObject character;
        private void Start() {
            //将当前血条设置为满
            this.gameObject.GetComponent<Slider>().maxValue = character.GetComponent<Health>().fullHP;
        }
        private void Update() {
            //获取并设置当前血量
            this.gameObject.GetComponent<Slider>().value = character.GetComponent<Health>().curHP;
        }
    }
}

分析两种实现的优缺点

IMGUI：
优点：

• 如果不做复杂的界面，代码简单易用
• 在修改模型，渲染模型这样的经典游戏循环编程模式中，在渲染阶段之后，绘制 UI 界面无可挑剔
• 避免了 UI 元素保持在屏幕最前端，又有最佳的执行效率，一切控制掌握在程序员手中，这对早期计算和存储资源贫乏的游戏设备来说，更是弥足珍贵。

缺点：

• 传统代码驱动的 UI 开发效率低下，难以调试
  IMGUI是其中GUI系统通常不保留有关GUI的信息，而是反复要求重新指定控件是什么，控件在哪里等的控件。当您以函数调用的形式指定UI的每个部分时，会立即对其进行处理（绘制，单击等），并且任何用户交互的后果都会立即返回给您，而无需您进行查询。这对于游戏UI而言效率低下，由于一切都变得非常依赖于代码，因此对于设计师来说不方便使用。

但是它对于非实时情况，由代码驱动，希望根据当前状态轻松更改显示的控件的处理是非常方便的，也就是说，它是一个很好的编辑面板的选择。

UGUI：
优点：

• 让设计师也能参与参与程序开发，设计师甚至不需要程序员帮助，使用简单的地图编辑器、菜单编辑器等工具就可直接创造游戏元素，乃至产生游戏程序。
• 所见即所得
• 支持多模式、多摄像机渲染
• 面向对象的编程

预制的使用方法

IMGUI预制的使用方法
其实IMGUI的实现就是一个脚本，所以直接将该脚本挂载到人物对象身上即可
UGUI预制的使用方法
将预制实例化后，添加到人物对象的子对象中