【Unity3d】UI系统

血条(Health Bar)的预制设计。

具体要求如下:

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

具体实现

IMGUI

按照步骤添加血条。

  • 步骤参考:使用IMGUI和UGUI实现人物血条

给 Canvas 添加脚本 LookAtCamera.cs,使血条跟着人物的旋转,始终面对着屏幕。

using UnityEngine;

public class LookAtCamera : MonoBehaviour {

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

UGUI

通过ONGUI中的HorizontalScrollbar组件来实现血条的操作。

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"));

    }
}

效果截图

【Unity3d】UI系统_第1张图片
【Unity3d】UI系统_第2张图片

IMGUI、UGUI的优缺点分析

IMGUI

优点:

  • 开发简单,仅需几行代码

缺点:

  • IMGUI需要在将3D位置映射到屏幕位置后,如果对结果进行加减,会使得血条位置偏移过多。

UGUI

优点:

  • 5.2版本之后,Unity逐渐将一部分UGUI的计算放到子线程去做,以此来缓解主线程的压力;
  • UGUI有锚点,更方便屏幕自适应。

缺点:

  • UGUI如果人物过多,需要太多的canvas

预制的使用方法

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

你可能感兴趣的:(Unity3D)