在本教程中，您將：

• 使用 UI（用戶界面）功能創(chuàng)建游戲結(jié)束屏幕
• 創(chuàng)建 GameEnding 觸發(fā)器
• 編寫(xiě)自定義游戲結(jié)束腳本

? 設(shè)置UI

創(chuàng)建一個(gè)結(jié)尾，當(dāng) JohnLemon 逃離房屋時(shí)游戲?qū)嶋H上就完成了。

當(dāng) JohnLemon 到達(dá)出口時(shí)，游戲應(yīng)該淡出并退出，但是您需要【注意】這一點(diǎn)：在 Unity Editor 中退出和在游戲的最終構(gòu)建版本中退出是不同的。

首先，使游戲淡出。使用 Unity 的 UI（用戶界面）系統(tǒng)。

• 在 Hierarchy 窗口中 Create > UI > Image。
• 在 Scene 窗口中，單擊 2D 以啟用 2D 模式
• 選擇 Canvas 游戲?qū)ο?。將鼠?biāo)光標(biāo)置于 Scene 窗口上，并按 F 鍵。

image.png

• 選擇 EventSystem ， Delete 掉。

EventSystem 游戲?qū)ο蟾綆в幸恍┙M件，這些組件可協(xié)同工作以允許屏幕上的所有 UI 元素與用戶輸入進(jìn)行交互。但是，本游戲中，玩家不必能夠與 UI 進(jìn)行交互，所以刪掉。

? 配置畫(huà)布 (Canvas)

將 Canvas 重命名為 FaderCanvas

image.png

它的 Transform 組件不同于之前看到的。UI 系統(tǒng)的游戲?qū)ο笮枰玫乜刂破湮恢?，因此具?Rect Transform 組件。對(duì)于位于 UI 層級(jí)視圖根部的 Canvas，Rect Transform 設(shè)置為只讀。

?? Render Mode

Canvas 組件可以控制如何渲染屬于該 Canvas 的 UI 元素。此渲染主要由 Render Mode 設(shè)置進(jìn)行控制。

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

• Screen Space - Overlay，在這種模式下，畫(huà)布將填充屏幕，畫(huà)布的所有 UI 元素都會(huì)渲染在其他所有元素之上

• Screen Space - Camera，在這種模式下，畫(huà)布將填充屏幕，但會(huì)渲染到特定攝像機(jī)，并受到與攝像機(jī)的距離的影響

• World Space，在這種模式下，UI 存在于場(chǎng)景中，并渲染到其他對(duì)象的前面或后面（例如，3D 世界中角色上方的名稱(chēng)標(biāo)簽）

我們需要在屏幕上拉伸圖像，并將其渲染到其他所有元素之上, Screen Space - Overlay就很合適。

?? Canvas Scaler 組件

當(dāng) UI 元素在不同大小的屏幕上顯示時(shí)，通過(guò)這個(gè)組件可以輕松控制 UI 元素的相對(duì)大小。圖像會(huì)在整個(gè)屏幕上拉伸，因此無(wú)需擔(dān)心其相對(duì)比例。

這里先Remove掉這個(gè)組件。

?? Graphic Raycaster 組件

這個(gè)組件用于檢測(cè) UI 事件，例如點(diǎn)擊。
本游戲中，玩家不會(huì)與 UI 進(jìn)行互動(dòng)，因此不需要此組件，Remove掉。

? 拉伸圖像

選擇 Image 游戲?qū)ο?｜ 選擇矩形工具 (Rect Tool)，或按 T 鍵編輯對(duì)象

image.png

這里發(fā)現(xiàn)為什么圖像不在矩形工具所指示的位置？

這是因?yàn)?Scene 窗口正在使用您在上一教程中設(shè)置的【后期處理】。

image.png

禁掉 Post Processing 就可以了：

image.png

? 配置 Rect Transform 組件

Rect Transform 組件的位置不是相對(duì)于其父對(duì)象上的單個(gè)軸心點(diǎn)，而是相對(duì)于其父對(duì)象的一個(gè)區(qū)域。父對(duì)象的此區(qū)域由 Rect Transform 的錨點(diǎn)表示。

這個(gè)雪花一樣的圖標(biāo)，實(shí)際是四個(gè)錨點(diǎn)組成的：

image.png

由四個(gè)錨點(diǎn)形成的矩形是父對(duì)象整體區(qū)域的一部分。

image.png

錨點(diǎn)是相對(duì)于其父級(jí)的：0 表示屏幕的最左側(cè)或底部，1 表示屏幕的最右側(cè)或頂部。

• 將 x 和 y 的最小值設(shè)置為 0。將 x 和 y 的最大值設(shè)置為 1。

  
  
  image.png

上面的示例中，圖像的左邊與錨定區(qū)域的左邊相距 394 像素；圖像的右邊與錨定區(qū)域的右邊相距 942 像素；圖像的頂邊與錨定區(qū)域的頂邊相距 487 像素；而圖像的底邊與錨定區(qū)域的底邊相距 145 像素。

