Unity练习2 - 《John Lemon's Haunted

在本教程中，您将：

• 使用 UI（用户界面）功能创建游戏结束屏幕
• 创建 GameEnding 触发器
• 编写自定义游戏结束脚本

✅ 设置UI

创建一个结尾，当 JohnLemon 逃离房屋时游戏实际上就完成了。

当 JohnLemon 到达出口时，游戏应该淡出并退出，但是您需要【注意】这一点：在 Unity Editor 中退出和在游戏的最终构建版本中退出是不同的。

首先，使游戏淡出。使用 Unity 的 UI（用户界面）系统。

• 在 Hierarchy 窗口中 Create > UI > Image。
• 在 Scene 窗口中，单击 2D 以启用 2D 模式
• 选择 Canvas 游戏对象。将鼠标光标置于 Scene 窗口上，并按 F 键。

image.png

• 选择 EventSystem ， Delete 掉。

EventSystem 游戏对象附带有一些组件，这些组件可协同工作以允许屏幕上的所有 UI 元素与用户输入进行交互。但是，本游戏中，玩家不必能够与 UI 进行交互，所以删掉。

✅ 配置画布 (Canvas)

将 Canvas 重命名为 FaderCanvas

image.png

它的 Transform 组件不同于之前看到的。UI 系统的游戏对象需要更好地控制其位置，因此具有 Rect Transform 组件。对于位于 UI 层级视图根部的 Canvas，Rect Transform 设置为只读。

➡️ Render Mode

Canvas 组件可以控制如何渲染属于该 Canvas 的 UI 元素。此渲染主要由 Render Mode 设置进行控制。

渲染具有三种可能的模式：

• Screen Space - Overlay，在这种模式下，画布将填充屏幕，画布的所有 UI 元素都会渲染在其他所有元素之上

• Screen Space - Camera，在这种模式下，画布将填充屏幕，但会渲染到特定摄像机，并受到与摄像机的距离的影响

• World Space，在这种模式下，UI 存在于场景中，并渲染到其他对象的前面或后面（例如，3D 世界中角色上方的名称标签）

我们需要在屏幕上拉伸图像，并将其渲染到其他所有元素之上, Screen Space - Overlay就很合适。

➡️ Canvas Scaler 组件

当 UI 元素在不同大小的屏幕上显示时，通过这个组件可以轻松控制 UI 元素的相对大小。图像会在整个屏幕上拉伸，因此无需担心其相对比例。

这里先Remove掉这个组件。

➡️ Graphic Raycaster 组件

这个组件用于检测 UI 事件，例如点击。
本游戏中，玩家不会与 UI 进行互动，因此不需要此组件，Remove掉。

✅ 拉伸图像

选择 Image 游戏对象 ｜ 选择矩形工具 (Rect Tool)，或按 T 键编辑对象

image.png

这里发现为什么图像不在矩形工具所指示的位置？

这是因为 Scene 窗口正在使用您在上一教程中设置的【后期处理】。

image.png

禁掉 Post Processing 就可以了：

image.png

✅ 配置 Rect Transform 组件

Rect Transform 组件的位置不是相对于其父对象上的单个轴心点，而是相对于其父对象的一个区域。父对象的此区域由 Rect Transform 的锚点表示。

这个雪花一样的图标，实际是四个锚点组成的：

image.png

由四个锚点形成的矩形是父对象整体区域的一部分。

image.png

锚点是相对于其父级的：0 表示屏幕的最左侧或底部，1 表示屏幕的最右侧或顶部。

• 将 x 和 y 的最小值设置为 0。将 x 和 y 的最大值设置为 1。

  
  image.png

上面的示例中，图像的左边与锚定区域的左边相距 394 像素；图像的右边与锚定区域的右边相距 942 像素；图像的顶边与锚定区域的顶边相距 487 像素；而图像的底边与锚定区域的底边相距 145 像素。

image.png

