Unity快速入門小遊戲----消消樂

來自專欄遊戲開發入門指南——Unity+

1 示例教程—消消樂

示例圖片：

大家應該都玩過3消類這樣的遊戲吧，比如現在特別火熱的開心消消樂，現在我們就來自己做一款這樣的小遊戲吧，這些圖片、動物、圖標都是我在網上隨便找的，大家可以找自己喜歡的東西來代替哦。

場景搭建：遊戲屬於2D遊戲,所以場景我們用2D精靈(Sprite)來搭建

2 創建面板

2.1 開始面板

創建開始面板，然後加一個開始遊戲button點擊進入下一個關卡面板

2.2 關卡面板

關卡面板可以放很多關卡button讓玩家進入不同的關卡界面，在我們這個小遊戲呢只有一個關卡，大家有興趣可以多做幾關試試哦

2.3 過關標準面板

過關面板上就顯示每一關需要達到的每一種動物的數量就可以了

2.4 闖關成功面板

當你成功闖關的時候顯示闖關成功面板即可

2.5 闖關失敗面板

反之當你闖關失敗的時候顯示闖關失敗面板

3 精靈

首先在unity工程里創建一些精靈(Sprite)，然後把我們找好的動物，盒子，黃色小邊框的圖片都弄在精靈上面，並且給每一個動物都加上BoxCollider2D碰撞盒子，然後把它們放到我們的Resources文件下面，弄成一個一個的預設體方面後面動態創建動物。

4 初始化盒子

首先我們可以看到每一個小動物的背後都有一個藍色的小格子對吧，然後我設計的是一個6*6的矩陣，現在我們就來動態創建它們吧！

4.1 改變層級

經過上一步我們已經把盒子的預設體在Resources下面建立好了，因為動物在盒子的前面顯示，所有我們需要在盒子的Sprite Renderer 的上面把他的Order in Layer改為-1，讓它在動物後面顯示。

4.2 創建腳本

首先我們需要創建一個CreaeAnimals的腳本，把它隨便掛在一個空物體GameObject上。

4.3 動態創建盒子

從遊戲的界面上我們可以看到很多盒子有規則的排著， 所有我們可以把它們放在一個二維數組裡面來依次遍歷它們

創建好數組過後，我們就該在數組裡面去依次的動態創建我們的盒子，算好每一個相鄰盒子左右上下的距離，依次動態創建。

這樣我們的盒子就依次動態創建好了，如下圖

5 初始化動物

5.1 初始化動物

從Resources文件下面的Prefabs文件夾裡面用random隨機一個小動物出來

5.2 定位動物

這樣就能在面板上面看到一個隨機出來的小動物精靈，但是我們還要把它放到相對應的盒子上面去對吧，這時候我們就要創建一個為check的腳本，並把它掛載到盒子上面。

5.2.1 新建對象

首先在check裡面new一個CreaeAnimals 的動物對象

5.2.2 判斷盒子里是否有動物

如果盒子沒有子孩子就說明盒子裡面沒有動物，這時候我們就可以調用前面在CreaeAnimals腳本裡面寫好的初始化動物的函數來創建一個一個的動物。

5.2.3 設置父對象

創建好動物過後，我們還要把動物的父對象設置成盒子，並且讓動物在盒子上面跟著盒子移動，如下圖

這樣我們的動物就創建好啦，並且把每個小動物預設體的Order in Layer改為2讓它們在盒子上面顯示，最後效果如下圖

6 初始化黃色邊框

我們玩消消樂遊戲的時候，是不是每當我們點擊選擇一個小動物的時候，都會顯示出一個小框視為我們已經選中這個小動物了對吧，所有接下來我們也要做一個小黃框，當我們點擊選擇一個小動物的時候，讓它出現。

6.1 初始化小黃框

初始化小黃框的步驟其實就和上面初始化動物的步驟幾乎一模一樣啦

6.2 定位小黃框

大家看了上面的創建動物，有沒有興趣自己寫寫定位小黃框呢，和定位動物是一樣的步驟哦，大家自己試著寫一寫吧，我看好你們嘻嘻，不過我要提醒大家一點動物的父對象是盒子，小黃框的父對象是動物哦，大家不要也弄成盒子了，創建好了過後把小黃框的Order in Layer改為-2，讓它在最下面先不顯示就好了，後面我們會說到什麼時候讓它顯示的。

7 點擊事件

大家玩過消消樂知道會交換兩個小動物對吧，所有我們首先要獲取到我們滑鼠點擊的是哪個小動物，接下來我們來寫點擊事件，點擊方法很多，不止我寫的這一種，大家有更好的方法也可以試試哦。

7.1 創建腳本

創建一個名為EventTriggerHandler的腳本，並把它掛載到每一個小動物的預設體上面，因為每一個小動物都要獲取點擊事件。這個腳本要添加EventTrigger的腳本的支援

