Unity游戏制作（七）

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

• Windows
• Unity 2020.3.18

• 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 包装，方便移动应用开发者入门。

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

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

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

显然，如果不做复杂的界面，如下代码简单易用的代码是程序员喜欢的：

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

public class IMGUITest : MonoBehaviour {

	void OnGUI (){
		// Make a background box
		GUI.Box(new Rect(10,10,100,90), "Loader Menu");

		// Make the first button. If it is pressed, Application.Loadlevel (1) will be executed
		if(GUI.Button(new Rect(20,40,80,20), "Level 1")) {
			Application.LoadLevel(1);
		}

		// Make the second button.
		if(GUI.Button(new Rect(20,70,80,20), "Level 2")) {
			Application.LoadLevel(2);
		}
	}
}

因此，掌握了解 IMGUI 是非常必要：

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

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

新建3d-unity的文件，然后直接把gitee上Assets文件夹替换新项目的Assets文件夹，同时，把scenes中的myScene拖出来，直接点击运行即可开始游戏。

• 菜单 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，用键盘移动 Ethan，观察
• 展开 Slider
  • 选择 Handle Slider Area，禁灰（disable）该元素
  • 选择 Background，禁灰（disable）该元素
  • 选择 Fill Area 的 Fill，修改 Image 组件的 Color 为 红色
• 选择 Slider 的 Slider 组件
  • 设置 MaxValue 为 100
  • 设置 Value 为 75
• 运行检查效果，发现血条随人物旋转
• 给 Canvas 添加以下脚本

using UnityEngine;

public class LookAtCamera : MonoBehaviour {

	void Update () {
		this.transform.LookAt (Camera.main.transform.position);
	}
}

• 菜单 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下新建一个empty的对象，挂在下面的脚本：

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

public class HealthBar : MonoBehaviour{
    public float health = 0.5f;

    private float resulthealth;
    private Transform father;

    private Rect healthbar;
    private Rect Add;
    private Rect Minus;

    void Start(){
        resulthealth = health;
        father = this.transform.parent.transform;
    }

    void OnGUI(){
        healthbar = new Rect(Screen.width / 2 + father.position.x * father.localScale.x * 30 - father.localScale.x * 50, 
        Screen.height / 2 + (father.position.z - father.localScale.y * 7) * father.localScale.z * 10, 
        father.localScale.x * 100, father.localScale.z * 10);
         
        Add = new Rect(Screen.width / 2 + father.position.x * father.localScale.x * 30 + father.localScale.x * 55, 
        Screen.height / 2 + (father.position.z - father.localScale.y * 7) * father.localScale.z * 9.5f, 
        father.localScale.x * 20, father.localScale.z * 10);
        
        Minus = new Rect(Screen.width / 2 + father.position.x * father.localScale.x * 30 - father.localScale.x * 75, 
        Screen.height / 2 + (father.position.z - father.localScale.y * 7) * father.localScale.z * 9.5f, 
        father.localScale.x * 20, father.localScale.z * 10);

        if (GUI.Button(Add, "+")){
            resulthealth = resulthealth + 0.1f > 1.0f ? 1.0f : resulthealth + 0.1f;
        }
        if (GUI.Button(Minus, "-")){
            resulthealth = resulthealth - 0.1f < 0.0f ? 0.0f : resulthealth - 0.1f;
        }

        health = Mathf.Lerp(health, resulthealth, 0.05f);
        GUI.HorizontalScrollbar(healthbar, 0, health, 0.0f, 1.0f);
    }
}

1. 把保存的场景HealthBar 和 HealthBar2分别拖入。
2. UGUI只需要直接将预置Ethan拖出放到合适的位置；IMGUI则要先拖出空的第三人称对象，并新建一个空子对象，然后将脚本挂在子对象上。

优点：

1. 对新手友好，不需要编写代码
2. 支持多模式，多摄像机渲染
3. 能直接在游戏场景中看出变化

缺点：

1. 操作复杂，步骤繁杂
2. 工作效率低，难以与接口对接

优点：

1. 操作简单，只需要写代码完成即可。
2. 直接渲染在屏幕前端；
3. 入门容易，同时帮助理解游戏引擎渲染的调用函数；

缺点：

1. 需要一定的编程能力
2. 无法直接看到游戏画面，需要慢慢调试
3. 无法直接渲染