UGUI和IMGUI制作血条

前言

这是中大计算机学院3D游戏编程课的一次作业，在这里分享一下设计思路。
主要代码上传到了gitee上，请按照后文的操作运行。
项目地址：https://gitee.com/cuizx19308024/unity-games/tree/master/hw6
成果视频：https://www.bilibili.com/video/BV1Gu411S7jQ?spm_id_from=333.851.dynamic.content.click

游戏说明

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

项目组成及预制的使用方法

本次作业中有两个Scene，第一个Scene可以运行IMGUI，第二个Scene可以运行UGUI的代码。
所有的预制被放在Prefab文件夹中，可以直接拖动到场景中。不过在上面两个Scene中已经添加好了，因此无需处理。
代码主要有三个：IMGUISample用于控制IMGUI；UGUISample用于控制血条；SliderController用于控制血条上值的变化。

操作流程

IMGUI实现

创建一个空对象，在上面挂载脚本IMGUISample.cs即可：

public class IMGUISample : MonoBehaviour
{
    public float health = 1.0f;
    private float new_health = 1.0f;
    
    private void OnGUI() {
        // 用水平滚动条的宽度作为血条的显示值
        GUI.HorizontalScrollbar(new Rect(50, 50, 200, 20), 0, health, 0, 1);

        if (GUI.Button(new Rect(160, 80, 40, 20), "+"))
        {
            new_health = new_health + 0.1f > 1 ? 1 : new_health + 0.1f;
        }
        if (GUI.Button(new Rect(100, 80, 40, 20), "-"))
        {
            new_health = new_health - 0.1f < 0 ? 0 : new_health - 0.1f;
        }

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

这里通过插值函数让血条的变化更为平缓，而不会发生突变。按下+/-时会改变血量。

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。
展开 Slider
- 选择 Handle Slider Area，禁灰（disable）该元素
- 选择 Background，禁灰（disable）该元素
- 选择 Fill Area 的 Fill，修改 Image 组件的 Color 为红色
- 选择 Slider 的 Slider 组件
- 设置 MaxValue 为 100
- 设置 Value 为 75
- 运行检查效果，发现血条随人物旋转。

为了让血条不随人物旋转，这里需要添加一个脚本，挂载到Canvas对象上：

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

这样，运行之后就可以看到血条面向摄像机了。

如果想让血条的血量变化，这里应当在Slider中加上以下脚本：

public class SliderController : MonoBehaviour
{
    public Slider healthBar;
    // Start is called before the first frame update
    void Start()
    {
        healthBar = this.GetComponent<Slider>();
        healthBar.value = 75;
    }

    // Update is called once per frame
    void Update()
    {
        if(Input.GetKeyDown("q")){
            healthBar.value = healthBar.value - 10 < 0 ? 0 : healthBar.value - 10;
        }
        if(Input.GetKeyDown("e")){
            healthBar.value = healthBar.value + 10 > 100 ? 100 : healthBar.value + 10;
        }
    }
}

这样，当我们按下Q或E键时，血量就会发生变化。