並且要給每一個動物添加以下這個組件

7.2 添加監聽事件

在這裡面我們只會用到滑鼠點擊事件，我放了滑鼠進入和滑鼠划出事件大家有興趣的可以自己做一做了解一下哦。

然後在下面的點擊函數裡面寫上你想要點擊的時候出現的效果就好了，這樣滑鼠就成功的獲取到你點擊的是哪個小動物了。

7.3 改變層級

因為我現在還沒有找到一個可以用代碼改變精靈Sprite Renderer的上面的Order in Layer值得方法，如果你知道你可以用你的方法去改變它的層級，讓它在上面說到的點擊函數OnClick裡面顯示在動物前面。然後我說說我的方法，首先在Sprite Renderer找到屬性Sorting Layer，然後給這個屬性添加一個為Frog的值。

然後做好上面這些過後我們就可以在OnClick點擊事件裡面寫代碼，首先我們這個腳本是掛載在動物身上，所有我們不能直接找到小黃框，還記得我們之間動態創建小黃框的時候是把它的父對象設置成動物的嗎?所有這裡我們可以用一個變數son來接收到當前動物的第一個孩子，也就是小黃框，這是我們再來判斷如果這個小黃框的Sorting Layer默認值不為Frog的話我們就把它改成Frog，這樣小黃框就在動物前面顯示出來了，效果如下圖，反之如果默認值已經為Frog，就說明我們已經點擊過當前動物了，這時如果我們再點擊就應該把小黃框隱藏。

8 交換動物

接下來我們就該寫交換動物的代碼了，當你點擊第一個動物和第二個動物的時候可以讓它們兩互換位子

8.1 創建腳本

在unity中創建一個空物體gameobj並把腳本ChangeAnimals掛載在這個空物體上。

8.2 創建數組

8.2.1 交換函數

創建一個只能放2個動物的數組，在數組裡面進行交換

8.2.2 把動物放進數組

在ChangeAnimals定義一個下標i，在EventTriggerHandler腳本用一個同類型的變數j來接收

然後在EventTriggerHandler腳本的點擊函數裡面把點擊到的動物放在交換數組裡面。

在ChangeAnimals腳本裡面控制下標i,當數組裡面已經有2個動物的時候，讓數組又從第一位開始裝其他點擊獲取到的動物。

8.2.3 清空數組

當我們完成一次交換過後，我們就應該把數組裡面的動物清空，好方便下一次數組裡面實現兩個動物交換，清空數組的同時把兩個交換好選中的動物的小黃框給隱藏掉。

8.3 是否可以交換

經過上面的步驟我們基本上可以交換兩個動物的位子了，但是我們還要考慮兩個動物是否能交換對嗎?我們玩消消樂的時候是不是只有一個動物的上下左右才能和它交換呢?所有我們還要在交換的基礎上給它叫上條件限制。

簡單解釋下這段代碼，如果交換數組的第一位不為了空就說明滑鼠已經點擊了一個動物，這是如果滑鼠在點擊另一個動物，我們就該考慮它們是否應該交換。所以我用4個變數來獲取當前兩個動物的x坐標和y坐標，如果它們的x坐標相減的絕對值和y坐標相減的絕對值等於當初我創建格子的距離就說明它們相鄰，也就代表它們可以交換，然後清空數組，如果它們不能交換，也清空數組裡的動物進行下一次的交換。

9 動物消除

當一樣的動物相鄰並達到3個或3個以上的時候，我們就應該讓它們消失，並更新其他的小動物出來。

9.1 創建腳本

創建消除XXanimals腳本掛載在動物上。

9.2 發射線

我用的是發射線來檢測上下左右是否和自己的tag一樣來作為是否能消除的標誌。

這樣我們就向當前動物的上下左右分別發射了一條射線，射線的長度為200剛好只能打到除自己外旁邊的一個物體，這個發射射線的方式是會射到自己，所有返回值裡面會有本身。

9.3 數組

首先我們要先創建一個水平方向的數組和一個垂直方向的數組來分開放動物。

然後在OnEnable裡面去初始化它們。

然後把射線射到的物體放在一個數組裡面對它們進行判定和操作。

這段代碼是說傳了3個變數進去，一個List數組，2個方向變數，如果當前數組裡面的值小於3就說明射線還沒有發出去，打到東西，這個就把左邊射到的動物放在這個List數組裡面，右邊也是一樣，但是這樣當前自己這個動物就會被添加2次對吧，所有上面這個check函數就是用來判定如果添加的動物數組裡已經有了，就不用添加了。

做好上面的過後，就可以在發射射線的函數裡面去調用AddList了！大家看懂了嗎

9.4 判斷Tag

