【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成功触发。

• 还没有人评论，欢迎说说您的想法！