Unity暑期萌新入門：通關(guān)界面篇
作者：Truly
大渣好，由于某些不可抗拒的原（jie）因（kou）導(dǎo)致這個系列很久沒更新，深深知錯的我現(xiàn)在回來了！
在上一篇中我們設(shè)置了攝像頭跟隨，現(xiàn)在John可以在鬼屋里自由地行走了。這一篇，我們將在出口附近設(shè)置觸發(fā)器，并且通過制作游戲通關(guān)的結(jié)束界面來了解UI的基礎(chǔ)知識。當(dāng)John到進(jìn)入觸發(fā)器時，會漸漸顯示一幅通關(guān)的提示圖片。這一篇我們將分三個部分進(jìn)行：設(shè)置UI、創(chuàng)建觸發(fā)器和編寫腳本。
一、設(shè)置UI
通關(guān)的提示界面分為背景圖（黑色）和前景圖（主角），我們先從背景圖開始入手設(shè)置。
1.添加Image GameObject
Hierarchy窗口里會顯示游戲場景中的GmaeObject，同時我們也可以在Hierarchy窗口里創(chuàng)建所有的基礎(chǔ)GameObject(對象)。
(1) 在Hierarchy窗口中，點擊Create > UI > Image，創(chuàng)建Image（圖片）GameObject。創(chuàng)建完成后，在Hierarchy窗口會里出現(xiàn)Canvas、EnentSystem和Image。
(2) 選中Canvas，按F2重命名為FaderCanvas。Canvas相當(dāng)于一張透明畫紙，我們的UI元素都會在其上邊繪制（作為子對象）。
2.刪除不需要的GameObject(對象)和Component(組件)
(1)EventSystem GameObject：用于UI與用戶輸入交互，我們的通關(guān)界面沒有交互功能，因此可以把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.簡析相關(guān)組件
（1）Rect Transform
在Canvas和Image GameObject的Inspector窗口中，我們可以看到Rect Transform組件，它與控制UI的位置有關(guān)。
Achors（錨點）：顯示為四個空心三角形，藍(lán)色實心點到對應(yīng)錨點的距離不變。
Pivot(軸心點)：藍(lán)色空心圓，UI都是繞著軸心旋轉(zhuǎn)和縮放。
（2）設(shè)置Canvas組件
Canvas組件的Render Mode(渲染模式)選擇Screen Space- Overlay：
這個模式Canvas會拉伸覆蓋整個屏幕，并且UI元素會渲染在最貼近屏幕處，可以想象成一張畫著UI的紙貼在了鏡頭前。
4.設(shè)置Image
(1)啟用2D模式
點擊Scene視窗的2D按鈕啟用2D模式，啟動2D模式更容易觀察平面上的UI。
(2)拉伸背景Image
① 在Hierarchy中選擇Image。
② 從工具欄中點擊選擇Rect Tool(矩形工具)，或者快捷鍵T。
③ 取消應(yīng)用效果
這時候可能會看到一個奇怪的畫面，這是因為Scene視窗還在應(yīng)用我們之前設(shè)置的屏幕后效。
只要我們點擊下圖紅框的Effect按鈕先重新應(yīng)用，再點擊一次取消應(yīng)用，就能恢復(fù)正常了。
(3)設(shè)置Rect Transform
①在Hierarchy窗口里，選中Image。
②在其Inspector窗口中，找到Rect Transform組件，修改參數(shù)：
把Anchors里X和Y的Min（最小值）設(shè)為0、Max（最大值）設(shè)為1。設(shè)置后，我們可以看到錨點分別位于Image父節(jié)點的4個角。
修改位于組件右上角的位置偏移信息，Left、Right、Top和Bottom（底部）都設(shè)置為0。修改時可以注意Scene視圖里的變化，完成后Image會覆蓋整個Canvas。
(4)修改顏色
①在Inspector窗口中找到Image組件，點擊Color右側(cè)顏色框來打開彈窗。
②把彈窗里R、G、B都設(shè)為0，A保持最大。A（Alpha）表示透明度，數(shù)值越低越透明。
(5)添加前景Image（主角圖片）
①在Hierarchy窗口中選擇Image，按F2重命名為ExitImageBackground，這將作為通關(guān)圖片的背景。
②右鍵ExitImageBackground，選擇UI > Image，在ExitImageBackground下新建一個子對象Image。
③選中新建的子對象Image，按F2重命名為ExitImage，這將作為通關(guān)前景圖片。
④在ExitImage的Inspector窗口中找到Image組件，點擊Source Image最右側(cè)的小圈，在彈出的Select Sprite窗口中選擇Won，此時勝利的圖片只在屏幕中間一小塊。
⑤在ExitImage GameObject的Insprctor窗口中找到Tect Transform，設(shè)置以下參數(shù)：
Anchors（錨點）：?Min?X:0?Y:0；
Max?X:1?Y:1；
Left，Right，Top和Bottom設(shè)置為0；
⑥設(shè)置Rect Transform參數(shù)后，會發(fā)現(xiàn)圖片被拉伸變形了，所以我們找到Image組件，勾選Perserve Aspect，使圖片保持比例進(jìn)行縮放。
(6)添加Canvas Group組件
在顯示結(jié)束界面的時候，我們需要背景和前景圖一起淡入的效果，這里可用到Canvas Group組件進(jìn)行處理。Canvas Group用于控制所在GameObject及其子對象上UI元素的某些功能。
①在Hierarchy窗口中選擇ExitImageBackground。
②在其Inspector窗口中，點擊Add Component，搜索Canvas Group，選擇添加Canvas Group組件。
③在Canvas Group組件中，把Alpha數(shù)值設(shè)置為0，此時我們可以看到圖片變?yōu)槿该鳌?/p>
④接下來我們點擊Scene視窗左上的2D按鈕，轉(zhuǎn)換回3D模式。并且左鍵雙擊Hierarchy中的JohnLemon，快速定位到JohnLemon。
UI的設(shè)置部分基本上完成了，按Ctrl + S保存。在第三部分的腳本里會控制Alpha值來制作淡入效果。
二、創(chuàng)建GameEnding Trigger（觸發(fā)器）
那么程序要怎么樣才知道到John已經(jīng)到達(dá)終點了呢？我們可以用Trigger(觸發(fā)器)來檢測John是否到達(dá)特定的區(qū)域。
1.創(chuàng)建Trigger
(1)在Hierarchy窗口中，點擊Create > Create Empty，新建一個空的對象，按F2重命名為GameEnding。
(2)選中GameEnding，在其Inspector窗口中找到Transform組件，把Position改為（18，1，1.5）,使這個空對象位于關(guān)卡出口處。
(3)點擊Add Component按鈕，搜索并添加Box Collider組件。
(4)在Box Collider組件中，勾選Is Trigger。勾選之后，Collider就會轉(zhuǎn)換為Trigger（觸發(fā)器），有觸發(fā)檢測，可是不會有實際的碰撞阻擋效果。我們用一個正方體進(jìn)行演示：
(5)在Box Collider組件中，把Size設(shè)置為（1 ，1 ，3.5?）。
(6)現(xiàn)在我們已經(jīng)在出口處完成了Trigger的設(shè)置，按Ctrl + S進(jìn)行保存。
三、編寫腳本
在第一部分我們完成了結(jié)束界面UI的設(shè)置、第二部分添加了檢測是否到達(dá)終點的Trigger(觸發(fā)器)，現(xiàn)在萬事俱備，只欠腳本。
1.添加腳本
(1)在Project窗口中，打開Assets > Scripts文件夾。
(2)Scripts文件夾中，右鍵 > Create > C# Script，命名為GameEnding。
(3)把腳本拖到Hierarchy窗口里的GameEnding?GameObject中，使腳本添加為組件。
2.基本思路
當(dāng)玩家進(jìn)入關(guān)卡出口的觸發(fā)器范圍時，結(jié)束畫面就會浮現(xiàn)出來，等待一段時間后關(guān)閉游戲。
(1)Update里每幀判斷玩家是否進(jìn)入觸發(fā)器范圍。
(2)如果玩家進(jìn)入范圍，則執(zhí)行游戲結(jié)束方法。
(3)游戲結(jié)束方法：
開始計時。
根據(jù)計時結(jié)果，計算并調(diào)節(jié)Canvas Group的alpha值（范圍0~1，0為透明）。
根據(jù)計時結(jié)果，關(guān)閉游戲。
3.腳本
雙擊打開GameEnding腳本，開始編寫。
(1)首先，聲明相關(guān)變量。
①設(shè)置淡入時間fadeDuration和淡入完成后的等待時間displayImageDuration，設(shè)置等待時間是為了方便調(diào)節(jié)游戲關(guān)閉等待的時長。
②player和exitBackgroundImageCanvasGroup這兩個變量我們在編寫完腳本之后，通過在Unity里拖進(jìn)組件里獲取。
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;? //用于調(diào)節(jié)通關(guān)時alpha值的CanvasGroup
?
??? bool m_IsPlayerAtExit;????????????????? ????????????//玩家是否到終點
??? float m_Timer;????????????????????????????????????? //計時器?
?
(2)當(dāng)玩家進(jìn)入Trigger范圍時，OnTriggerEnter()方法的內(nèi)容會自動被執(zhí)行。
??? /// <summary>
??? /// 進(jìn)入觸發(fā)器范圍時調(diào)用
??? /// </summary>
??? /// <param name="other"></param>
??? private void OnTriggerEnter(Collider other)
??? {
??????? //如果進(jìn)入觸發(fā)器范圍的是玩家，改變布爾變量
??????? if (other.gameObject == player)????????????????
??????? {
??????????? m_IsPlayerAtExit = true;
??????? }
??? }
(3)Update()方法每幀都會調(diào)用，通過布爾變量m_IsPlayerAtExit判斷玩家是否到達(dá)終點，如果到達(dá)（m_IsPlayerAtExit為true），則執(zhí)行EndLevel()方法。
?
??? /// <summary>
??? /// 每幀調(diào)用
??? /// </summary>
??? private void Update()
??? {
??????? //如果玩家到達(dá)出口，執(zhí)行EndLevel();
??????? if (m_IsPlayerAtExit)??????????????????????????
??????? {
??????????? EndLevel();
??????? }
??? }
?
(4)EndLevel()關(guān)卡結(jié)束:
① Time.deltaTime是當(dāng)前幀與上一幀的時間間隔，m_Timer相當(dāng)于一個計時器，執(zhí)行方法時每幀累加時間。
②通過計算計時器數(shù)值與預(yù)設(shè)淡入時間之比?m_Timer/fadeDuration，控制alpha值（0~1）,當(dāng)比值為1時，結(jié)束畫面完全顯示。
③當(dāng)m_Timer大于預(yù)設(shè)的時間，關(guān)閉游戲。
??? /// <summary>
??? /// 關(guān)卡結(jié)束
??? /// </summary>
??? void EndLevel()
??? {
??????? m_Timer = m_Timer + Time.deltaTime; //計時器，每幀累加時間
?
??????? //alpha值隨著百分比改變
??????? exitBackgroundImageCanvasGroup.alpha = m_Timer / fadeDuration;
?
??????? //當(dāng)計時器時間大于總等待時間
??????? if (m_Timer > fadeDuration + displayImageDuration)
??????? {
??????????? Application.Quit();//退出游戲，這個要游戲打包后才會執(zhí)行，在Unity里不會關(guān)閉游戲。
??????? }
??? }
}
?
4.給腳本設(shè)置變量
我們前邊在腳本中設(shè)置了“public”的 player和exitBackgroundImageCanvasGroup變量，它們需要在Unity中給它們賦值。
(1)在Hierarchy窗口里選中GameEnding?GameObject，在Inspector窗口中找到GameEnding 腳本組件。
(2)把JohnLemon GameObject拖到Player框里。
(3)把ExitBackgroundImage GameObject拖到Exit Background Image Canvas Group框里。
(4)設(shè)置完畢，Ctrl + S保存場景。
結(jié)語：這一篇我們通過制作游戲通關(guān)界面來了解UI的基礎(chǔ)知識，現(xiàn)在運行游戲，嘗試第一次通關(guān)吧，注意此時彈出通關(guān)界面后并不會關(guān)閉游戲哦。是不是覺得缺少點什么呢？沒錯，我們還沒有添加敵人。下一篇我們將添加靜態(tài)的敵人---石像鬼，進(jìn)入它的探測范圍就只能重新開始游戲咯~
本篇主要內(nèi)容概覽：
咱們的游戲開發(fā)交流群也歡迎強勢插入：869551769
希望參與線下游戲開發(fā)學(xué)習(xí)的，歡~~~~~~迎訪問：http://levelpp.com/
