【Unity】在Unity中创建简单的UI界面
实现的效果为:设置一个触发盒子,当玩家触发后显示一个游戏结束界面,并结束游戏。
![](https://img2022.cnblogs.com/blog/2850043/202206/2850043-20220630195050932-741403481.png)
1、新建画布
在Hierarchy中新建一个Canvas。命名为Canvas。
![](https://img2022.cnblogs.com/blog/2850043/202206/2850043-20220630195117191-1274673802.png)
双击刚才创建的画布Canvas。如果需要,可以调整其属性。默认情况下这个画布会铺满整个屏幕。
![](https://img2022.cnblogs.com/blog/2850043/202206/2850043-20220630195147759-1542673420.png)
编辑UI时应该关掉特效,打开2D界面。(如下图所示)
![](https://img2022.cnblogs.com/blog/2850043/202206/2850043-20220630195331547-602772599.png)
2、新建背景
选中刚才创建的Canvas,在Canvas下新建一个UI-Image。命名为Background。这个组件用于设置UI的背景。
![](https://img2022.cnblogs.com/blog/2850043/202206/2850043-20220630195450603-708920503.png)
选中刚才创建的Background。通过调整数值令其铺满整个画布(Canvas)。
还可以通过更改其Image组件的Color属性更改其背景颜色。(如下图所示)
![](https://img2022.cnblogs.com/blog/2850043/202206/2850043-20220630195515627-259697545.png)
3、在背景上添加图片
右键刚才创建的背景,再新建一个UI-Image作为其子项,命名为Image。
![](https://img2022.cnblogs.com/blog/2850043/202206/2850043-20220630195707609-1113255709.png)
点击新建的这个组件,为其添加图片。还可以调整其位置。(如下图所示)
![](https://img2022.cnblogs.com/blog/2850043/202206/2850043-20220630195728927-1213233059.png)
效果如下所示。
![](https://img2022.cnblogs.com/blog/2850043/202206/2850043-20220630195751909-1592176198.png)
4、为BackGround添加Canvas Group组件
UI开始的时候不能显示,所以应该设置成透明。
选中创建的背景Background,为其添加Canvas Group组件。在这个组件中将Alpha属性设置成0。
这样UI开始时就会是透明的。在需要用到的时候令其Alpha改变即可令其显示。
![](https://img2022.cnblogs.com/blog/2850043/202206/2850043-20220630195827156-1312102939.png)
5、结束触发器以及显示UI
创建一个空组件,添加Box Collition组件,打开Is Trigger属性。
![](https://img2022.cnblogs.com/blog/2850043/202206/2850043-20220630195901243-326908807.png)
为这个空组件添加脚本,命名为GameEnding。代码如下:
using UnityEngine;
public class GameEnding : MonoBehaviour
{
bool PlayerAtExit = false;
public GameObject player;
//UI
public CanvasGroup backgroundImageCanvasGroup;
//显示UI的时间
public float disableImageDuration = 4.1f;
//透明度
float timer;
//更改透明度的时间
public float fadeDuration = 1.0f;
//触发器事件,传入控制的触发器
private void OnTriggerEnter(Collider other)
{
//如果进入触发器的时玩家
if (other.gameObject == player)
{
PlayerAtExit = true;
}
}
// Update is called once per frame
void Update()
{
if (PlayerAtExit)
{
EndLevel();
}
}
//结束关卡
void EndLevel()
{
timer += Time.deltaTime;
backgroundImageCanvasGroup.alpha = timer / fadeDuration;
if (timer > fadeDuration + disableImageDuration)
{
//退出应用(打包后生效)
Application.Quit();
//编辑器内退出
UnityEditor.EditorApplication.isPlaying = false;
}
}
}
将角色以及Background传入脚本中。
![](https://img2022.cnblogs.com/blog/2850043/202206/2850043-20220630195957393-1578452370.png)
运行游戏,可以看到角色走到触发盒子中后,UI成功触发。