在本教程中，您将：
- 使用 UI（用户界面）功能创建游戏结束屏幕
- 创建 GameEnding 触发器
- 编写自定义游戏结束脚本
✅ 设置UI
创建一个结尾，当 JohnLemon 逃离房屋时游戏实际上就完成了。
当 JohnLemon 到达出口时，游戏应该淡出并退出，但是您需要【注意】这一点：在 Unity Editor 中退出和在游戏的最终构建版本中退出是不同的。
首先，使游戏淡出。使用 Unity 的 UI（用户界面）系统。
- 在 Hierarchy 窗口中 Create > UI > Image。
- 在 Scene 窗口中，单击 2D 以启用 2D 模式
- 选择 Canvas 游戏对象。将鼠标光标置于 Scene 窗口上，并按 F 键。
- 选择 EventSystem ， Delete 掉。
EventSystem 游戏对象附带有一些组件，这些组件可协同工作以允许屏幕上的所有 UI 元素与用户输入进行交互。但是，本游戏中，玩家不必能够与 UI 进行交互，所以删掉。
✅ 配置画布 (Canvas)
将 Canvas 重命名为 FaderCanvas
它的 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 键编辑对象
这里发现为什么图像不在矩形工具所指示的位置？
这是因为 Scene 窗口正在使用您在上一教程中设置的【后期处理】。
禁掉 Post Processing 就可以了：
✅ 配置 Rect Transform 组件
Rect Transform 组件的位置不是相对于其父对象上的单个轴心点，而是相对于其父对象的一个区域。父对象的此区域由 Rect Transform 的锚点表示。
这个雪花一样的图标，实际是四个锚点组成的：
由四个锚点形成的矩形是父对象整体区域的一部分。
锚点是相对于其父级的：0 表示屏幕的最左侧或底部，1 表示屏幕的最右侧或顶部。
-
将 x 和 y 的最小值设置为 0。将 x 和 y 的最大值设置为 1。
image.png
上面的示例中，图像的左边与锚定区域的左边相距 394 像素；图像的右边与锚定区域的右边相距 942 像素；图像的顶边与锚定区域的顶边相距 487 像素；而图像的底边与锚定区域的底边相距 145 像素。
将 Left、Top、Right 和 Bottom 属性设置为 0，颜色设为黑色（0，0，0）。
将当前的 Image 对象重命名为 ExitImageBackground, 在ExitImageBackground下面新建 Image 对象重命名为 ExitImage：
为ExitImage添加一张图片：
来解决一个重要的问题：图像填充尽可能大的屏幕面积将看起来效果最佳，但是需要保持正确的宽高比。要查看此问题，请像先前对待父级一样调整 Rect Transform 的大小。
- 将 x 和 y 的最小值设置为 0。将 x 和 y 的最大值设置为 1
- 将 Left、Top、Right 和 Bottom 属性设置为 0
图片现在看起来已经拉伸了！
找到 Image Type 属性。启用 Preserve Aspect 复选框，这样可以使图像在 Rect Transform 内尽可能增大，但不会被压缩或拉伸。
✅ 添加 Canvas Group 组件
接下来，考虑如何在需要时使这些 UI 元素淡入和淡出。我们可以调整 Image 组件的 Alpha 值以使其淡出。但是，现在有两幅图像（ExitImageBackground和ExitImage），因此需要更改两种颜色，而不是仅更改一个值。为了完成此任务，提供了一个名为 Canvas Group 的组件。
选择 ExitImageBackground 游戏对象 | 添加一个 Canvas Group 组件 | 将 Alpha改为 0
在 Scene 窗口中禁用 2D 模式, 切回关卡。 选择 JohnLemon 游戏对象。将鼠标光标悬停在 Scene 视图上，按 F 键以进行聚焦。
保存场景。
接下来，您需要一种触发和控制 UI 淡入淡出的方式。
✅ 创建 GameEnding 触发器
Create | Create Empty,命名为 GameEnding ｜ Position 设置为 (18, 1, 1.5)，这个位置在【关卡出口的中间】。
为 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();
}
}
}
然后将 JohnLemon 游戏对象拖到的 Game Ending 的 Player 字段上。
将 ExitImageBackground 游戏对象拖到 Game Ending 的 Exit Background Image Canvas Group 字段上。Unity 将自动找到正确的组件来分配 Exit Background Image Canvas Group 变量。
保存场景。
