UGUI和IMGUI制作血条

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实现

1. 菜单 Assets -> Import Package -> Characters 导入资源。
2. 在层次视图，Context 菜单 -> 3D Object -> Plane 添加 Plane 对象。
3. 资源视图展开 Standard Assets/Charactors/ThirdPersonCharater/Prefab，
   将 ThirdPersonController 预制拖放放入场景，改名为 Ethan。
4. 检查以下属性：
   • Plane 的 Transform 的 Position = (0,0,0)
   • Ethan 的 Transform 的 Position = (0,0,0)
   • Main Camera 的 Transform 的 Position = (0,1,-10)
   • 运行，可以看到人物正常移动。
5. 选择 Ethan 用上下文菜单 -> UI -> Canvas, 添加画布子对象。
6. 选择 Ethan 的 Canvas，用上下文菜单 -> UI -> Slider 添加滑条作为血条子对象。
7. 选择 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)
8. 运行检查效果，可以看到头顶 Slider 的 Ethan。
9. 展开 Slider
   • 选择 Handle Slider Area，禁灰（disable）该元素
   • 选择 Background，禁灰（disable）该元素
   • 选择 Fill Area 的 Fill，修改 Image 组件的 Color 为 红色
   • 选择 Slider 的 Slider 组件
   • 设置 MaxValue 为 100
   • 设置 Value 为 75
   • 运行检查效果，发现血条随人物旋转。
10. 为了让血条不随人物旋转，这里需要添加一个脚本，挂载到Canvas对象上：

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

    这样，运行之后就可以看到血条面向摄像机了。
11. 如果想让血条的血量变化，这里应当在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键时，血量就会发生变化。

两种实现的优缺点

IMGUI

优点

1. IMGUI 的存在符合游戏编程的传统，
2. 在修改模型，渲染模型这样的经典游戏循环编程模式中，渲染界面之后绘制UI界面可以提高性能，也不会对模型造成影响。
3. 这样的编程既避免了UI元素保持在屏幕最前端，执行效率又很高。

缺点

1. 传统代码驱动的UI开发效率低下，并不是直接可见的设计。
2. 通过代码动态生成元素，每次调试都需要启动游戏观察，不利于调试。

UGUI

优点

1. 所见即所得的设计工具，使得设计师也能参与程序开发的UI设计部分。
2. 支持多模式、多摄像机渲染。
3. UI与场景和对象融为一体，使用灵活。

缺点

1. 效率略低于IMGUI，因为UI元素要和模型一起渲染，模型的改变也会导致IMGUI的改变。
2. 不符合游戏编程的传统。

运行结果

具体效果请参考展示视频