UI系统作业

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

• 分别使用 IMGUI 和 UGUI 实现

• 使用 UGUI，血条是游戏对象的一个子元素，任何时候需要面对主摄像机

• 分析两种实现的优缺点

• 给出预制的使用方法

IMGUI实现

我们先来看用IMGUI实现血条。我们直接用水平滚动条的宽度作为血条的显示值，用临时变量temp计算变化的血量，用两个button来修改血量。如下：

using UnityEngine;

public class healthBar : MonoBehaviour
{
    public float blood;
    private float temp;
    private Rect bloodBar;
    private Rect addBtn;
    private Rect downBtn;

    void Start()
    {
        // Initialize
        blood = 100;
        temp = 100;
        bloodBar = new Rect((Screen.width - 350), 100, 200, 20);
        addBtn = new Rect((Screen.width - 350), 120, 60, 20);
        downBtn = new Rect((Screen.width - 200), 120, 60, 20);
    }

    void OnGUI()
    {
        if (GUI.Button(addBtn, "+"))
            temp = blood + 10 > 100 ? 100 : blood + 10;
        if (GUI.Button(downBtn, "-"))
            temp = blood - 10 < 0 ? 0 : blood - 10;
        GUI.color = new Color(1.0f, 0f, 0f, 0.5f);
        blood = Mathf.Lerp(blood, temp, 0.05f);
        GUI.HorizontalScrollbar(bloodBar, 0, blood, 0, 100);
    }
}

然后，将脚本挂载到一个新建的空对象上即可。最后将该对象拖到asset中，做成预制，如下：

 

 

UGUI实现

接下来我们来看UGUI的实现。首先，我们在asset store下载standard assets中的characters，将预制ethan作为新对象创建。再新建一个plane，整体效果如下：

 该standard asssets中的人物ethan以及写好了控制人物移动的脚本，我们只需添加血条，具体过程如下：

为ethan添加canvas子对象，并调整位置和大小，再将render mode设为world space：

然后为canvas再添加一个slider子对象，并禁用slider的handle slider area和background

，如下：

接下来，给canvas添加一个脚本LookAtCamera，使其始终面对主相机：

using UnityEngine;
 
public class LookAtCamera : MonoBehaviour
{
    void Update()
    {
        this.transform.LookAt(Camera.main.transform.position);
    }
}

接下来，修改slider组件的a属性，并将fill中的image改为红色：

最后，我们通过调节slider中的value值即可实现血条的调节。

效果如下：

 优缺点分析

IMGUI：

IMGUI符合传统游戏编程把程序主动权掌握在编写代码的程序员手中，避免了UI元素在前端的更改，且执行效率高，渲染效果好。但其调试相对比较困难，维护成本高，且不利于设计布局，渲染速度慢。

UGUI:

UGUI具有可视化，易于设计和布局，支持多模式、多摄像机渲染和UI元素与游戏场景融汇式交互的优点，但其缺点为学习成本高且对对设备要求更高。

预制的使用方法

对于IMGUI:

直接将预制体对象拖入场景或直接用脚本导入。

对于UGUI:

1. 将Canvas预制体拖入场景，成为游戏对象的子对象
2. 将Canvas的子对象Slider拖入脚本组件的Slider对象中