Unity暑期萌新入门：通关界面篇
作者：Truly
大渣好，由于某些不可抗拒的原（jie）因（kou）导致这个系列很久没更新，深深知错的我现在回来了！
在上一篇中我们设置了摄像头跟随，现在John可以在鬼屋里自由地行走了。这一篇，我们将在出口附近设置触发器，并且通过制作游戏通关的结束界面来了解UI的基础知识。当John到进入触发器时，会渐渐显示一幅通关的提示图片。这一篇我们将分三个部分进行：设置UI、创建触发器和编写脚本。
一、设置UI
通关的提示界面分为背景图（黑色）和前景图（主角），我们先从背景图开始入手设置。
1.添加Image GameObject
Hierarchy窗口里会显示游戏场景中的GmaeObject，同时我们也可以在Hierarchy窗口里创建所有的基础GameObject(对象)。
(1) 在Hierarchy窗口中，点击Create > UI > Image，创建Image（图片）GameObject。创建完成后，在Hierarchy窗口会里出现Canvas、EnentSystem和Image。
(2) 选中Canvas，按F2重命名为FaderCanvas。Canvas相当于一张透明画纸，我们的UI元素都会在其上边绘制（作为子对象）。
2.删除不需要的GameObject(对象)和Component(组件)
(1)EventSystem GameObject：用于UI与用户输入交互，我们的通关界面没有交互功能，因此可以把EventSystem删除。
在Hierarchy窗口选中EventSystem，右键 > Delete。
(2)Canvas Scaler (Script)组件：控制UI元素在不同尺寸的屏幕上显示大小。由于我们这次的UI是跟一张覆盖全屏的图，所以不需要这个组件。
在Hierarchy窗口选中Canvas，在Inspector窗口中找到Canvas Scaler组件，点击右上角小齿轮 > Remove Component。
(3)Graphic Raycaster (Script)组件：用于检测UI的点击事件，由于这个游戏没有UI的点击事件，因此可以删除。
在Hierarchy窗口选中Canvas，在Inspector窗口中找到Graphic Raycaster组件，点击右上角小齿轮 > Remove Component。
3.简析相关组件
（1）Rect Transform
在Canvas和Image GameObject的Inspector窗口中，我们可以看到Rect Transform组件，它与控制UI的位置有关。
Achors（锚点）：显示为四个空心三角形，蓝色实心点到对应锚点的距离不变。
Pivot(轴心点)：蓝色空心圆，UI都是绕着轴心旋转和缩放。
（2）设置Canvas组件
Canvas组件的Render Mode(渲染模式)选择Screen Space- Overlay：
这个模式Canvas会拉伸覆盖整个屏幕，并且UI元素会渲染在最贴近屏幕处，可以想象成一张画着UI的纸贴在了镜头前。
4.设置Image
(1)启用2D模式
点击Scene视窗的2D按钮启用2D模式，启动2D模式更容易观察平面上的UI。
(2)拉伸背景Image
① 在Hierarchy中选择Image。
② 从工具栏中点击选择Rect Tool(矩形工具)，或者快捷键T。
③ 取消应用效果
这时候可能会看到一个奇怪的画面，这是因为Scene视窗还在应用我们之前设置的屏幕后效。
只要我们点击下图红框的Effect按钮先重新应用，再点击一次取消应用，就能恢复正常了。
(3)设置Rect Transform
①在Hierarchy窗口里，选中Image。
②在其Inspector窗口中，找到Rect Transform组件，修改参数：
把Anchors里X和Y的Min（最小值）设为0、Max（最大值）设为1。设置后，我们可以看到锚点分别位于Image父节点的4个角。
修改位于组件右上角的位置偏移信息，Left、Right、Top和Bottom（底部）都设置为0。修改时可以注意Scene视图里的变化，完成后Image会覆盖整个Canvas。
(4)修改颜色
①在Inspector窗口中找到Image组件，点击Color右侧颜色框来打开弹窗。
②把弹窗里R、G、B都设为0，A保持最大。A（Alpha）表示透明度，数值越低越透明。
(5)添加前景Image（主角图片）
①在Hierarchy窗口中选择Image，按F2重命名为ExitImageBackground，这将作为通关图片的背景。
②右键ExitImageBackground，选择UI > Image，在ExitImageBackground下新建一个子对象Image。
③选中新建的子对象Image，按F2重命名为ExitImage，这将作为通关前景图片。
④在ExitImage的Inspector窗口中找到Image组件，点击Source Image最右侧的小圈，在弹出的Select Sprite窗口中选择Won，此时胜利的图片只在屏幕中间一小块。
⑤在ExitImage GameObject的Insprctor窗口中找到Tect Transform，设置以下参数：
Anchors（锚点）： Min X:0 Y:0；
Max X:1 Y:1；
Left，Right，Top和Bottom设置为0；
⑥设置Rect Transform参数后，会发现图片被拉伸变形了，所以我们找到Image组件，勾选Perserve Aspect，使图片保持比例进行缩放。
(6)添加Canvas Group组件
在显示结束界面的时候，我们需要背景和前景图一起淡入的效果，这里可用到Canvas Group组件进行处理。Canvas Group用于控制所在GameObject及其子对象上UI元素的某些功能。
①在Hierarchy窗口中选择ExitImageBackground。
②在其Inspector窗口中，点击Add Component，搜索Canvas Group，选择添加Canvas Group组件。
③在Canvas Group组件中，把Alpha数值设置为0，此时我们可以看到图片变为全透明。
④接下来我们点击Scene视窗左上的2D按钮，转换回3D模式。并且左键双击Hierarchy中的JohnLemon，快速定位到JohnLemon。
UI的设置部分基本上完成了，按Ctrl + S保存。在第三部分的脚本里会控制Alpha值来制作淡入效果。
二、创建GameEnding Trigger（触发器）
那么程序要怎么样才知道到John已经到达终点了呢？我们可以用Trigger(触发器)来检测John是否到达特定的区域。
1.创建Trigger
(1)在Hierarchy窗口中，点击Create > Create Empty，新建一个空的对象，按F2重命名为GameEnding。
(2)选中GameEnding，在其Inspector窗口中找到Transform组件，把Position改为（18，1，1.5）,使这个空对象位于关卡出口处。
(3)点击Add Component按钮，搜索并添加Box Collider组件。
(4)在Box Collider组件中，勾选Is Trigger。勾选之后，Collider就会转换为Trigger（触发器），有触发检测，可是不会有实际的碰撞阻挡效果。我们用一个正方体进行演示：
(5)在Box Collider组件中，把Size设置为（1 ，1 ，3.5 ）。
(6)现在我们已经在出口处完成了Trigger的设置，按Ctrl + S进行保存。
三、编写脚本
在第一部分我们完成了结束界面UI的设置、第二部分添加了检测是否到达终点的Trigger(触发器)，现在万事俱备，只欠脚本。
1.添加脚本
(1)在Project窗口中，打开Assets > Scripts文件夹。
(2)Scripts文件夹中，右键 > Create > C# Script，命名为GameEnding。
(3)把脚本拖到Hierarchy窗口里的GameEnding GameObject中，使脚本添加为组件。
2.基本思路
当玩家进入关卡出口的触发器范围时，结束画面就会浮现出来，等待一段时间后关闭游戏。
(1)Update里每帧判断玩家是否进入触发器范围。
(2)如果玩家进入范围，则执行游戏结束方法。
(3)游戏结束方法：
开始计时。
根据计时结果，计算并调节Canvas Group的alpha值（范围0~1，0为透明）。
根据计时结果，关闭游戏。
3.脚本
双击打开GameEnding脚本，开始编写。
(1)首先，声明相关变量。
①设置淡入时间fadeDuration和淡入完成后的等待时间displayImageDuration，设置等待时间是为了方便调节游戏关闭等待的时长。
②player和exitBackgroundImageCanvasGroup这两个变量我们在编写完脚本之后，通过在Unity里拖进组件里获取。
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;
public class GameEnding : MonoBehaviour
{
public float fadeDuration = 1f; //淡入时间1S
public float displayImageDuration = 1f; //淡入完毕后等待时间1S
public GameObject player; //玩家
public CanvasGroup exitBackgroundImageCanvasGroup; //用于调节通关时alpha值的CanvasGroup
bool m_IsPlayerAtExit; //玩家是否到终点
float m_Timer; //计时器
(2)当玩家进入Trigger范围时，OnTriggerEnter()方法的内容会自动被执行。
/// <summary>
/// 进入触发器范围时调用
/// </summary>
/// <param name="other"></param>
private void OnTriggerEnter(Collider other)
{
//如果进入触发器范围的是玩家，改变布尔变量
if (other.gameObject == player)
{
m_IsPlayerAtExit = true;
}
}
(3)Update()方法每帧都会调用，通过布尔变量m_IsPlayerAtExit判断玩家是否到达终点，如果到达（m_IsPlayerAtExit为true），则执行EndLevel()方法。
/// <summary>
/// 每帧调用
/// </summary>
private void Update()
{
//如果玩家到达出口，执行EndLevel();
if (m_IsPlayerAtExit)
{
EndLevel();
}
}
(4)EndLevel()关卡结束:
① Time.deltaTime是当前帧与上一帧的时间间隔，m_Timer相当于一个计时器，执行方法时每帧累加时间。
②通过计算计时器数值与预设淡入时间之比 m_Timer/fadeDuration，控制alpha值（0~1）,当比值为1时，结束画面完全显示。
③当m_Timer大于预设的时间，关闭游戏。
/// <summary>
/// 关卡结束
/// </summary>
void EndLevel()
{
m_Timer = m_Timer + Time.deltaTime; //计时器，每帧累加时间
//alpha值随着百分比改变
exitBackgroundImageCanvasGroup.alpha = m_Timer / fadeDuration;
//当计时器时间大于总等待时间
if (m_Timer > fadeDuration + displayImageDuration)
{
Application.Quit();//退出游戏，这个要游戏打包后才会执行，在Unity里不会关闭游戏。
}
}
}
4.给脚本设置变量
我们前边在脚本中设置了“public”的 player和exitBackgroundImageCanvasGroup变量，它们需要在Unity中给它们赋值。
(1)在Hierarchy窗口里选中GameEnding GameObject，在Inspector窗口中找到GameEnding 脚本组件。
(2)把JohnLemon GameObject拖到Player框里。
(3)把ExitBackgroundImage GameObject拖到Exit Background Image Canvas Group框里。
(4)设置完毕，Ctrl + S保存场景。
结语：这一篇我们通过制作游戏通关界面来了解UI的基础知识，现在运行游戏，尝试第一次通关吧，注意此时弹出通关界面后并不会关闭游戏哦。是不是觉得缺少点什么呢？没错，我们还没有添加敌人。下一篇我们将添加静态的敌人---石像鬼，进入它的探测范围就只能重新开始游戏咯~
本篇主要内容概览：
咱们的游戏开发交流群也欢迎强势插入：869551769
希望参与线下游戏开发学习的，欢~~~~~~迎访问：http://levelpp.com/
