中山大学3D游戏设计读书笔记 unity3D Note8

本文利用 IMGUI 和 UGUI实现简易血条的制作，可用于多种场景
游戏演示视频地址：http://www.iqiyi.com/w_19rzbjvggl.html
游戏具体代码地址：https://github.com/dick20/3d-learning/tree/master/homework8

一. 游戏要求

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

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

二. 设计过程

A.利用IMGUI实现血条制作

1.基础知识

Q: 什么是IMGUI？如何利用IMGUI设计UI界面？
A: “立即模式”GUI系统（也称为IMGUI）是Unity基于GameObject的主要UI系统的完全独立功能。IMGUI是一个代码驱动的GUI系统，主要用作程序员的工具。它由任何实现它的脚本调用OnGUI函数驱动。也就是通过我之前一直在UserUI脚本中使用的UI功能，包括文字，按钮，进度条等等元素。

Q: IMGUI主要用于什么功能？
A: 即时模式GUI系统通常用于：创建游戏中的调试显示和工具；为脚本组件创建自定义检查器；创建新的编辑器窗口和工具来扩展Unity本身。

2.设计步骤

确定血条实现的方式，这里我利用了DrawTexture函数，血条分成两张图片，黑色为底色，红色为表色，当血量减少时，红色减少就会露出黑色部分，故像血条的功能。

其次确定血条的位置，由于IMGUI的UI元素定位不能很直观的通过移动transform组件来改变，所以必须在函数中确定好血条的位置，这里我利用人物的三维位置转化为二维位置，将血条定位在Player玩家头上。

编写UI脚本在OnGUI函数中调用DrawTexture函数。

using UnityEngine;
using System.Collections;

public class PlayerHealth : MonoBehaviour
{
    private float HP = 1000;
    private Camera camera;
    public GameObject player;
    public Texture2D blood_red_texture;
    public Texture2D blood_black_texture;

    void Start()
    {
        camera = Camera.main;
    }

    void OnGUI()
    {
        if (this.transform.position.z < 9)
        {
            HP--;
        }
        else
        {
            HP++;
        }
        if (HP > 1000f)
        {
            HP = 1000f;
        }
        if (HP < 0.0f)
        {
            HP = 0.0f;
        }
        //3D坐标换算成2D坐标
        Vector3 worldPosition = new Vector3(this.transform.position.x, this.transform.position.y , this.transform.position.z);
        Vector2 position = camera.WorldToScreenPoint(worldPosition);

        Debug.Log(position);
        //Player的2D坐标
        position = new Vector2(position.x, Screen.height - position.y);
        //黑色血条的长宽
        Vector2 bloodSize = GUI.skin.label.CalcSize(new GUIContent(blood_red_texture));
        bloodSize.x -= 250;
        //红色血条宽度
        float blood_width = (bloodSize.x) * HP / 1000;
        //黑色血条
        GUI.DrawTexture(new Rect(position.x - (bloodSize.x / 2), position.y - bloodSize.y+420, bloodSize.x, 20), blood_black_texture);
        //红色血条,将黑色血条覆盖住
        GUI.DrawTexture(new Rect(position.x - (bloodSize.x / 2), position.y - bloodSize.y+420, blood_width, 20), blood_red_texture);
    }
    }

为了确定血条的运行功能，我在函数中设置玩家位于某一范围会自动扣血，而到达某一范围会自动补血，当然还可以扩展成碰撞到某些物体进行扣血，实现游戏的互动功能，这里暂时不细究。

血条的UI代码编写完毕后，还需要在界面构建场景，加入地面以及玩家。然后将脚本拖动至玩家身上，改变图片参数等等，就可以成功运行。

设置好的玩家Inspector属性如图所示：

游戏玩家移动的脚本如下：

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

public class playerControll : MonoBehaviour
{
    //移动玩家
    void Update()
    {
        float translationX = Input.GetAxis("Horizontal");
        float translationZ = Input.GetAxis("Vertical");
        this.transform.Translate(translationX * 4f * Time.deltaTime, 0, translationZ * 4f * Time.deltaTime);
        //this.transform.Rotate(0, translationX * 100f * Time.deltaTime, 0);

    }
}

血条效果图如下：
imgui

B.利用UGUI实现血条制作

1.基础知识

Q: 什么是UGUI？如何利用UGUI设计UI界面？
A: Unity GUI / UGUI 是面向对象的 UI 系统。所有 UI 元素都是游戏对象，有友好的图形化设计界面，在场景渲染阶段渲染这些 UI 元素。

Q: IMGUI主要用于什么功能？
A: 我们常用的有 Canvas，Text，Image，Button，Toggle，Slider，Scroll Bar，Scroll View，Input Field。

Q: UGUI 的优势?
A: 所见即所得（WYSIWYG）；设计工具支持多模式、多摄像机渲染；面向对象的编程

2.设计步骤

首先我们要在界面上创建Slider这个UI元素，然后发现发现组成滑动条有三个组件：Background，背景颜色；Fill Area，填充颜色；Handle SliderArea：滑动柄。而我们血条不需要活动柄，故可以直接删除。
第二步，修改Slider属性，选中Slider，在Inspector面板的组件Slider(Script)里修改Min Value与Max Value与Value=10的值。
第三步设计Slider背景色，选择FillArea部分下的Fill部分，在Inspector面板下找到Image(Script)组件修改Slider的颜色。
第四步调整Slider的大小范围，选择Fill Area，在Inspector面板中修改Rect Transform，将Left、Right的值为0。

通过这四步就完成血条的构建，我们可以通过点击Slider查看血条是否满意需求。现在要测试血条的功能，于是我编写了一个脚本测试血条的增减，这是通过改变Slider中的Value来改变的。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI; //注意一定要添加，否则会报错

public class testHP : MonoBehaviour {

    public int HP = 1000;
    public Slider HPStrip;    //添加血条Slider的引用

    void Start()
    {
        HPStrip.value = HPStrip.maxValue = HP;    //初始化血条
    }

    void Update()
    {
        if (this.transform.position.z < 9)
        {
            HPStrip.value--;
        }
        else
        {
            HPStrip.value++;
        }
    }
}

由于血条需要时刻面对着照相机，故我们还需要在Canvas中设置为World Space属性，并且将主相机拖动进Event Camera中，使其任何时候都面对主摄像机。

3. 实现预制，测试血条

将实现好的血条UI变为预制，下次使用的时候可以直接将预制拖动进玩家的子元素中。

血条实现效果如图：
show

三. 总结分析两种实现的优缺点

A.对于IMGUI实现血条方法

优点：

避免了 UI 元素保持在屏幕最前端。
IMGUI系统通常不打算用于玩家可能使用并与之交互的普通游戏内用户界面。故可以通过简单的几行代码就可以实现功能，方便程序员理解。

缺点:

改变时，不能直接方便看出变化，必须要运行才能查看结果，不方便调试。
定位血条位置较为复杂，需要将3维转为2维。

B.对于UGUI实现血条方法

优点：

所见即所得（WYSIWYG）设计工具。血条能直接在场景中调整位置，调整参数十分方便
多摄像机支持。支持通过其他摄像机一直将血条放入Game场景视图。
面向对象的编程。容易程序员调试与编写。

完成这个血条的设计，我收获了UI设计两种方法的优点缺点，如何调整Inspector以及通过代码来改变值实现血量的减少，如何UI与游戏对象的互动，对于游戏设计也有了更深一层的体验。

由于作者水平有限，如有任何错误请指出并讨论，十分感谢！
想了解更多关于3d游戏设计代码，可以点击我的Github一起学习。
Github地址：https://github.com/dick20/3d-learning