image.png

將 Left、Top、Right 和 Bottom 屬性設(shè)置為 0，顏色設(shè)為黑色（0，0，0）。

image.png

將當(dāng)前的 Image 對(duì)象重命名為 ExitImageBackground, 在ExitImageBackground下面新建 Image 對(duì)象重命名為 ExitImage：

image.png

為ExitImage添加一張圖片：

image.png

來(lái)解決一個(gè)重要的問(wèn)題：圖像填充盡可能大的屏幕面積將看起來(lái)效果最佳，但是需要保持正確的寬高比。要查看此問(wèn)題，請(qǐng)像先前對(duì)待父級(jí)一樣調(diào)整 Rect Transform 的大小。

• 將 x 和 y 的最小值設(shè)置為 0。將 x 和 y 的最大值設(shè)置為 1
• 將 Left、Top、Right 和 Bottom 屬性設(shè)置為 0

image.png

圖片現(xiàn)在看起來(lái)已經(jīng)拉伸了！

image.png

找到 Image Type 屬性。啟用 Preserve Aspect 復(fù)選框，這樣可以使圖像在 Rect Transform 內(nèi)盡可能增大，但不會(huì)被壓縮或拉伸。

image.png

? 添加 Canvas Group 組件

接下來(lái)，考慮如何在需要時(shí)使這些 UI 元素淡入和淡出。我們可以調(diào)整 Image 組件的 Alpha 值以使其淡出。但是，現(xiàn)在有兩幅圖像（ExitImageBackground和ExitImage），因此需要更改兩種顏色，而不是僅更改一個(gè)值。為了完成此任務(wù)，提供了一個(gè)名為 Canvas Group 的組件。

image.png

選擇 ExitImageBackground 游戲?qū)ο?| 添加一個(gè) Canvas Group 組件 | 將 Alpha改為 0

在 Scene 窗口中禁用 2D 模式, 切回關(guān)卡。 選擇 JohnLemon 游戲?qū)ο蟆⑹髽?biāo)光標(biāo)懸停在 Scene 視圖上，按 F 鍵以進(jìn)行聚焦。

image.png

保存場(chǎng)景。

接下來(lái)，您需要一種觸發(fā)和控制 UI 淡入淡出的方式。

? 創(chuàng)建 GameEnding 觸發(fā)器

Create | Create Empty,命名為 GameEnding ｜ Position 設(shè)置為 (18, 1, 1.5)，這個(gè)位置在【關(guān)卡出口的中間】。

image.png

為 GameEnding 添加Box Collider 組件 ｜ 啟用 Is Trigger ,這會(huì)將碰撞體變成觸發(fā)器。

調(diào)整觸發(fā)器的大小，將 (Size) 設(shè)置為 (1, 1, 3.5)，使其覆蓋出口 — JohnLemon 需要走進(jìn)這個(gè)出口才能逃出。

?? 創(chuàng)建 “GameEnding” 腳本掛載到GameEnding 游戲?qū)ο笊?/p>

public class GameEnding : MonoBehaviour
{
    public float fadeDuration = 1f;  // 淡入淡出的默認(rèn)值為1秒
    public float displayImageDuration = 1f;

    public GameObject player; // 玩家
    public CanvasGroup exitBackgroundImageCanvasGroup;
    bool m_IsPlayerAtExit;
    float m_Timer; // 需要一個(gè)計(jì)時(shí)器來(lái)確保游戲在淡入淡出之前不會(huì)結(jié)束

    void OnTriggerEnter(Collider other)
    {// 監(jiān)聽(tīng)觸發(fā)器callback
        if (other.gameObject == player)
        {
            m_IsPlayerAtExit = true; // 發(fā)生觸發(fā)
        }
    }

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

    void EndLevel()
    {
        //獲取從上一幀以來(lái)經(jīng)過(guò)的時(shí)間的方式：使用 Time.deltaTime
        m_Timer += Time.deltaTime;
        // 設(shè)置 Canvas Group 的 Alpha
        exitBackgroundImageCanvasGroup.alpha = m_Timer / fadeDuration;
        if (m_Timer > fadeDuration + displayImageDuration)
        {
            // 當(dāng)計(jì)時(shí)器值大于持續(xù)時(shí)間時(shí)，淡入淡出將結(jié)束
            // 該方法確實(shí)可以退出游戲，但僅適用于完全構(gòu)建的應(yīng)用程序
            // 目前在Unity Editor中沒(méi)有效果
            Application.Quit();
        }
    }
}

image.png

然后將 JohnLemon 游戲?qū)ο笸系降?Game Ending 的 Player 字段上。
將 ExitImageBackground 游戲?qū)ο笸系?Game Ending 的 Exit Background Image Canvas Group 字段上。Unity 將自動(dòng)找到正確的組件來(lái)分配 Exit Background Image Canvas Group 變量。

保存場(chǎng)景。