Unity3d

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

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

IMGUI实现

IMGUI，即时模式图形界面，它是代码驱动的UI系统，没有图形化设计界面，只能在OnGUI阶段用GUI系列的类绘制各种UI元素，因此UI元素只能浮在游戏界面上。

IMGUI主要应用于以下场景：

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

IMGUI系统通常不打算用于玩家可能使用并与之交互的普通游戏内用户界面。

步骤：

1. 创建空对象，命名为HealthSlider。

2. 创建脚本IMGUI.cs，主要的思路是在界面上生成两个按钮，分别为“加血”和“减血”，再生成一个HorizontalScrollbar（水平滚动条），用来作为血条的原型。每按下“加血”按钮，血条的值增加0.1，每按下“减血”按钮，血条的值减少0.1。最高血量值为1，最少为0.

   代码如下：

   using System.Collections;
   using System.Collections.Generic;
   using UnityEngine;
   
   public class IMGUI : MonoBehaviour {
       //血条位置
       private Rect healthPos; 
       //加血按钮位置
       private Rect upPos;
       //减血按钮位置
       private Rect downPos; 
       //当前血量
       private float health = 0.0f; 
       //加/减血之后的血量
       private float newHealth; 
   
       // Use this for initialization
       void Start () {
           healthPos = new Rect(200, 80, 100, 20);
           upPos = new Rect(100, 80, 40, 20);
           downPos = new Rect(150, 80, 40, 20);
           //开始的时候新的血量等于0
           newHealth = health;
       }
   
       // Update is called once per frame
       void Update () {
   
       }
       private void OnGUI()
       {
           if (GUI.Button(upPos, "加血"))
           {
               //血量最多为1，每次加0.1
               newHealth = health + 0.1f > 1.0f ? 1.0f : health + 0.1f;
           } else if (GUI.Button(downPos, "减血"))
           {
               //血量最低为0，每次减0.1
               newHealth = health - 0.1f < 0 ? 0.0f: health - 0.1f;
           }
           //用Mathf.Lerp()函数插值计算health，使得血条值平滑变化，而不是突变。
           health = Mathf.Lerp(health, newHealth, 0.05f);
           GUI.HorizontalScrollbar(healthPos, 0, health, 0, 1);
       }
   }
   

   3. 将脚本挂载到对象HealthSlider上，运行效果如下：

UGUI实现

UGUI 是面向对象的 UI 系统。所有 UI 元素都是游戏对象，友好的图形化设计界面， 可在场景渲染阶段渲染这些 UI 元素。

步骤：

1. 在层次视图，Context 菜单 -> 3D Object -> Plane 添加 Plane 对象

2. 在Asset Store中搜索Standard assets，导入资源，这里我们主要使用的是Character，不过最好把其他的也导入，不然可能会报错。有一些导入的cs脚本会报错，把那些脚本删掉就好。

3. 资源视图展开 Standard Assets :: Charactors :: ThirdPersonCharater :: Prefab

4. 将 ThirdPersonController 预制拖放放入场景，改名为 Ethan

5. 检查以下属性

   • Plane 的 Transform 的 Position = (0,0,0)
   • Ethan 的 Transform 的 Position = (0,0,0)
   • Main Camera 的 Transform 的 Position = (0,1,-10)

6. 运行检查效果，此时可以看到Ethan站在Plane的中心，从Game场景中看，视野良好。

7. 选择 Ethan 用上下文菜单 -> UI -> Canvas, 添加画布子对象

8. 选择 Ethan 的 Canvas，用上下文菜单 -> UI -> Slider 添加滑条作为血条子对象

9. 运行检查效果

10. 选择 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)

11. 运行检查效果，此时可以看到头顶 Slider 的 Ethan，用键盘移动 Ethan，可以看到血条随着人物移动。

12. 展开 Slider

    • 选择 Handle Slider Area，禁灰（disable）该元素
    • 选择 Background，禁灰（disable）该元素
    • 选择 Fill Area 的 Fill，修改 Image 组件的 Color 为 红色

13. 选择 Slider 的 Slider 组件

    • 设置 MaxValue 为 100
    • 设置 Value 为 75

14. 运行检查效果，发现血条变为红色，随人物旋转。

15. 为了使血条始终对着屏幕，给 Canvas 添加以下脚本 LookAtCamera.cs：

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

public class LookAtCamera : MonoBehaviour
{
    // Start is called before the first frame update
    void Start()
    {
        
    }

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

效果如下：

分析两种实现的优缺点

IMGUI

优点：

• IMGUI 符合游戏编程的传统
• 在修改模型，渲染模型这样的经典游戏编程模式中，在渲染阶段之后，绘制UI界面无可挑剔。
• 这样的编程既避免了UI元素保持在屏幕最前端，又有最佳的执行效率，一切控制掌握在程序员手中，这对早期计算和存储资源贫乏的游戏设备来说，更是弥足珍贵。
• 适用于以下场景：
  • 在游戏中创建调试显示工具
  • 为脚本组件创建自定义的 Inspector 面板
  • 创建新的编辑器窗口和工具来扩展 Unity 环境

缺点：

• 它是代码驱动的 UI 系统，没有图形化设计界面，只能在 OnGUI 阶段用 GUI 系列的类绘制各种 UI 元素，因此 UI元素只能浮在游戏界面之上。
• 开发效率低下，难以调试。
• IMGUI系统通常不适用于玩家可能使用并与之交互的普通游戏内用户界面。

UGUI

优点：

• UGUI 是面向对象的 UI 系统。所有 UI 元素都是游戏对象，友好的图形化设计界面， 可在场景渲染阶段渲染这些 UI 元素。
• 设计师甚至不需要程序员帮助，使用这些工具就可直接创造游戏元素，乃至产生游戏程序。
• 跨设备执行，自动适应不同分辨率
• UI 元素与游戏场景融为一体的交互
• 支持复杂的布局
• 所见即所得（WYSIWYG）设计工具
• 支持多模式、多摄像机渲染
• 面向对象的编程

预制的使用方法

• 在Assets文件夹中创建Prefabs文件夹
• 将IMGUI的HealthSlider拖入Prefabs文件夹中，此时HealthSlider就变成了预制体
• 将Canvas拖入Prefabs文件夹中，此时Canvas也变成了预制体
• prefab只有两种使用方法，一是在代码里调用Instantiate；另一种是拖到场景里产生一个和他关联的物体（在Hierarchy里显示蓝色）。

视频链接

github地址