3d学习笔记（八）——IMGUI和UGUI实现简单血条

UI系统实现简单的血条

作业要求

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

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

---

实验结果

• 视频地址
• github代码

IMGUI部分

主体关于血条的制作，都是参考老师讲课的课件来实现的，具体的实现步骤如下：

组件操作

• 菜单 Assets -> Import Package -> Characters 导入资源
• 在层次视图，Context 菜单 -> 3D Object -> Plane 添加 Plane 对象
• 资源视图展开 Standard Assets :: Charactors :: ThirdPersonCharater :: Prefab
• 将 ThirdPersonController 预制拖放放入场景，改名为 Ethan
• 检查以下属性
  
  • Plane 的 Transform 的 Position = (0,0,0)
  • Ethan 的 Transform 的 Position = (0,0,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 的 Ethan，用键盘移动 Ethan，观察
• 展开 Slider
  
  • 选择 Handle Slider Area，禁灰（disable）该元素
  • 选择 Background，禁灰（disable）该元素
  • 选择 Fill Area 的 Fill，修改 Image 组件的 Color 为 红色
• 选择 Slider 的 Slider 组件
  
  • 设置 MaxValue 为 100
  • 设置 Value 为 75
• 运行检查效果，发现血条随人物旋转

添加脚本

• 给 Canvas 添加以下脚本 LookAtCamera.cs

using UnityEngine;

public class LookAtCamera : MonoBehaviour {

    void Update () {
        this.transform.LookAt (Camera.main.transform.position);
    }
}

作用：使血条跟着人物的旋转，始终面对着屏幕

• 给Slider添加脚本

using UnityEngine;
using System.Collections;
using UnityEngine.UI; // Required when Using UI elements.

public class Example : MonoBehaviour
{
    public Slider mainSlider;
    public float HP;

    private void Start()
    {
        //mainSlider.value = mainSlider.maxValue;
        mainSlider = GetComponent<Slider>();
        HP = mainSlider.maxValue;
    }

    void OnGUI()
    {
        if( GUI.Button(new Rect(300,200,80, 40), "红方加血")) {
            HP += 10;
        }
        if (GUI.Button(new Rect(300, 300, 80, 40), "红方减血")) {
            HP -= 10;
        }

        if (HP > 100) HP = 100;
        else if (HP < 0) HP = 0;

        mainSlider.value = HP;
    }
}

作用：通过得到Slider的脚本Slider，通过修改当中的value的值，来进行血量的增减操作。（有坑点，最后说明）

UGUI部分

该部分比较简单，主要是通过ONGUI中的HorizontalScrollbar组件来实现血条的操作的，具体的代码如下：

using UnityEngine;
using System.Collections;

public class BloodBarTest : MonoBehaviour
{
    public GUISkin theSkin;
    public float bloodValue = 0.0f;
    private float tmpValue = 1.0f;
    private Rect rctBloodBar;
    private Rect rctUpButton;
    private Rect rctDownButton;
    private bool onoff;

    void Start()
    {
        //血条或者进度条-横向  
        GameObject obj = Instantiate(Resources.Load("prefabs/Blood")) as GameObject;
        GameObject par = GameObject.Find("Red");
        obj.transform.SetParent(par.transform);
        //obj.transform.position = new Vector3(3, 0, 0);
        //obj.transform.name = "ThirdPersonController";

        rctBloodBar = new Rect(450, 450, 150, 10);
        rctUpButton = new Rect(800, 200, 80, 40);
        rctDownButton = new Rect(800, 300, 80, 40);

    }

    void OnGUI()
    {
        GameObject obj = GameObject.Find("Black");
        Vector3 pos = obj.transform.position;
        //Debug.Log(pos);
        GUI.skin = theSkin;
        if (GUI.Button(rctUpButton, "黑方加血"))
        {
            tmpValue += 0.1f;
        }
        if (GUI.Button(rctDownButton, "黑方减血"))
        {
            tmpValue -= 0.1f;
        }
        if (tmpValue > 1.0f) tmpValue = 1.0f;
        if (tmpValue < 0.0f) tmpValue = 0.0f;

        Vector3 pos1 = pos + new Vector3(0.0f, 0.5f, 0.0f);
        Vector3 wpos = Camera.main.WorldToScreenPoint(pos);

        GUI.HorizontalScrollbar(new Rect(wpos.x-80, wpos.y,150, 10), 0.0f, tmpValue, 0.0f, 1.0f, GUI.skin.GetStyle("horizontalscrollbar"));

    }
}

IMGUI跟UGUI的区别

• IMGUI的组件需要放置在游戏对象下面，作为游戏对象的一个子对象
• UGUI无需，直接定位到所要的位置即可

坑点

• 其实用UGUI比起IMGUI感觉简单多了，虽然IMGUI老师给了教程，但是关于如何进行血条的增减操作部分是没有的，网上给出了千篇一律的同种解决方案，不过是一个大坑，里面都是少了GetComponent的操作，以至于一开始都一直报错说，空引用等等