九、UI系统

血条（Health Bar）的预制设计

血条（Health Bar）的预制设计。具体要求如下
分别使用 IMGUI 和 UGUI 实现
使用 UGUI，血条是游戏对象的一个子元素，任何时候需要面对主摄像机
分析两种实现的优缺点
给出预制的使用方法

设计过程

1. 使用 IMGUI

• 定义一个 HorizontalScrollbar 表示血条，用两个按钮调节血量。创建一个空对象名为 IMGUIHealthBar ，将脚本挂载其上。

//IMGUIHealthBar.cs
public class IMGUIHealthBar : MonoBehaviour
{
    public float health = 0f;
    private Rect healthBar;
    public Rect healthUp;
    public Rect healthDown;
    public Slider slider;

    // Start is called before the first frame update
    void Start()
    {
        healthBar = new Rect(50, 50, 200, 30);
        healthUp = new Rect(75, 80, 40, 30);
        healthDown = new Rect(175, 80, 40, 30);
    }

    void OnGUI()
    {
        if (GUI.Button(healthUp, "+"))
        {
            health = health + 0.1f > 1f ? 1f : health + 0.1f;
        }
        if (GUI.Button(healthDown, "-"))
        {
            health = health - 0.1f < 0 ? 0 : health - 0.1f;
        }
        slider.value = health;
        GUI.HorizontalScrollbar(healthBar, 0f, health, 0f, 1f);
    }
}

• 将 IMGUIHealthBar 拉到 Assets/Prefabs 文件夹中即可创建预制。要使用时直接拖到场景中即可。

2. 使用 UGUI

• 创建一个 Capsule 作为人物，添加 Canvas 子对象，在 Canvas 上添加 Slider 子对象
  
• 选择 Handle Slider Area，禁灰（disable）该元素，选择 Fill Area 的 Fill，修改 Image 组件的 Color 为 红色，就可以得到血条效果

• 给 Capsule 添加控制移动脚本，Capsule 可以在 XOZ 平面上移动

    //Move.cs
    public class Move : MonoBehaviour
    {
        // Start is called before the first frame update
        void Start()
        {
            
        }

        // Update is called once per frame
        void Update()
        {
            float translationX = Input.GetAxis("Horizontal");
            float translationZ = Input.GetAxis("Vertical");
            MovePlayer(translationX, translationZ);
        }
        
        public void MovePlayer(float translationX, float translationZ){
            translationX *= Time.deltaTime;
            translationZ *= Time.deltaTime;
            this.transform.LookAt(new Vector3(this.transform.position.x + translationX, this.transform.position.y, this.transform.position.z + translationZ));
            if (translationX == 0)
                this.transform.Translate(0, 0, Mathf.Abs(translationZ) * 5);
            else if (translationZ == 0)
                this.transform.Translate(0, 0, Mathf.Abs(translationX) * 5);
            else
                this.transform.Translate(0, 0, (Mathf.Abs(translationZ) + Mathf.Abs(translationX)) * 2.5f);
        }
    }

• 给 Canvas 添加脚本使血条一直面向摄像机

    //LookAtCamera.cs
    public class LookAtCamera : MonoBehaviour
    {
        // Update is called once per frame
        void Update()
        {
            this.transform.LookAt(Camera.main.transform.position);
        }
    }

• 将 Canvas 拉到 Assets/Prefabs 文件夹中即可创建预制，要使用时，将 Canvas 拖到 Capsule 中，使 Canvas 成为 Capsule 的子对象即可

两种实现的优缺点

IMGUI

• 优点
  • IMGUI 的存在符合游戏编程的传统
  • 在修改模型，渲染模型这样的经典游戏循环编程模式中，在渲染阶段之后，绘制 UI 界面无可挑剔
  • 这样的编程既避免了 UI 元素保持在屏幕最前端，又有最佳的执行效率，一切控制掌握在程序员手中
• 缺点
  • 编码不直观，难以调试
  • 借助 IMGUI 实现的血条是二维渲染在屏幕上的，不能随Capsule运动

UGUI

• 优点
  • 所见即所得（WYSIWYG）设计工具
  • 设计师也能参与参与程序开发
  • 支持多模式、多摄像机渲染
  • UI 元素与场景融为一体，支持复杂布局
  • 面向对象的编程
• 缺点
  • 渲染效率低

效果展示

代码传送门