3D游戏编程设计作业八

本次作业五选一，我选择制作血条预制设计，要求如下

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

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

IMGUI实现

IMGUI的实现比较简单，直接用水平滚动条的宽度作为血条的显示值即可，使用一个临时变量记录变化的血值，通过两个Button实现对血值的修改，代码如下

using UnityEngine;

public class IMGUI : MonoBehaviour {
    public float blood;
    private float result;
    private Rect bloodBar;
    private Rect addBtn;
    private Rect downBtn;

    void Start () {
        // 初始化
        blood = 100;
        result = 100;
        bloodBar = new Rect((Screen.width - 350), 100, 200, 20);
        addBtn = new Rect((Screen.width - 350), 120, 60, 20);
        downBtn = new Rect((Screen.width - 200), 120, 60, 20);
    }

    void OnGUI () {
        if (GUI.Button(addBtn, "add"))
            result = blood + 10 > 100 ? 100 : blood + 10;
        if (GUI.Button(downBtn, "reduce"))
            result = blood - 10 < 0 ? 0 : blood - 10;
        GUI.color = new Color(1.0f, 0f, 0f, 0.5f);
        blood = Mathf.Lerp(blood, result, 0.05f);//更新血条
        GUI.HorizontalScrollbar(bloodBar, 0, blood, 0, 100);
    }
}

新建一个空的对象，将该脚本挂载在该对象上即可，完成后将该对象做成预制，效果如下

 

UGUI实现

首先使用游戏原有的资源导入一个人物和游戏的地面，直接从Assets中导入Characters和新建一个Plane,效果如下

该预设对象已经自带了脚本，可以通过上下左右键控制人物的移动，接下来给人物添加血条

接下来给玩家添加画布子对象如下

调整画布的位置和大小属性，让其和人物的位置保持在一个相对合理的距离，并将Render Mode设置为World Space

接下来给画布下添加一个滑条

修改滑条的颜色MaxValue等属性，将Handle Slider Area和Background两个元素禁灰（disable)

接下来要让血条任何时候都面向主摄像机，需要给Canvas添加一个脚本

using UnityEngine;

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

结合之前的IMGUI代码实现血量的改变，在先控制的代码中添加一个Slider变量，并改变其value值即可，将该变量设置成血条的画布即可

public Slider healthSlider;

此处我只在界面中改变其value值进行测试，效果如下

 

IMGUI和UGUI优缺点分析

由上述的例子很容易看出IMGUI和UGUI的区别

首先IMGUI完全有代码控制，符合游戏编程的传统，可以根据程序员的思维任意改变其样式，这样在修改模型，渲染模型这样的经典游戏循环编程模式中，在渲染阶段之后，绘制 UI 界面无可挑剔。这样的编程既避免了 UI 元素保持在屏幕最前端，又有最佳的执行效率，一切控制掌握在程序员手中

但是传统代码驱动的 UI 面临效率低下、难以调试等缺点

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

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

与IMGUI不同，UGUI是一种所见即所得的设计工具，代码开发门槛较低，并且支持多模式、多摄像机渲染，UI 元素与游戏场景融为一体的交互，是一种面向对象的编程模式

 

预设的使用方法

以上两种预设都已经挂载了相关脚本，可以直接从预设文件夹中拖出使用，还可以通过代码加载预设

Canvas canvas = Instantiate(Resources.Load("Prefabs/Canvas", typeof(Canvas)), Vector3.zero, Quaternion.identity, null) as Canvas;

GameObject gameObject = Instantiate(Resources.Load("Prefabs/HealthBar", typeof(GameObject)), Vector3.zero, Quaternion.identity, null) as GameObject;

完整代码见github