欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-02 09:32:42
...

UI系统实现简单的血条

作业要求

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

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

实验结果

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的操作,以至于一开始都一直报错说,空引用等等
相关标签: 3D GUI