将 Left、Top、Right 和 Bottom 属性设置为 0，颜色设为黑色（0，0，0）。

image.png

将当前的 Image 对象重命名为 ExitImageBackground, 在ExitImageBackground下面新建 Image 对象重命名为 ExitImage：

image.png

为ExitImage添加一张图片：

image.png

来解决一个重要的问题：图像填充尽可能大的屏幕面积将看起来效果最佳，但是需要保持正确的宽高比。要查看此问题，请像先前对待父级一样调整 Rect Transform 的大小。

• 将 x 和 y 的最小值设置为 0。将 x 和 y 的最大值设置为 1
• 将 Left、Top、Right 和 Bottom 属性设置为 0

image.png

图片现在看起来已经拉伸了！

image.png

找到 Image Type 属性。启用 Preserve Aspect 复选框，这样可以使图像在 Rect Transform 内尽可能增大，但不会被压缩或拉伸。

image.png

✅ 添加 Canvas Group 组件

接下来，考虑如何在需要时使这些 UI 元素淡入和淡出。我们可以调整 Image 组件的 Alpha 值以使其淡出。但是，现在有两幅图像（ExitImageBackground和ExitImage），因此需要更改两种颜色，而不是仅更改一个值。为了完成此任务，提供了一个名为 Canvas Group 的组件。

image.png

选择 ExitImageBackground 游戏对象 | 添加一个 Canvas Group 组件 | 将 Alpha改为 0

在 Scene 窗口中禁用 2D 模式, 切回关卡。 选择 JohnLemon 游戏对象。将鼠标光标悬停在 Scene 视图上，按 F 键以进行聚焦。

image.png

保存场景。

接下来，您需要一种触发和控制 UI 淡入淡出的方式。

✅ 创建 GameEnding 触发器

Create | Create Empty,命名为 GameEnding ｜ Position 设置为 (18, 1, 1.5)，这个位置在【关卡出口的中间】。

image.png

为 GameEnding 添加Box Collider 组件 ｜ 启用 Is Trigger ,这会将碰撞体变成触发器。

调整触发器的大小，将 (Size) 设置为 (1, 1, 3.5)，使其覆盖出口 — JohnLemon 需要走进这个出口才能逃出。

➡️ 创建 “GameEnding” 脚本挂载到GameEnding 游戏对象上

public class GameEnding : MonoBehaviour
{
    public float fadeDuration = 1f;  // 淡入淡出的默认值为1秒
    public float displayImageDuration = 1f;

    public GameObject player; // 玩家
    public CanvasGroup exitBackgroundImageCanvasGroup;
    bool m_IsPlayerAtExit;
    float m_Timer; // 需要一个计时器来确保游戏在淡入淡出之前不会结束

    void OnTriggerEnter(Collider other)
    {// 监听触发器callback
        if (other.gameObject == player)
        {
            m_IsPlayerAtExit = true; // 发生触发
        }
    }

    void Update()
    {
        if (m_IsPlayerAtExit)
        {
            this.EndLevel();
        }
    }

    void EndLevel()
    {
        //获取从上一帧以来经过的时间的方式：使用 Time.deltaTime
        m_Timer += Time.deltaTime;
        // 设置 Canvas Group 的 Alpha
        exitBackgroundImageCanvasGroup.alpha = m_Timer / fadeDuration;
        if (m_Timer > fadeDuration + displayImageDuration)
        {
            // 当计时器值大于持续时间时，淡入淡出将结束
            // 该方法确实可以退出游戏，但仅适用于完全构建的应用程序
            // 目前在Unity Editor中没有效果
            Application.Quit();
        }
    }
}

image.png

然后将 JohnLemon 游戏对象拖到的 Game Ending 的 Player 字段上。
将 ExitImageBackground 游戏对象拖到 Game Ending 的 Exit Background Image Canvas Group 字段上。Unity 将自动找到正确的组件来分配 Exit Background Image Canvas Group 变量。

保存场景。