unity3D学习8 UI系统

UI系统

---

作业要求

血条(Health Bar)的设计要求如下：

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

IMGUI实现

这次作业我是在上上次巡逻兵任务的基础上进行的。
IMGUI也就是Immediate Mode GUI，这个系统与Unity主要基于GameObject的UI系统不同。IMGUI是一个代码驱动(code-driven)的UI系统，他主要是程序员的调试工具。它是由脚本上的OnGui函数实现的。
在之前的作业中我们已经接触到过IMGUI的使用，接下来我们就用IMIGUI的方式来实现血条。
直接在现有的UserGUI.cs脚本上修改就可以了，我们使用水平滑动条来模拟血条，通过value值来模拟血量。水平滑动条的创建API如下：
function HorizontalScrollbar (position : Rect, value : float, size : float, leftValue : float, rightValue : float) : float

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

public class UserGUI : MonoBehaviour
{
    private IUserAction action;
    public delegate void Restart();
    public static event Restart OnRestart;

    void Start ()
    {
        action = SSDirector.GetInstance().CurrentScenceController as IUserAction;
    }
	
	void OnGUI ()
    {
        GUISkin skin = GUI.skin;
        skin.button.normal.textColor = Color.black;
        skin.horizontalScrollbar.normal.textColor = Color.red;
        skin.label.normal.textColor = Color.black;
        skin.button.fontSize = 20;
        skin.label.fontSize = 20;
        GUI.skin = skin;
        int life = action.GetLife();

        if(life > 0)
        {
            GUI.HorizontalScrollbar(new Rect(0, 5, Screen.width / 8, Screen.height / 32), 1.0f, 1.0f, 0.0f, 1.0f);
            GUI.Label(new Rect(0, Screen.height / 16, Screen.width / 8, Screen.height / 16), "Score:" + action.GetScore().ToString());
        }
        else
        {
            GUI.HorizontalScrollbar(new Rect(0, 5, Screen.width / 8, Screen.height / 32), 0.0f, 1.0f, 0.0f, 1.0f);
            GUI.Label(new Rect(Screen.width/2-60, Screen.height*5/16, 120, Screen.height / 8), "Game Over!");
            GUI.Label(new Rect(Screen.width/2-75, Screen.height*7/16, 200, Screen.height / 8), "Your score is:"+ action.GetScore().ToString());
            if (GUI.Button(new Rect(Screen.width * 3 / 8, Screen.height * 9 / 16, Screen.width / 4, Screen.height / 8), "Restart"))
            {
                OnRestart();
                action.ReStart();
                return;
            }
        }
    }
}

UGUI实现

基于UGUI的血条实现方式基本参照课件上的内容。
创建一个Canvas组件，并且将Render Mode改为World Space，然后再Canvas组件下创建一个Slider子组件。最后将这个Canvas改名为healthbar并拖入prefabs文件夹就创建了一个初步血条预制了。

然后将backgroud和Handle SLide Area都disable掉，再将Fill中的颜色修改为红色。

最后将Canvas的位置放到游戏对象的上方，并将滑动条的大小调节适中，就得到了以下效果。

HealthBar.cs脚本
我们可以使用LookAt函数来使得血条一直对着相机。但是如果我们将相机的坐标作为参数传入LookAt函数，在角色运动过程中血条就会像向日葵一样一直变化方向，这看起来也非常奇怪。所以我稍加修改，使得血条只是朝向相机所在xoy平面，这样效果会更自然一些。
HealthBar中同时获取了当前的场记信息，然后从场记那里得到当前角色的生命值。由于巡逻兵游戏中只有没被抓到和被抓到两个状态，所以血量就只存在0和100两个值。在之后其他游戏中如果有需要血量更多的变化，也非常容易改进。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class HealthBar : MonoBehaviour
{
    private FirstController SceneController;
    public Slider mySlider;
    // Start is called before the first frame update
    void Start()
    {
        SceneController = SSDirector.GetInstance().CurrentScenceController as FirstController;
    }

    // Update is called once per frame
    void Update()
    {
        int life = SceneController.GetLife();
        if (life == 1)
        {
            mySlider.value = 100;
        }
        else
        {
            mySlider.value = 0;
        }
        this.transform.LookAt(this.transform.position - new Vector3(0f, -2f, 1f));
    }
}

将这个脚本加入到healthbar预制下，并将Slider子组件拖到HealthBar.cs脚本中，这样就可以通过脚本修改Slider的值，从而改变血量。

优缺点分析

unity官方文档对IMGUI的描述如下
The Immediate Mode GUI system is commonly used for:

• Creating in-game debugging displays and tools.
• Creating custom inspectors for script components.
• Creating new editor windows and tools to extend Unity itself.

可以看到，官方对于IMGUI的定位就不是说把IMGUI用于游戏中正常的与用户交互的界面，它主要是用与程序员的调试工作。所以IMGUI主要是创建简单的交互界面。

UGUI是基于GameObject的UI系统，UGUI的主要优势有如下几点：

• 所见即所得（WYSIWYG）设计工具
• 支持多模式、多摄像机渲染
• 面向对象的编程

运行效果

完整工程文件请查看我的Github，如果有什么问题请及时指出，谢谢。