作业要求
血条(Health Bar)的预制设计。具体要求如下
分别使用 IMGUI 和 UGUI 实现
使用 UGUI,血条是游戏对象的一个子元素,任何时候需要面对主摄像机
分析两种实现的优缺点
给出预制的使用方法
部署工作
IMGUI
思路:用HorizontalScrollbar(水平滚动条)的宽度作为血条的显示值。
代码:
public class IMGUI : MonoBehaviour
{
// 当前血量
public float health = 0.0f;
// 增/减后血量
private float resulthealth;
private Rect HealthBar;
private Rect HealthUp;
private Rect HealthDown;
void Start()
{
//血条区域
HealthBar = new Rect(50, 50, 200, 20);
//加血按钮区域
HealthUp = new Rect(105, 80, 40, 20);
//减血按钮区域
HealthDown = new Rect(155, 80, 40, 20);
resulthealth = health;
}
void OnGUI()
{
if (GUI.Button(HealthUp, "加血"))
{
resulthealth = resulthealth + 0.1f > 1.0f ? 1.0f : resulthealth + 0.1f;
}
if (GUI.Button(HealthDown, "减血"))
{
resulthealth = resulthealth - 0.1f < 0.0f ? 0.0f : resulthealth - 0.1f;
}
//插值计算health值,以实现血条值平滑变化
health = Mathf.Lerp(health, resulthealth, 0.05f);
// 用水平滚动条的宽度作为血条的显示值
GUI.HorizontalScrollbar(HealthBar, 0.0f, health, 0.0f, 1.0f);
}
}
resulthealth是为了用Mathf.Lerp插值计算health,以实现血条值平滑变化,而不是突变。
写好脚本后,在层次视图,Create -> Create Empty,重命名为IMGUI-H-Bar,然后将IMGUI.cs脚本拖到该对象,运行即可。运行成功后,在Assets中创建新文件夹Perfabs,将IMGUI-H-Bar对象拖到该文件夹中,即可生成预制体。
UGUI
根据题目要求,使用UGUI时,血条是游戏对象的一个子元素,所以需要先创建一个游戏对象,可以利用标准资源库中的Chaaracters,并构建基本场景。具体部署步骤如下:
1.添加Plane对象,将Characters中的ThirdPersonCharater预制体拖入场景,改名为Ethan。
2.选择Ethan添加画布子对象Canvas,再在Canvas添加子对象Slider作为血条子对象。
3.在Inspector视图设置Canvas的Render Mode为World Space,并修改Rect Transform的(PosX, PosY, Width, Height) 为 (0,2,160,20),Scale(x, y)为 (0.01,0.01)
4.展开Slider,禁灰Handle Slider Area和 Background,选择Fill Area的Fill,将Image组件的Color改为红色,
5.设置Slider的Rect Transform的Rotation为(0,180,0),MaxValue为1
6.给Canvas添加以下代码,使血条面对主摄像机
using UnityEngine;
public class LookAtCamera : MonoBehaviour {
void Update () {
this.transform.LookAt (Camera.main.transform.position);
}
}
7.给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;
}
}
最后,将Canvas对象拖入Perfabs文件夹,即可生成预制
优缺点
IMGUI
优点:IMGUI 的存在符合游戏编程的传统,在修改模型,渲染模型这样的经典游戏循环编程模式中,在渲染阶段之后,绘制UI界面无可挑剔;开发简单,仅需几行代码;
缺点:不支持可视化开发,并且UI始终位于所有3D对象的上方,无法实现在UI上添加3D模型的效果,难以调试。
UGUI
优点:面向对象的编程,支持多模式,多摄像机渲染,UI元素与游戏场景融为一体的交互;5.2版本之后,Unity逐渐将一部分UGUI的计算放到子线程去做,以此来缓解主线程的压力
缺点:UGUI如果人物太多,需要太多的Canvas。
预制的使用方法
血条实现展示
视频地址
https://www.bilibili.com/video/bv1aP4y1H7pq
代码地址
https://gitee.com/zipzhou/unity3dhw7
|