简易血条制作

具体要求

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

制作过程

IMGUI实现

使用HorizontalScrollbar实现血条的制作

using UnityEngine;

public class IMGUI : MonoBehaviour
{
    // 当前血量
    public float health = 0.0f;
    // 增/减后血量
    private float resulthealth;

    private Rect HealthBar;
    private Rect HealthUp;
    private Rect HealthDown;

    void Start()
    {
        //血条区域
        HealthBar = new Rect(50, 50, 200, 20);
        //加血按钮区域  
        HealthUp = new Rect(105, 80, 40, 20);
        //减血按钮区域
        HealthDown = new Rect(155, 80, 40, 20);
        resulthealth = health;
    }

    void OnGUI()
    {
        if (GUI.Button(HealthUp, "加血"))
        {
            resulthealth = resulthealth + 0.1f > 1.0f ? 1.0f : resulthealth + 0.1f;
        }
        if (GUI.Button(HealthDown, "减血"))
        {
            resulthealth = resulthealth - 0.1f < 0.0f ? 0.0f : resulthealth - 0.1f;
        }

        //插值计算health值，以实现血条值平滑变化
        health = Mathf.Lerp(health, resulthealth, 0.05f);

        // 用水平滚动条的宽度作为血条的显示值
        GUI.HorizontalScrollbar(HealthBar, 0.0f, health, 0.0f, 1.0f);
    }
}

写好脚本后，在层次视图，Create -> Create Empty，重命名为IMGUI-H-Bar，然后将IMGUI.cs脚本拖到该对象，运行即可。运行成功后，在Assets中创建新文件夹Perfabs，将IMGUI-H-Bar对象拖到该文件夹中，即可生成预制体。

运行效果如图：

UGUI实现

因为要求使用 UGUI时，血条是游戏对象的一个子元素，所以需要先创建一个游戏对象，在这里我使用一个胶囊体代替游戏对象，并构建基本场景：

• 菜单 Assets -> Import Package -> Characters，导入资源
• 在层次视图，Create -> 3D Object -> Plane，添加 Plane 对象
• 在层次视图，Create -> 3D Object -> Capsule，添加 Capsule 对象
• 检查以下属性
  • Plane 的 Transform 的 Position = (0,0,0)
  • Capsule 的 Transform 的 Position = (0,0,0)，Rotation = (0,180,0)
  • Main Camera 的 Transform 的 Position = (0,1,-10)
• 运行检查效果

这样就完成了资源的导入，接下来就是给人物加上血条，步骤如下：

• 选择 Capsule用上下文菜单（鼠标右键） -> UI -> Canvas，添加画布子对象
• 选择 Capsule的 Canvas，用上下文菜单 -> UI -> Slider，添加滑条作为血条子对象
• 选择 Capsule的 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，在 Inspector 视图
• 设置 Rect Transform 组件的Rotation = (0,180,0)
• 设置Slider 组件的 MaxValue 为 1
• 运行检查结果，发现人物运动时（用方向键控制），血条会跟着人物旋转，没有面对主摄像机
• 故需要给 Canvas 添加以下脚本 LookAtCamera.cs

using UnityEngine;

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

至此，一个面对摄像机的简易血条就做好了。将capsule拖入预制文件夹即可完成预制。效果图如下：

两种实现的优缺点

IMGUI

优点：

• IMGUI 的存在符合游戏编程的传统
• 在修改模型，渲染模型这样的经典游戏循环编程模式中，在渲染阶段之后，绘制 UI 界面无可挑剔
• 这样的编程既避免了 UI 元素保持在屏幕最前端，又有最佳的执行效率，一切控制掌握在程序员手中

缺点：

• 传统代码驱动的 UI 面临效率低下
• 难以调试
• 难以完成复杂的任务

UGUI

优点：

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

预制体使用方法

直接从prefabs文件夹拖入场景即可