unity3D学习8
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,如果有什么问题请及时指出,谢谢。