3D游戏 作业9

• 血条（Health Bar）的预制设计
• • 要求
  • 相关理论
  • • Unity UI
    • IMGUI
    • UGUI
    • UGUI 的基础使用
    • UI 组件与元素
    • 圆形遮罩、动画、富文本、血条
  • 实现过程
  • • IMGUI 实现
    • UGUI实现
  • 实现结果
  • • 优缺点
    • 预制的使用方法

血条（Health Bar）的预制设计

要求

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

相关理论

Unity UI

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 简单易用的代码是程序员喜欢的，对于新手 UI 入门容易，可以帮助新手理解引擎的游戏循环；对于高级程序员可以创建在线调试环境；对于工具开发者定义了 Unity 新的编程工具。

IMGUI 系统通常不打算用于玩家可能使用并与之交互的普通游戏内用户界面，因此可以选择使用 Unity 的基于 GameObject 的 UGUI 系统。

UGUI

现代游戏 UI 满足：

• 简单的地图编辑器、菜单编辑器等工具使设计师没有程序员的帮助也能参与程序开发，可以直接创造游戏元素，乃至产生游戏程序；
• 跨设备执行，自动适应不同分辨率；
• UI 元素与游戏场景融为一体的交互；
• 支持复杂的布局；
• 多摄像机支持。

传统代码驱动的 UI 有着开发效率低下，难以调试等问题。而 UGUI 的优势有：

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

UGUI 的基础使用

参考：UI 系统

画布 是绘图区域，是 UI 元素的容器，UI 元素及其子 UI 元素都将绘制在其上。画布区域在场景视图中显示为矩形。UI 元素采用像素单位表示位置和尺寸。

画布中的UI元素按照它们在层次结构中出现的顺序绘制。如果两个UI元素重叠，后面的元素将出现在较早的元素之上，最后一个孩子显示在最上面。

渲染模式 设置可用于使其在屏幕空间或世界空间中渲染。将 UI 元素放置在场景顶部渲染的屏幕，画布会自动更改大小匹配屏幕（Canvas 默认中心点为屏幕中心）。

UI 布局基础：每个UI元素都被表示为一个矩形，为了相对于 Canvas 和 其他 UI 元素实现定位，Unity 在 Transform 基础上定义了 RectTransform （矩形变换） 支持矩形元素在 2/3D 场景中变换。
矩形工具

矩形工具：有移动、旋转、比例、矩形四个工具。在选择矩形工具时，设置为“旋转”和“局部”视图，通常便于操作。

矩形变换：像常规变换一样具有位置，旋转和比例，也具有宽度和高度表示矩形的尺寸。

UI 组件与元素

UI 部件都是用 Script 开发的自定义组件。包括在 UI、Layout 和 Rendering 等分类中。

1、可视化组件：

• Text：显示的文本的文本区域，可设置字体，字体样式，字体大小及文本是否具有丰富的文本功能；
• Image：显示图片的区域。可以设置GUI精灵、色彩；
• Raw Image：原始图像采用纹理，进行 UV 矩形贴图；
• Mask：不是一个可见的 UI 控件，遮罩将子元素限制（掩蔽）为父元素的形状吗，若子元素比父控件大，则只有适合父节点遮罩的部分是可见的；
• Effects：应用各种简单的效果，例如简单的投影或轮廓。

2、UI 交互元素：

是 GameObject，它拥有 UI 交互组件、UI可视化组件、及相关组件的组合，以及一些 UI 子元素构成，以便于用户在设计场景中创建交互界面。

• Button
• Toggle
• Toggle Group
• Slider
• Scrollbar
• Dropdown
• Input Field
• Scroll Rect (Scroll View)

详细信息参见官方：UI 元素

圆形遮罩、动画、富文本、血条

都是菜单制作，初步理解 Text，Image，RowImage，Mask 等的基本使用技巧。

圆形遮罩：

参考：使用透明度实现 Mask 遮罩的 Unity Shader

动画：

动画与按钮的集成，参见官方： 动画集成

富文本：

为了显示格式复杂的文字，Unity 提供了类似 HTML 的标签，控制字体、字号、颜色。

• 在 Canvas 下添加 Text 元素
• 在 Text 组件输入： We are <color=green>green</color> with envy

详细参见官方：Rich Text

血条：

参考资源：Faking World Space for monster health bars in Unity

实现过程

IMGUI 实现

将水平滚动条的宽度作为血量来显示，设置了变量 Healthval，并利用Math.Lerp插值计算血量，使血条值变化平缓。

代码：

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class healthBar: MonoBehaviour
{
    // 血量
    public float healthval = 0.0f;
    // 用来调整血条的临时变量
    private float temp;
    private Rect barpos;//血条的位置
    private Rect addpos;//加血按钮的位置
    private Rect minuspos;//减血按钮的位置
    void Start()
    {
        barpos = new Rect(30, 0, 140, 80);
        addpos = new Rect(55, 15, 45, 15);
        minuspos = new Rect(100, 15, 45, 15);
        temp = healthval;
    }
    void OnGUI()
    {
        if (GUI.Button(addpos, "+"))
        {
            temp = temp + 0.1f > 1.0f ? 1.0f : temp + 0.1f;
        }
        if (GUI.Button(minuspos, "-"))
        {
            temp = temp - 0.1f < 0.0f ? 0.0f : temp - 0.1f;
        }
        //插值计算
        healthval = Mathf.Lerp(healthval, temp, 0.05f);
        // 显示血条
        GUI.HorizontalScrollbar(barpos, 0.0f, healthval, 0.0f, 1.0f);
    }
}

将该脚本挂载到空对象上，运行即显示血条与加血减血按钮。

可以通过更改变量 Healthval（0~1）来改变初始血量的比例，比如在 Healthval = 0.5 时：


将挂载脚本的空对象拖入下方的project窗口，生成预制。

UGUI实现

下载并import unity提供的standard assets中的characters。将第三人称的预制拖入场景，命名为Ethan，Position设为（0，0，0），Rotation设为（0，180，0）。

新建一个Plane，Position设为（0，0，0）。

main camera的position设置为（0，1，-10）。

在Ethan上右击添加画布，在画布上右击添加slider作为血条。
设置画布的render mode为world space。更改rect transfom和scale

禁掉slider的handle slider area和background

把fill area里fill的image改成绿色。

设置slider组件的value。

运行，发现虽然此时血条会随着Ethan移动，但人物转向血条也会反转，所以给画布添加一个脚本，让它能一直朝向照相机。

实现结果

优缺点

IMGUI：
IMGUI更符合编程习惯，在渲染阶段之后，绘制UI效果更好，效率更高。缺点是调试起来更困难，不支持可视化开发，无法在UI上添加3D模型的效果。

UGUI：
UGUI相比IMGUI在功能上还不够成熟，但官方在不断开发中，有取代NGUI的趋势。更适合没有编程基础的人在游戏制作过程中操作UI，降低了门槛。UGUI的锚点很方便适应屏幕。
缺点是对象过多时需要很多画布，不够灵活。

预制的使用方法

IMGUI血条直接将healthBar预制体拖入场景，点击±按钮可以修改血量。
UGUI血条先按照上述操作导入Ethan，生成场景，再将Canvas预制体拖入Ethan对象成为子对象。