Unity3D学习笔记（四）分别使用IMGUI和UGUI实现血条的预制设计

2022-06-23 11:18:22 浏览数 (1)

分别使用IMGUI和UGUI实现血条的预制设计

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

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

IMGUI实现

思路：用HorizontalScrollbar（水平滚动条）的宽度作为血条的显示值。 直接上代码：

代码语言：javascript复制
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);
    }
}

里面多了一个resulthealth，是为了用Mathf.Lerp插值计算health，以实现血条值平滑变化，而不是突变。

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

UGUI实现

因为要求使用 UGUI时，血条是游戏对象的一个子元素，所以需要先创建一个游戏对象，这里导入资源里面的Characters，并构建基本场景：

  • 菜单 Assets -> Import Package -> Characters，导入资源
  • 在层次视图，Create -> 3D Object -> Plane，添加 Plane 对象
  • 资源视图展开 Standard Assets :: Charactors :: ThirdPersonCharater :: Prefabs
  • 将 ThirdPersonController 预制拖入场景，改名为 Ethan
  • 检查以下属性
    • Plane 的 Transform 的 Position = (0,0,0)
    • Ethan 的 Transform 的 Position = (0,0,0)，Rotation = (0,180,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，在 Inspector 视图
    • 设置 Rect Transform 组件的Rotation = (0,180,0)
    • 设置Slider 组件的 MaxValue 为 1
  • 运行检查结果，发现人物运动时（用方向键控制），血条会跟着人物旋转，没有面对主摄像机
  • 故需要给 Canvas 添加以下脚本 LookAtCamera.cs
代码语言：javascript复制
using UnityEngine;

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

将脚本拖入Canvas对象，运行，这个时候血条就会一直面向主摄像机了。

接下来考虑血条值的变化，为了方便，利用IMGUI.cs中的按钮来交互。 先在脚本中新增一个变量：

代码语言：javascript复制
public Slider healthSlider;

在OnGUI函数中设置Slider的值：

代码语言：javascript复制
healthSlider.value = health;

改完后，把Canvas的子对象Slider拖入IMGUI-H-Bar对象的IMGUI.cs组件中的HealthSlider属性，运行，点击按钮就能实现两条血条同时增减血量。 同样，将Canvas对象拖入Perfabs文件夹，即可生成预制。

两种实现的优缺点

IMGUI

优点：

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

缺点：

  • 传统代码驱动的 UI 面临效率低下
  • 难以调试等

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

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

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

UGUI

  • 所见即所得（WYSIWYG）设计工具，设计师也能参与程序开发
  • 支持多模式、多摄像机渲染
  • UI 元素与游戏场景融为一体的交互
  • 面向对象的编程

预制的使用方法

  • 直接将IMGUI-H-Bar预制体拖入场景
  • 按照前面提到的方法导入资源，用预制体生成游戏对象Ethan，构建基本场景
  • 将Canvas预制体拖入到Ethan对象，成为其子对象
  • 将Canvas的子对象Slider拖入IMGUI-H-Bar对象的IMGUI.cs组件中的HealthSlider属性
  • 运行后点击增/减血按钮即可实现两种血条的同时增/减血

演示视频

canvas jqueryui gui css 游戏

0 人点赞