1、血条(Health Bar)的预制设计。具体要求如下
- 分别使用 IMGUI 和 UGUI 实现
- 使用 UGUI,血条是游戏对象的一个子元素,任何时候需要面对主摄像机
- 分析两种实现的优缺点
- 给出预制的使用方法
IMGUI
首先是IMGUI的实现,优先定义一个Health类型,用于管理血条。代码如下:
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class Health : MonoBehaviour
{
public float curHP;
public float nextHP;
public float fullHP = 100.0f;
private void Start() {
curHP = fullHP;
nextHP = fullHP;
}
private void Update() {
//Linear interpolation to make HP change smoothly
curHP = Mathf.Lerp(curHP, nextHP, 0.05f);
}
public void Hurt(){
nextHP = (curHP - 10.0f)>=0f?curHP-10.0f:0.0f;
}
public void Recover(){
nextHP = fullHP;
}
}
然后是开始实现IMGUI的内容,代码如下:
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
[RequireComponent(typeof(Health))]
public class IMGUI : MonoBehaviour
{
private GameObject Character;
private GameObject people;
private float curHP;
private float fullHP;
private void Start() {
Character = this.gameObject;
Character.AddComponent<Health>();
}
private void OnGUI() {
if(GUI.Button(new Rect(UnityEngine.Screen.width/2 - 50,UnityEngine.Screen.height/2 - 40,80,40),"Hurt"))
{
Character.GetComponent<Health>().Hurt();
}
if(GUI.Button(new Rect(UnityEngine.Screen.width/2 + 50,UnityEngine.Screen.height/2 - 40,80,40),"Recover"))
{
Character.GetComponent<Health>().Recover();
}
curHP = Character.GetComponent<Health>().curHP;
fullHP = Character.GetComponent<Health>().fullHP;
GUI.HorizontalScrollbar(new Rect(UnityEngine.Screen.width/2 - 42,UnityEngine.Screen.height/2 +20,170,20), 0.0f, curHP, 0.0f, fullHP);
}
}
UGUI
这一部分是按照老师讲的内容进行实现的,不过老师所给的有一些小问题,在这里我已经修改了。
具体实现步骤如下:
-
菜单 Assets -> Import Package -> Characters 导入资源(Characters资源是Unity的标准资源,新版本没有,自己去官网下)
-
在层次视图,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
-
运行检查效果,发现血条随人物旋转
然后内容就实现了,同时为了保持血条一直面对着摄像头,可以在characters上添加如下的代码。
using UnityEngine;
public class LookAtCamera : MonoBehaviour {
void Update () {
this.transform.LookAt (Camera.main.transform.position);
}
}
这样子血条就能够一直直面着摄像头了。
分析两种实现的优缺点
IMGUI:
- 如果不做复杂的界面,代码简单易用
- 在修改模型,渲染模型这样的经典游戏循环编程模式中,在渲染阶段之后,绘制 UI 界面无可挑剔
避免了 UI 元素保持在屏幕最前端,又有最佳的执行效率,一切控制掌握在程序员手中,这对早期计算和存储资源贫乏的游戏设备来说,更是弥足珍贵。
缺点:
- 传统代码驱动的 UI 开发效率低下,难以调试
UGUI:
优点:
- 为了让设计师也能参与参与程序开发,从简单的地图编辑器、菜单编辑器等工具应运而生。 设计师甚至不需要程序员帮助,使用这些工具就可直接创造游戏元素,乃至产生游戏程序。
- 所见即所得(WYSIWYG)设计工具
- 支持多模式、多摄像机渲染
- 面向对象的编程
给出预制的使用方法
对于预制的使用方法,对于IMGUI而言,只需要把脚本挂到对应的物体上就可以使用了。
对于UGUI而言,只需要把实现了血条的canvas保存下来需要的时候加载到对应的物体上面就可以了。