3D游戏与编程—

UI系统

Unity GUI简介

UI 即 User Interface（用户界面）的简称。在许多软件中，采用狭义的概念，特指窗体、面板、按钮、文本框等人们熟悉的人机交互元素，及其组织与风格（也称皮肤）。Unity UI 系统采用上述狭义概念。

Unity 目前支持三套完全不同风格的 UI 系统：

4.0 及以前 - IMGUI（Immediate Mode GUI）及时模式图形界面。它是代码驱动的 UI 系统，没有图形化设计界面，只能在 OnGUI 阶段用 GUI 系列的类绘制各种 UI 元素，因此 UI元素只能浮在游戏界面之上。
5.0 及以后 - Unity GUI / UGUI 是面向对象的 UI 系统。所有 UI 元素都是游戏对象，友好的图形化设计界面，可在场景渲染阶段渲染这些 UI 元素。
2018.3 及以后 - UXML（unity 扩展标记语言）。基于 IMGUI 的 AXML 包装，方便移动应用开发者入门。

IMGUI

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

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

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

IMGUI系统通常不打算用于玩家可能使用并与之交互的普通游戏内用户界面。为此，应该使用 Unity 的基于 GameObject 的 UGUI 系统。
因此，掌握了解 IMGUI 是非常必要：

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

UGUI 的产生与优势

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

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

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

UGUI 的优势：

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

作业要求

血条（Health Bar）的预制设计。具体要求如下

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

使用UGUI方法制作血条

UGUI方法参考课件

制作预制

导入Standard Assets

注意：由于这个资源包使用的是2018版本的unity，而2020版的unity不支持GUI，所以会产生cs文件的报错，需要将报错文件中引用的包改为using UnityEngine.UI;
然后把下面的GUIText改为Text即可

添加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
- 选择 Handle Slider Area，禁灰（disable）该元素
- 选择 Background，禁灰（disable）该元素
- 选择 Fill Area 的 Fill，修改 Image 组件的 Color 为红色
选择 Slider 的 Slider 组件
- 设置 MaxValue 为 100
- 设置 Value 为 75

运行发现，现在人物头顶红色的血条，但是随着人物旋转，血条也会跟着旋转，尤其在侧面时血条会戳出屏幕

给血条添加脚本，使其始终面向camera

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

现在血条只会面向camera（运行效果见下方演示视频）

使用IMGUI方法制作血条

使用IMGUI制作血条就非常简单，只需要三步。

导入上述的平面及人物模型
新建c#文件，代码如下：

using System.Collections;
using System.Collections.Generic;
using UnityEngine;public class IMGUI : MonoBehaviour
{public float healthPanelOffset = 2f;private void OnGUI(){Vector3 worldPos = new Vector3(transform.position.x, transform.position.y, transform.position.z);Vector2 screenPos = Camera.main.WorldToScreenPoint(worldPos);Rect rect = new Rect(screenPos.x - 50, screenPos.y, 100, 100);GUI.HorizontalScrollbar(rect, 0, 75, 0, 100);}
}

把C#文件挂到人物上，运行，就可以看到人物头顶出现了一个血条

（有一个问题，不知道什么原因，人物一旦运行起来就像素奇低）

结果演示

（两个视频分p）

血条制作效果演示

代码传送门

使用UGUI方法
使用IMGUI方法