unityUi系统

3D游戏设计第九次作业

前言

这是中山大学2020年3D游戏设计的第九次作业，如有错误，请指正，感谢您的阅读。

说明

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

IMGUI实现

实现过程

这里采用用HorizontalScrollbar进行实现，直接进行代码编写
思路：

1. 将血条进行初始化
2. 设置两个按钮进行加血和扣血的操作
3. 计算变化血量
4. 进行平滑变动
5. 绘制血条

public class IMGUIBloodbar : MonoBehaviour
{
    private float blood = 100.0f;
    private float change = 0.0f;
    private float targetLife = 100.0f;
    private Rect Lifebar;
    public 
    void Start()
    {
        Lifebar = new Rect(Screen.width / 2 - 50, Screen.height / 2 - 20, 80, 25);
    }


    void OnGUI()
    {
        if (GUI.Button(new Rect(Screen.width / 2 , Screen.height / 2 +30, 70, 30), "加血"))
        {
            change = 20;
        }
        if (GUI.Button(new Rect(Screen.width / 2+200, Screen.height / 2 + 30, 70, 30), "扣血"))
        {
            change = -20;
        }
        if (change != 0)
        {
            targetLife = blood + change;
            if (targetLife > 100) targetLife = 100.0f;
            if (targetLife < 0) targetLife = 0.0f;
            change = 0;
        }
        blood = Mathf.Lerp(blood, targetLife, 0.01f);
        GUI.HorizontalScrollbar(Lifebar, 0.0f, blood, 0.0f, 100.0f);
    }
}

效果展示

生成预制体

写好脚本后，新建一个空对象，然后将脚本拖到该对象，运行即可。运行成功后，在Assets中创建新文件夹Perfabs，将该对象拖到该文件夹中，即可生成预制体

UGUI实现

实现过程

首先，我们使用官方的一个预制体：Standard Assets
这个预制体内包含一个人物，可以直接使用他来完成制作
我们导入预制体：ThirdPersonController，然后添加一个Plane来承载这个人物，设置如下属性

• Plane ： Transform 的 Position = (0,0,0)
• ThirdPersonController： Transform 的 Position = (0,0,0)

然后给人物添加血条

• 选择 ThirdPersonController中的Canvas，添加画布子对象
• 选择 ThirdPersonController的 Canvas中的Slider，添加滑条作为血条子对象

进行如下设置：

• Cavas设置
  
• Slider设置
  
• Slider中BackGround设置
  
• Slider中Fill设置
  
  设置完成后，编写脚本
  思路：

1. 初始化
2. 设置两个按钮进行加血和扣血的操作
3. 计算变化血量
4. 进行平滑变动
5. 绘制血条
6. Update用于跟随相机移动

public class UGUIBloodbar : MonoBehaviour
{
    private float blood = 100.0f;
    private float change = 0.0f;
    private float targetLife = 100.0f;
    void Update()
    {
        this.transform.LookAt(Camera.main.transform.position);
    }
    void OnGUI()
    {
        if (GUI.Button(new Rect(Screen.width / 2, Screen.height / 2 + 30, 70, 30), "加血"))
        {
            change = 20;
        }
        if (GUI.Button(new Rect(Screen.width / 2 + 200, Screen.height / 2 + 30, 70, 30), "扣血"))
        {
            change = -20;
        }
        if (change != 0)
        {
            targetLife = blood + change;
            if (targetLife > 100) targetLife = 100.0f;
            if (targetLife < 0) targetLife = 0.0f;
            change = 0;
        }
        blood = Mathf.Lerp(blood, targetLife, 0.01f);
        this.transform.GetComponentInChildren<Slider>().value = blood;
    }
}

将脚本拖入Canvas中，然后运行即可

效果展示

生成预制体

直接将ThirdPersonController预制体拖入Prefab文件夹即可

IMGUI与UGUI的比较

IMGUI

IMGUI 的存在符合游戏编程的传统，即使在今天它依然没有被官方宣判为遗留（将要淘汰的）系（LegacySystems）。在修改模型，渲染模型这样的经典游戏循环编程模式中，在渲染阶段之后，绘制 UI 界面无可挑剔（参考Execution Order of Event Functions）。这样的编程即避免了 UI元素保持在屏幕最前端，又有最佳的执行效率，一切控制掌握在程序员手中，这对早期计算和存储资源贫乏的游戏设备来说，更是弥足珍贵。当然，早年 UI 交互手段就是绘制图片和文本，检测输入事件等基本任务。

按 Unity 官方说法，IMGUI 主要用于以下场景：

• 在游戏中创建调试显示工具
• 为脚本组件创建自定义的 Inspector 面板。
• 创建新的编辑器窗口和工具来扩展 Unity 环境。

优点

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

缺点

• 传统代码驱动的 UI 面临效率低下
• 难以调试

UGUI

随着游戏开发的普及，为了让设计师也能参与参与程序开发，从简单的地图编辑器、菜单编辑器等工具应运而生。设计师甚至不需要程序员帮助，使用这些工具就可直接创造游戏元素，乃至产生游戏程序。除此之外，现代游戏 UI 必须要满足以下要求：

• 跨设备执行，自动适应不同分辨率
• UI 元素与游戏场景融为一体的交互
• 支持复杂的布局
• 多摄像机支持

以至于即使优秀的程序员在现代 UI 面前，传统代码驱动的 UI 面临开发效率低下，难以调试等问题。 对于 Unity 平台， 当 NGUI: Next-Gen UI kit 的出现使得不依赖 Unity Pro 功能，使用所见即所得（WYSIWYG）设计工具，集成了 tweening 运动管理系统， 可以制作多数 2D 游戏，直接威胁了 Unity 的生意。 Unity 最终高薪聘了 NGUI 的主设计师，最终又分道扬镳，于是就有了 UGUI，青出于蓝而胜于蓝！

优点

• 所见即所得（WYSIWYG）设计工具
• 支持多模式、多摄像机渲染
• 面向对象

缺点

• 功能需要再完善

预制的使用

预制存放在Prefabs文件夹下：

• IMGUI预制：IMGUI，拖入场景中运行即可；
• UGUI预制： ThirdPersonController，导入上述的资源包中的CrossPlatformInput，然后将预制拖入即可

感悟与总结

本次作业完成了血条的制作，通过本次作业，我学会了IMGUI和UGUI的使用方法，比较了他们的优缺点，以及如何使用预制体和生成预制体。作业的难点在于UGUI的使用设置，虽然不是编程，但是很多细节如果不设置好就无法实现自己想要的效果。

项目仓库

UI系统