Unity制作血条

项目地址

演示视频

项目要求

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

项目配置

新建项目，将Assets文件替换为我项目中的Assets文件,Assets/Scenes/UGUIScenes和Assets/Scenes/IMGUIScenes，分别是两种方式实现的场景，拖入Hierarchy即可用

IMGUI实现血条

菜单 GameObject -> Create Empty，在游戏场景中创建一个空对象，修改名称为bloodBar_IMGUI

将如下脚本拖到bloodBar_IMGUI上，使用HorizontalScrollbar来完成血条预制的制作，通过修改它的size属性值来表示血量的多少，在OnGUI函数中，先是判断点击的是加血量还是减血量按钮，再将血量数值加1或减1，为了使血量的变化过程连贯流畅，用Math.Lerp插值计算血量值，以此避免血量突变：

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

public class IMGUIbloodBar : MonoBehaviour {
    public float curBlood = 5f;
    private float targetBlood = 5f;
    private Rect bloodBarArea;
    private Rect addButton;
    private Rect subButton;
    private int status = 0;//1:add -1:sub 0:不变

    void Start () {
        bloodBarArea = new Rect(Screen.width/2 - 80, Screen.height/2, 200, 50);
        addButton = new Rect(Screen.width/2 - 80,Screen.height/2 + 30, 40, 20);
        subButton = new Rect(Screen.width/2 + 80,Screen.height/2 + 30, 40, 20);
    }

    public void addBlood() {
        targetBlood = targetBlood + 1 > 10f? 10f : targetBlood + 1;
    }

    public void subBlood() {
        targetBlood = targetBlood - 1 < 0f? 0f : targetBlood - 1;
    }

    private void OnGUI() {
        if (GUI.Button(addButton, " + ")) status = 1;
        if (GUI.Button(subButton, " - ")) status = -1;
        if (status==1) {
            addBlood();
            status = 0;
        }
        else if (status==-1){
            subBlood();
            status = 0;
        }
        curBlood = Mathf.Lerp(curBlood, targetBlood, 0.1f);
        GUI.HorizontalScrollbar(bloodBarArea, 0f, curBlood, 0f, 10f);
    }
}

UGUI实现血条资源导入

菜单 GameObject -> 3D Object -> Plane，在游戏场景中创建一个plane，修改属性如下：
父对象人物预制使用的是Assets/Standard Assets/Charactors/ThirdPersonCharater/Prefabs/ThirdPersonController，为寻找方便，将其复制到Assets/Prefabs并重命名为Person。将人物预制(Assets/Prefabs/Person)拖入场景,将名称改为bloodBar_UGUI，修改属性如下：
修改Main Camera属性如下：

添加血条

选择 bloodBar_UGUI 用上下文菜单（鼠标右键） -> UI -> Canvas，添加画布子对象
选择 bloodBar_UGUI 的 Canvas，用上下文菜单 -> UI -> Slider，添加滑条作为血条子对象
选择 bloodBar_UGUI 的 Canvas，在 Inspector 视图做如下设置：
展开 Slider
- 选择 Handle Slider Area，禁灰（disable）该元素
- 选择 Fill Area 的 Fill，修改 Image 组件的 Color 为红色
选择Slider，在 Inspector 视图
- 设置Slider 组件的 MaxValue 为 1
- 设置Slider 组件的 Navigation 为 None

给 Canvas 添加以下脚本 LookAtCamera.cs，使血条任何时候面朝一个方向，从而达到面对摄像头的目的

using UnityEngine;

public class LookAtCamera : MonoBehaviour {

    void Update () {
        this.transform.rotation = Quaternion.LookRotation(new Vector3(0, 0, 1));
    }
}

效果展示

IMGUI实现血条

UGUI实现血条

两种实现的优缺点

IMGUI
- 优点：
  - IMGUI的存在符合游戏编程的传统，即使在今天它依然没有被官方宣判为遗留（将要淘汰的）系统（Legacy Systems）
  - 在修改模型，渲染模型这样的经典游戏循环编程模式中，在渲染阶段之后，绘制 UI 界面无可挑剔
  - 这样的编程即避免了 UI 元素保持在屏幕最前端，又有最佳的执行效率，一切控制掌握在程序员手中
- 缺点：
  - IMGUI系统通常不用于玩家可能使用并与之交互的普通游戏内用户界面，因其通过代码动态生成元素，每次调试都需要启动游戏观察，难以调试。
  - 传统代码驱动的 UI 面临效率低下
UGUI
- 优点：
  - 所见即所得（WYSIWYG）设计工具，设计师也能参与程序开发
  - 支持多模式、多摄像机渲染
  - UI 元素与游戏场景融为一体的交互
  - 面向对象的编程
- 缺点
  - 效率略低于IMGUI
  - 不符合游戏编程的传统

预制的使用方法

IMGUI完成的血条预制为bloodBar_IMGUI，拖放至场景中即可使用，可自由加减一定数量的血量。
UGUI完成的血条预制为bloodBar_UGUI，以人物预制(Assets/Prefabs/Person)作为父对象，拖放至场景中即可使用，用方向键控制人物移动，点击血条可修改血量。使用步骤如下：
- 菜单 GameObject -> 3D Object -> Plane，在游戏场景中创建一个plane，修改属性如下：
- 将血条预制bloodBar_UGUI拖入场景,修改属性如下：
- 修改Main Camera属性如下：

心得体会

复习了使用IMGUI编程
学习了使用UGUI制作游戏对象子元素
了解了两种实现方法的优缺点

Unity制作血条

Unity3D相关栏目本月热门文章