项目地址:https://github.com/lurui7/3D-Game/tree/master/UI
要求
血条(Health Bar)的预制设计。具体要求如下
- 分别使用 IMGUI 和 UGUI 实现
- 使用 UGUI,血条是游戏对象的一个子元素,任何时候需要面对主摄像机
- 分析两种实现的优缺点
- 给出预制的使用方法
IMGUI实现
预制
制作一个红色cube作为血条。
然后就是脚本控制血条的位置,并且我添加两个button用来加减血量。
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class healthBar : MonoBehaviour
{
float padding = 0;
public Transform t;
// Start is called before the first frame update
void Start(){ }
// Update is called once per frame
void Update()
{
this.transform.position = new Vector3(t.position.x-padding, t.position.y + 2, t.position.z);
}
private void OnGUI()
{
//加血
if (GUI.Button(new Rect(250, 50, 40, 20), "+"))
{
padding -= 0.05f;
transform.localScale = new Vector3(transform.localScale.x + 0.1f, transform.localScale.y, transform.localScale.z);
}
//扣血
if (GUI.Button(new Rect(250, 70, 40, 20), "-"))
{
if (transform.localScale.x > 0)
{
padding += 0.05f;
transform.localScale = new Vector3(transform.localScale.x - 0.1f, transform.localScale.y, transform.localScale.z);
}
}
}
}
结果展示
将以上脚本挂载在预制的cube上,并且把人物Ethan作为共有变量以确定血条的位置。
UGUI实现
步骤
任意创建一个对象,作为血条的拥有者(这里参考老师博客,使用官方ThirdPersonController 预制)。
然后给它添加canvas画布子对象,添加 Slider 作为我们的血条主体。这里需要调整位置,让血条处于人物头顶。
接下来,将 Slider 中的 Handle Slider Area 、 Background 禁用,并且设置Fill的Image组件颜色为红色,调整Slider 组件的MaxValue 为 100、Value 为 75。
这时,可以看到血条基本成型,但是会随着人物的移动而转向。
所以,给 Canvas 添加以下脚本 LookAtCamera.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class LookAtCamera : MonoBehaviour {
void Update () {
this.transform.LookAt (Camera.main.transform.position);
}
}
这就能使血条始终面向屏幕了。
使用方法
只需要勾选Canvas或者healthBar,二者分别是UGUI和IMGUI实现。
两种实现方法的比较
IMGUI
实现简单,可以用代码来控制对象的行为,所有的操作都是由程序员定义的。当然,这种情况下有一个缺点就是对象之间的关系需要不断调整,如果需要移植等情况又要重新调整,无疑是很麻烦的。
UGUI
内容都是直观调整的,对应IMGUI中的对象,UGUI中都可以在不同的视图中调整,不需要进行编程。当然,他的问题就是使用者需要熟悉工具的使用,掌握各个属性的作用等等。