前言
這一節(jié)我們主要完成以下內(nèi)容：
- 添加UI
- 完成切換關(guān)卡功能
- 添加背景音樂(lè)和音效
本節(jié)你將學(xué)會(huì)什么？
- 對(duì)Unity的UI開(kāi)發(fā)有初步了解
- 了解委托函數(shù)
- 如何在游戲里添加聲音
- 了解params關(guān)鍵字
一、添加界面UI
2D Roguelike 的UI層很簡(jiǎn)單，一共就兩部分：過(guò)關(guān)時(shí)候的界面和Food數(shù)值展示。
1.1 添加過(guò)關(guān)界面和結(jié)束UI
剛進(jìn)入游戲和移動(dòng)到EXIT進(jìn)入下一關(guān)的時(shí)候，都會(huì)出現(xiàn)過(guò)關(guān)界面，元素是一張黑色的背景圖和一個(gè)顯示第幾天的標(biāo)題文本。
游戲結(jié)束的時(shí)候其實(shí)也是用的這個(gè)界面，只是更換了文字的內(nèi)容。
1.1.1 添加黑色背景LevelImage
打開(kāi)Unity編輯器，添加Canvas。
Canvas畫(huà)布是承載所有UI元素的區(qū)域，所有的UI元素都必須是Canvas的子對(duì)象?？梢园袰anvas看成是UI層的攝像機(jī)。
可以看到，在Hierarchy窗口下出現(xiàn)了Canvas和EventSystem（EventSystem主要是負(fù)責(zé)加工和處理事件，在這個(gè)項(xiàng)目用不上）。
我們先添加黑色背景圖，Hierarchy窗口下空白處點(diǎn)擊右鍵——UI——Image，可以看到Image自動(dòng)成為Canvas的子節(jié)點(diǎn)。
切換到Scene窗口，用鼠標(biāo)滾輪縮小到合適的程度以便我們觀(guān)看（鼠標(biāo)右鍵可以移動(dòng)）。新增的Image默認(rèn)是在Canvas中間，顏色是白色。我們需要把它填充到和Canvas一樣大，并且變成黑色。
在Hierarchy窗口選中Image，點(diǎn)擊右側(cè)Inspector的錨點(diǎn)設(shè)置（Rect Transform），按住Alt鍵（如果是Mac電腦則是option鍵）選擇右下角進(jìn)行填充。
關(guān)于錨點(diǎn)設(shè)置的相關(guān)知識(shí)可以閱讀此文 Unity進(jìn)階技巧 - RectTransform詳解
Color選擇黑色。
在Scene和Game窗口都可以看到效果。選中Image再左鍵單擊，命名為LevelImage。
1.1.2 添加LevelText
LevelText的作用是顯示第幾天和游戲結(jié)束信息。添加Text的方法和Image是一樣的，Hierarchy窗口下空白處點(diǎn)擊右鍵——UI——Text，命名為LevelText。
在背景板上LevelText需要居中對(duì)齊，進(jìn)行文字顏色、大小、字體、文字對(duì)齊、默認(rèn)文字內(nèi)容等設(shè)置。
選中LevelText，點(diǎn)擊右側(cè)Inspector的錨點(diǎn)設(shè)置，按住Alt鍵（如果是Mac電腦則是option鍵）選擇中間進(jìn)行居中對(duì)齊。
然后我們把默認(rèn)文本內(nèi)容改成“Day 1”，F(xiàn)ont選擇PressStart2P-Regular（更適合這個(gè)游戲的字體），F(xiàn)ont Size字號(hào)為32，Alignment文字對(duì)齊都是居中，Color字體顏色改成白色。
但是我們把視線(xiàn)放回Scene，卻發(fā)現(xiàn)文本框消失不見(jiàn)了！
這是因?yàn)槲淖肿煮w超出了文本框的大小。因?yàn)槲谋鹃L(zhǎng)度不確定，因此我們不能通過(guò)拉伸文本框來(lái)解決這個(gè)問(wèn)題。選擇文本框水平和垂直方向都允許溢出即可。
當(dāng)控制LevelImage顯示或者隱藏的時(shí)候我們期待LevelText也是跟隨變化，因此我們需要把LevelText變成LevelImage的子對(duì)象。拖動(dòng)LevelText到LevelImage松開(kāi)即可。
1.1.3 腳本控制LevelImage和LevelText
UI元素添加好了，我們需要在腳本里添加代碼來(lái)控制這些控件。打開(kāi)GameController腳本，往里面添加如下代碼：
代碼簡(jiǎn)讀：
- 在新的關(guān)卡渲染之前需要有幾秒鐘的時(shí)間顯示過(guò)關(guān)界面，告訴玩家這是第幾天（也可以理解是第幾關(guān)）。因此新增float類(lèi)型成員變量levelStartDelay，代表過(guò)關(guān)界面展示時(shí)長(zhǎng)（單位為s）。
- 新增GameObject類(lèi)型的變量levelImage，代表黑色背景的過(guò)關(guān)界面。
- 聲明Text類(lèi)型的變量levelText，代表顯示當(dāng)前天數(shù)的文本控件內(nèi)的Text組件。需要在頭部引用UnityEngine.UI才可以使用Text類(lèi)。
- 為了防止玩家在過(guò)關(guān)界面還沒(méi)消失的時(shí)候進(jìn)行移動(dòng)，我們需要聲明一個(gè)布爾值類(lèi)型變量doingSetup作為開(kāi)關(guān)。
- 修改Update方法，檢測(cè)當(dāng)doingSetup為true時(shí)，也就是游戲還在渲染關(guān)卡，還在展示過(guò)關(guān)頁(yè)面的時(shí)候，就return，不讓怪物進(jìn)行移動(dòng)，從而實(shí)現(xiàn)玩家也不能移動(dòng)的效果。
- InitGame方法，把doingSetup開(kāi)關(guān)開(kāi)起來(lái)，然后對(duì)levelImage和levelText進(jìn)行初始化獲取對(duì)應(yīng)的游戲?qū)ο蠛徒M件。levelText上的文本跟隨天數(shù)更新變化，因此對(duì)text文字內(nèi)容進(jìn)行賦值，內(nèi)容為文本“Day ”加上具體的關(guān)卡數(shù)字。通過(guò)調(diào)用levelImage的SetActive方法把過(guò)關(guān)界面顯示出來(lái)之后，再使用Invoke方法來(lái)調(diào)用HideLevelImage方法執(zhí)行隱藏過(guò)關(guān)頁(yè)面操作。
Invoke()可以實(shí)現(xiàn)根據(jù)時(shí)間調(diào)用指定的方法，延時(shí)加載界面，這樣視覺(jué)上過(guò)渡更加平滑，不突兀。
- 新增HideLevelImage()，調(diào)用levelImage的SetActive()隱藏過(guò)關(guān)頁(yè)面，關(guān)閉doingSetup開(kāi)關(guān)，以便讓玩家可以進(jìn)行移動(dòng)。
保存代碼，回到Unity編輯器，運(yùn)行游戲試試。
通過(guò)這次測(cè)試能發(fā)現(xiàn)有兩個(gè)bug：
- 第一天是Day 4，正確應(yīng)該是Day 1。
- 移動(dòng)到Exit格子進(jìn)入下一關(guān)時(shí)，依然顯示是“Day 1”（LevelText的默認(rèn)文本），并沒(méi)有一直往上添加。
1.1.4 處理“下一關(guān)”
第一個(gè)問(wèn)題，由于之前在GameController腳本聲明level的時(shí)候，為了方便測(cè)試把它賦值為4，現(xiàn)在改成1就可以了。
第二個(gè)問(wèn)題，進(jìn)入下一關(guān)之后程序需要實(shí)現(xiàn)兩個(gè)功能：level+1、調(diào)用initGame()渲染生成新關(guān)卡。眾所周知，GameController在重新加載場(chǎng)景的時(shí)候是不摧毀的（單例模式），因此導(dǎo)致了Awake()沒(méi)有再被調(diào)用，所以InitGame()也沒(méi)再次被調(diào)用來(lái)生成新關(guān)卡地圖。那么，需要尋找其他的方式來(lái)實(shí)現(xiàn)新關(guān)卡的渲染。
原教程視頻里的方法OnLevelWasLoaded()已經(jīng)被廢棄，現(xiàn)在的版本提供SceneManager.sceneLoaded這個(gè)委托函數(shù)來(lái)做更靈活的調(diào)用。
我們?cè)贕ameController加入以下代碼：
- 這段代碼的意思是，第一次運(yùn)行GameContorller腳本的時(shí)候，在Start方法內(nèi)注冊(cè)委托函數(shù)SceneManager.sceneLoaded，當(dāng)發(fā)生場(chǎng)景重新加載的事件后，LevelWasLoaded方法就會(huì)收到通知并執(zhí)行。
被委托的方法需要按照一定的格式，比如對(duì)sceneLoaded來(lái)說(shuō)，兩個(gè)參數(shù)類(lèi)型必須是Scene和LoadSceneMode；不過(guò)方法名是可以自定義的。
添加以上代碼之后，游戲角色進(jìn)入下一關(guān)的天數(shù)顯示和關(guān)卡渲染都正常了。
1.1.5 添加游戲結(jié)束提示
游戲角色死亡的時(shí)候需要彈出相應(yīng)的提醒。我們?cè)谔幚碛螒蚪Y(jié)束的方法GameOver里添加以下代碼：
把文案改成“After N days，you starved.”，我以前寫(xiě)的died，后來(lái)發(fā)現(xiàn)這貨是餓死的。
然后把黑色背景圖激活顯示即可。
1.2 添加Food值顯示和變動(dòng)UI
在游戲的過(guò)程中，玩家需要實(shí)時(shí)看到Food的當(dāng)前數(shù)值并且獲得Food值變化的反饋，以便他采取合適的策略通過(guò)關(guān)卡。
如上圖所示，我們只需要添加一個(gè)文本控件在界面底部，在里面用文字顯示Food的數(shù)量和變化即可。
1.2.1 添加FoodText
回到編輯器，Hierarchy窗口下空白處點(diǎn)擊右鍵——UI——Text，命名為FoodText。
FoodText需要對(duì)齊底部中間，并且和前面的LevelText一樣進(jìn)行文字顏色、大小、字體、文字對(duì)齊、默認(rèn)文字內(nèi)容等設(shè)置。
選中FoodText，點(diǎn)擊右側(cè)Inspector的錨點(diǎn)設(shè)置，按住Alt鍵（如果是Mac電腦則是option鍵）選擇bottom center 交點(diǎn)進(jìn)行底部中間對(duì)齊。
然后我們把默認(rèn)文本內(nèi)容改成“Food:100”，F(xiàn)ont選擇PressStart2P-Regular，F(xiàn)ont Size字號(hào)為24，Alignment文字對(duì)齊都是居中，Color字體顏色改成白色，文本框水平和垂直方向都允許溢出。
為了更美觀(guān)，我們把FoodText往上移動(dòng)少許，不要緊貼底邊。要實(shí)現(xiàn)這個(gè)效果，我們先來(lái)看看現(xiàn)在錨點(diǎn)的位置。
可以看見(jiàn)錨點(diǎn)的位置是在底邊中間，而文本框FoodText的中心點(diǎn)與這個(gè)錨點(diǎn)的垂直距離是15，水平距離為0代表兩個(gè)點(diǎn)的X坐標(biāo)一樣。
把Anchors的Min和Max的Y坐標(biāo)都改成0.05（相對(duì)Canvas畫(huà)布高度的比例值）。
可以看到，改動(dòng)之后，這個(gè)散射菊花狀的錨點(diǎn)就上移了，F(xiàn)oodText中心點(diǎn)與它的垂直距離從15變成了-13。把-13改成0，F(xiàn)oodText就會(huì)跟著上移了。
此外要注意，顯示天數(shù)或者游戲結(jié)束頁(yè)面的時(shí)候，我們不希望玩家還能看到Food的數(shù)量，也就是說(shuō)FoodText層級(jí)要比LevelImage和它的子節(jié)點(diǎn)LevelText低，這樣才能被遮蓋。
鼠標(biāo)拖拽FoodText移動(dòng)到LevelImage上即可。
UI元素繪制順序和在Hierarchy(層級(jí)視圖)中的順序一致，后面的將在更早的上面繪制。
1.2.2 腳本控制FoodText內(nèi)容
打開(kāi)GameController腳本，往里面添加如下代碼：
- 因?yàn)橐褂肨ext類(lèi)型，所以在頭部引用了UnityEngine.UI。
- 聲明Text類(lèi)型的變量foodText，指的是FoodText這個(gè)GameObject上的Text組件，在Start()對(duì)該組件的text也就是文本內(nèi)容進(jìn)行了賦值。
然后我們?cè)趂ood值產(chǎn)生改變的地方都添加相應(yīng)的代碼來(lái)改變文本顯示。一共三個(gè)地方哦，別漏了。
保存代碼，切換到Unity編輯器，把FoodText拖到Player的Player Script的FoodText選項(xiàng)框里。
開(kāi)測(cè)！
完美~除了字體沒(méi)有做屏幕適配有點(diǎn)遺憾，不過(guò)這個(gè)項(xiàng)目教程的重點(diǎn)也不是在這。
二、添加背景音樂(lè)和音效
游戲中一般會(huì)存在兩種音樂(lè)：時(shí)間較長(zhǎng)并且循環(huán)播放的背景音樂(lè)、時(shí)間較短的各種音效（戰(zhàn)斗、移動(dòng)、拾取等）。
2.1 實(shí)現(xiàn)背景音樂(lè)添加和設(shè)置
2.1.1 添加背景音樂(lè)
首先需要?jiǎng)?chuàng)建一個(gè)Game Object，用來(lái)管理所有的音頻資源。Hierarchy窗口下空白處右鍵 - > Create Empty，創(chuàng)建空白的游戲?qū)ο笾竺麨?strong>SoundManager并且給它添加一個(gè)Audio Source組件來(lái)控制背景音樂(lè)的播放。
Audio Source是控制一個(gè)指定音樂(lè)播放的組件，可以通過(guò)屬性設(shè)置來(lái)控制音樂(lè)的一些效果。
在組件里的AudioClip選取scavengers_music（背景音樂(lè)），勾選Play On Awake和Loop。
屬性說(shuō)明：
- Audio Clip：要播放的聲音片段。
- Play On Awake：生成游戲?qū)ο笾笞詣?dòng)播放。
- Loop：是否循環(huán)播放。
也就是說(shuō)，我們選定了背景音樂(lè)，讓它加載場(chǎng)景之后就自動(dòng)播放并且不斷循環(huán)?？雌饋?lái)沒(méi)問(wèn)題了，我們運(yùn)行游戲測(cè)試一下。
（gif不能播放音樂(lè)，假裝你們已經(jīng)測(cè)試了）
這游戲背景音樂(lè)很帶感，但是我們會(huì)發(fā)現(xiàn)切換關(guān)卡的時(shí)候會(huì)出現(xiàn)一個(gè)很別扭的事情：音樂(lè)從頭開(kāi)始播放了。這是因?yàn)榍袚Q場(chǎng)景的時(shí)候SoundManager會(huì)自動(dòng)銷(xiāo)毀并且重新生成，音樂(lè)就會(huì)關(guān)閉然后再次播放。和GameController一樣，在同一時(shí)間只需要一個(gè)SoundManager來(lái)控制全部音樂(lè)的播放（多個(gè)的話(huà)就會(huì)混亂），因此也要設(shè)定為單例模式。
2.1.2 SoundManager實(shí)現(xiàn)單例模式
實(shí)現(xiàn)單例模式的方法我們?cè)?a href="http://www.itdecent.cn/p/5a07c7096233" target="_blank">第二章生成關(guān)卡中的時(shí)候已經(jīng)提過(guò)。在Scripts文件夾創(chuàng)建一個(gè)C# Script腳本文件，命名為SoundManager，在里面輸入以下代碼。
切換到Unity編輯器，把SoundManager腳本掛載到SoundManager游戲?qū)ο?，然后再次運(yùn)行游戲測(cè)試。
（gif不能播放音樂(lè)，假裝你們?cè)俅螠y(cè)試了）
可以聽(tīng)到音樂(lè)正常循環(huán)播放并且切換關(guān)卡的時(shí)候也不會(huì)中斷了。接下來(lái)我們繼續(xù)加油給游戲添加音效吧！
2.2 添加音效
2D Roguelike游戲里有幾種音效：角色移動(dòng)、角色進(jìn)食、角色死亡游戲結(jié)束、怪物攻擊、角色劈墻的音效等。長(zhǎng)期單調(diào)重復(fù)的音效會(huì)讓人疲倦?yún)挓虼丝梢栽谝粜?strong>數(shù)量和音效音高上做出一些隨機(jī)和變化，讓人產(chǎn)生一種新鮮感。
2.2.1 添加移動(dòng)、吃、喝、死亡音效
首先我們?cè)赟oundManager游戲?qū)ο笊显偬砑右粋€(gè)Audio Source組件，用來(lái)控制各種音效的播放。Play On Awake和Loop記得取消勾選，音效不需要自動(dòng)播放也不需要循環(huán)。
打開(kāi)SoundManager腳本，加入以下代碼。
代碼簡(jiǎn)讀：
- 新增AudioSource類(lèi)型的變量efxSource，代表剛添加的控制音效播放的第二個(gè)Audio Source。
- 為了給音高增加一些隨機(jī)變化，聲明兩個(gè)float類(lèi)型的變量lowPitchRange和highPitchRange并進(jìn)行賦值，代表音高的上下限。這個(gè)隨機(jī)區(qū)間不大，分別是初始音高加減5%。這樣聽(tīng)起來(lái)音效會(huì)有輕微的不同沒(méi)那么單調(diào)，但又不至于變化太大而覺(jué)得不舒服。
- 新增公共方法PlaySingle()，把傳入的音樂(lè)片段作為efeSource的clip并且調(diào)用Play()進(jìn)行播放。
- 新增公共方法RandomizeSfx()，它的參數(shù)是AudioClip類(lèi)型的數(shù)組，也就是N個(gè)音樂(lè)片段。通過(guò)Random.Range()分別隨機(jī)一個(gè)數(shù)組下標(biāo)和音高，然后再分別賦給efeSource的clip和pitch作為要播放的音樂(lè)片段和音高，然后調(diào)用Play()進(jìn)行播放。使用這個(gè)方法就可以每次在音樂(lè)片段數(shù)組里隨機(jī)選擇一個(gè)進(jìn)行播放并且是不同的音高，減輕了同一個(gè)音效反復(fù)播放的單調(diào)感。
方法使用params關(guān)鍵字可以指定數(shù)目可變的參數(shù)，調(diào)用的時(shí)候傳入指定類(lèi)型的逗號(hào)分隔的參數(shù)數(shù)組。
方法都有了，在什么情況下進(jìn)行播放，在哪里進(jìn)行調(diào)用呢？
打開(kāi)Player腳本，新增7個(gè)AudioClip類(lèi)型的成員變量代表移動(dòng)、吃東西、喝東西、游戲結(jié)束的音效片段，其中游戲結(jié)束的音效只播放一次，所以不需要做2個(gè)來(lái)減輕單調(diào)感。
然后在不同的事件處分別調(diào)用SoundManager的方法播放音效。
【角色移動(dòng)】：AttempMove()內(nèi)，當(dāng)角色移動(dòng)的時(shí)候，使用if語(yǔ)句判斷如果Move()返回的是true，代表可以移動(dòng)，則調(diào)用SoundManager的RandomizeSfx()從兩個(gè)移動(dòng)音效里選取一個(gè)來(lái)進(jìn)行播放。
【角色吃喝】：OnTriggerEnter2D()內(nèi)，當(dāng)角色碰撞到Food或者Soda的時(shí)候，調(diào)用SoundManager的RandomizeSfx()從對(duì)應(yīng)的兩個(gè)音效里選取一個(gè)來(lái)進(jìn)行播放。
【游戲結(jié)束】：CheckIfGameOver()內(nèi)，當(dāng)food小于等于0，代表角色餓死了游戲要結(jié)束，則調(diào)用SoundManager的PlaySingle()播放gameOverSound。
保存代碼，回到Unity編輯器，選中SoundManager游戲?qū)ο?，把控制音效的Audio Source拖入到Sound Manager組件的Efx Source選項(xiàng)。
選中Player游戲?qū)ο?，在Player腳本組件里點(diǎn)擊新增7項(xiàng)的最右邊小圓點(diǎn)選取對(duì)應(yīng)的音效片段。
運(yùn)行游戲測(cè)試。
（gif不能播放音樂(lè)，假裝你們測(cè)試了）
我們會(huì)發(fā)現(xiàn)一個(gè)問(wèn)題，游戲角色餓死了彈出了結(jié)束面板并且還播放了對(duì)應(yīng)的音效，但是游戲背景音樂(lè)沒(méi)有關(guān)閉！這會(huì)給玩家一種很詭異的感覺(jué)，我們趕緊來(lái)修復(fù)吧！
打開(kāi)SoundManager腳本，新增AudioSource類(lèi)型的成員變量musicSource，代表控制背景音樂(lè)播放的Audio Source。
打開(kāi)Player腳本，在檢測(cè)游戲結(jié)束的方法CheckIfGameOver()里調(diào)用SoundManager的musicSource，執(zhí)行它的Stop方法來(lái)關(guān)閉音樂(lè)播放。
保存代碼，回到Unity編輯器，選中SoundManager游戲?qū)ο螅芽刂票尘耙魳?lè)的Audio Source拖入到Sound Manager組件的Music Source選項(xiàng)。
運(yùn)行游戲，現(xiàn)在就正常了！接下來(lái)我們別忘了添加被怪物攻擊角色發(fā)出的慘叫音效和角色砸墻的音效哦！
2.2.2 添加角色被攻擊和劈墻音效
打開(kāi)Enemy腳本，新增AudioClip類(lèi)型的成員變量attackSound1和attackSound2代表被打音效，然后在OnCantMove()觸發(fā)攻擊特效之后，調(diào)用SoundManager的RandomizeSfx()從attackSound1和attackSound2里選取一個(gè)來(lái)進(jìn)行播放。
打開(kāi)Wall腳本，新增AudioClip類(lèi)型的成員變量chopSound1和chopSound2代表劈墻音效，然后在DamageWall()扣除墻體生命之后，調(diào)用SoundManager的RandomizeSfx()從chopSound1和chopSound2里選取一個(gè)來(lái)進(jìn)行播放。
保存代碼，回到Unity編輯器，打開(kāi)Prefabs文件夾，同時(shí)選中Enemy1和Enemy2預(yù)制件，在右側(cè)Enemy腳本組件里的Attack Sound選擇對(duì)應(yīng)的音效。
同時(shí)選中Wall1-8預(yù)制件，在右側(cè)Wall腳本組件里的Chop Sound選擇對(duì)應(yīng)的音效。
運(yùn)行游戲測(cè)試~
三、本地發(fā)布游戲
游戲制作完畢，可以發(fā)布游戲到本地了。保存場(chǎng)景，通過(guò)菜單欄File-->Build Settings打開(kāi)發(fā)布頁(yè)面。
- Platform選擇第一項(xiàng)，PC,Mac&Linux Standalone
- 點(diǎn)擊Add Open Scenes按鈕，把當(dāng)前場(chǎng)景添加進(jìn)去并且勾選
- 點(diǎn)擊Build按鈕，選擇存放路徑，就可以完成發(fā)布了
找到保存路徑下的exe文件雙擊運(yùn)行就可以開(kāi)始玩生存游戲了。
四、完篇
細(xì)心的朋友還會(huì)發(fā)現(xiàn)有一部分內(nèi)容沒(méi)提到：手機(jī)或者平板觸摸控制。主要是以下幾個(gè)原因：
- 原方法實(shí)現(xiàn)出來(lái)的效果是，手指像玩切水果游戲那樣滑動(dòng)，游戲角色才能前進(jìn)。這種方法對(duì)這種游戲來(lái)說(shuō)個(gè)人覺(jué)得不合適。
- 教程是很早以前的了，里面的部分代碼在現(xiàn)在的Unity版本失效了。
- 原方法比較粗糙，懶得研究。
【結(jié)束感言】
此次教程搬運(yùn)從第一篇到最后一篇，歷時(shí)一共1年3個(gè)月11天。拖得時(shí)間越長(zhǎng)，越難開(kāi)始。對(duì)于那些看到一半又陷入漫長(zhǎng)等待的童鞋們說(shuō)聲抱歉~
在寫(xiě)文章的過(guò)程中，因?yàn)樾枰敵鲋R(shí)，所以要反復(fù)的去研究原視頻和游戲本身，因此也收獲良多，很多本來(lái)一知半解的內(nèi)容也琢磨地更清楚。所以如果有余力的話(huà)，建議在學(xué)習(xí)Unity的過(guò)程中把自己掌握的知識(shí)內(nèi)容整理一遍輸出成文章，利己利人。
學(xué)習(xí)之路漫漫。