接下來我們就該判斷一下數組裡面的動物是否是同一種動物呢?在最開始創建每一個小動物的預設體之前，我都給每一個小動物設置了一個Tag

如果數組裡面有一個tag和自己不一樣，就說明不能消除返回false，反之就返回true

這樣當在AddList函數裡面檢測到FF返回值為true時，這時候就代表可以消動物了！

這時候你們可以試著在這個if裡面列印一下，或者做一些其他的操作，看看是否成功了。

因為這個消除腳本是掛載在每一個動物身上，所有每一個動物在update裡面每一幀都會發射射線去檢測它的上下右左是否和它一樣，最後在update裡面調用XXRaycast即可。

9.5 更新數組

再消除動物和交換動物過後要更新水平數組和垂直數組的動物，以防數組沒有更新，檢測出差錯，所以在兩個腳本的方法裡面加上下面的代碼。

10 獲取消除動物數量

每一關遊戲都有它的過關標準對吧，這時我們就可以在之前創建好的過關面板上來自己設置我們過關的要求啦

這是我給第一關設置的過關要求，大家隨意發揮。

10.1 創建腳本

創建一個PassPanel腳本掛載在PassPanel面板上。

10.2 設計面板

設計好你的過關面板，然後在PassPanel腳本上創建相對應的gameobject再在面板上拖到相對應的空物體上面，這樣就找到它們了。

10.3 更新數據

用3個number來實時的獲取到面板上動物的數量並賦值給它們。

10.4 獲取相對應的動物消除數量

在XXanimals函數裡面寫個OnDisable方法，這個方法是在被銷毀的時候只執行一幀，

這裡我就只放了找到一個過關動物的方法，其他動物的一樣，如果檢測到該消除動物的tag為上面過關需要的動物tag，就改變PassPanel裡面的number數量，並調用實時獲取數據的方法PassText來更新數據，如果當前number的數量達到了目標數量，就證明該動物達到了過關的標準，你就根據需要在裡面的IF做一些自己想做的操作就可以啦!

我的效果圖如下，當消除動物數量大於過關需要的數量時，數字會顯示綠色，並且動物上面會出現一個綠色小勾的圖片，代表這個動物已經收集成功。

11 動畫效果

做到這個步驟，其實遊戲已經可以正常玩了，但是如果給動物消除加點動畫的感覺就更加好了，接下來我們就來試試吧。

11.1 消失目標點

首先我們要找到一個動物需要移動到的目標點。

這個星星就是我設置的動物如果能消除就需要移動到的目標點位子，下面有個我加的小特效星星在閃爍。

11.2 動物移動

動物移動就需要回到之前我們寫的XXanimals腳本，去寫這個動物移動方法。最開始我用的攜程，但是後面一直有各種不方便的小Bug所有改來改去幾次變動，最後用了以下的方法。

我做了一個動物狀態機，一種靜止狀態，一種移動狀態

設置初始狀態為靜止狀態

以下就是動物移動的方法，給當前動物一個速度，讓它向著我們最快開始設置好的星星目標點移動過去，如果它們之間的距離小於0.1，也就意味著馬上接近目標點，就把自己銷毀，然後在前面的check中就會檢測到當前盒子沒有子孩子，也就會自動隨機更新新的小動物出來了。

所以大家在上面可以看到我們再之前的判斷中，如果FF函數返回為true就把動物的狀態改為Move移動狀態。

然後在update裡面去檢測，如果動物的狀態一旦改為了Move就調用AnimalMovement函數，並且做一些其他你想做的操作，因為每一個動物都需要去自動檢測周圍動物，所有我延遲了0.2秒時間給它們檢測，不然會出現還沒檢測到旁邊的，就已經移動了的情況。

這樣你就會看到相同的動物要消除的時候，會跑向星星的動態的感覺就出來啦!

12 移動步數

還有一個很重要的就是移動步數，當我們玩消消樂遊戲的時候，步數是有限的對吧，不能無限次的移動小動物，所以接下來我們也來做一個步數的限制條件吧!

12.1 UI面板

我設置的第一關的步數為15步

12.2 創建代碼

把這段代碼放在ChangeAnimals腳本裡面，在Start裡面初始化步數為15。

實時更新面板上的步數。

然後在動物交換ExchangeAnimals函數裡面,每交換成功一次動物就讓步數減一

13 完成

13.1 成功面板

當遊戲達到第一關的過關要求是，顯示我們已經準備好的成功面板就好了。

13.2 失敗面板

當遊戲可移動步數為0，且過關要求沒有達到時，顯示準備好的失敗面板即可。

13.3 遊戲完成

做到這裡，我們的消消小遊戲基本上已經算成功完成了，然後可以在電腦上運行出來玩一玩，也可以打包在手機上面試一試，還有更多的小功能大家如果有興趣可以發揮自己的想像做做看哦，謝謝大家觀看!最後運行效果如圖!