【Unity】在Unity中创建简单的UI界面
实现的效果为:设置一个触发盒子,当玩家触发后显示一个游戏结束界面,并结束游戏。

1、新建画布
在Hierarchy中新建一个Canvas。命名为Canvas。

双击刚才创建的画布Canvas。如果需要,可以调整其属性。默认情况下这个画布会铺满整个屏幕。

编辑UI时应该关掉特效,打开2D界面。(如下图所示)

2、新建背景
选中刚才创建的Canvas,在Canvas下新建一个UI-Image。命名为Background。这个组件用于设置UI的背景。

选中刚才创建的Background。通过调整数值令其铺满整个画布(Canvas)。
还可以通过更改其Image组件的Color属性更改其背景颜色。(如下图所示)

3、在背景上添加图片
右键刚才创建的背景,再新建一个UI-Image作为其子项,命名为Image。

点击新建的这个组件,为其添加图片。还可以调整其位置。(如下图所示)

效果如下所示。

4、为BackGround添加Canvas Group组件
UI开始的时候不能显示,所以应该设置成透明。
选中创建的背景Background,为其添加Canvas Group组件。在这个组件中将Alpha属性设置成0。
这样UI开始时就会是透明的。在需要用到的时候令其Alpha改变即可令其显示。

5、结束触发器以及显示UI
创建一个空组件,添加Box Collition组件,打开Is Trigger属性。

为这个空组件添加脚本,命名为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传入脚本中。

运行游戏,可以看到角色走到触发盒子中后,UI成功触发。
分类:
标签:
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步