前言

來(lái)用制作一款類(lèi)吃豆人的游戲吧。最初版的吃豆人游戲發(fā)布于1980年的十二月并很快成為有史以來(lái)最熱門(mén)的街機(jī)游戲。這款游戲如此流行，以至于Unity甚至在它的游戲引擎里放置了該游戲的一小部分。

在本教程中，我們將通過(guò)Unity強(qiáng)大的2D特性，只用62行代碼復(fù)制出一款吃豆人游戲。我們會(huì)盡量保持簡(jiǎn)單并關(guān)注于迷宮、幽靈、食物以及，當(dāng)然了，吃豆人。

照例，所有內(nèi)容都盡量解釋得簡(jiǎn)單以便所有人都能理解。

這里有一個(gè)最終游戲效果的預(yù)覽：

要求

背景知識(shí)

我們的教程沒(méi)有任何特別的技能要求。如果你已了解Unity并且之前就聽(tīng)過(guò)GameObject，Prefab和Transform，那么你已經(jīng)準(zhǔn)備好了。如果你并不了解這些，也不用太擔(dān)心。

還可以閱讀我們之間的Unity教程，如Unity 2D Pong Game，以便先來(lái)感受一下這個(gè)引擎。

Unity版本

我們的吃豆人教程是利用.04開(kāi)發(fā)的。更新的版本也同樣沒(méi)問(wèn)題，之前的版本也許不能支持?，F(xiàn)在Unity 5的免費(fèi)版隨之附帶了所有的引擎屬性，這也使得它成為推薦的版本。

工程設(shè)置

現(xiàn)在開(kāi)始。啟動(dòng)Unity并創(chuàng)建New Project：

我們將其命名為pacman，選擇任意路徑，如C:\，選擇2D模式并點(diǎn)擊Create Project：

在Hierarchy里選中Main Camera并將其背景顏色設(shè)置為黑色。還需如下圖所示調(diào)整其Size和Position。

迷宮

迷宮精靈

來(lái)創(chuàng)建吃豆人風(fēng)格的迷宮吧。我們將繪制的迷宮基于原版，但不完全一致：

提示：右鍵單擊圖片，選擇Save As...，到項(xiàng)目的Assets 文件夾下并將其存放于新建的Sprites文件夾中。

保存于我們的項(xiàng)目目錄后，我們就可以在Project Area選中它了。

然后在Inspector中修改Import Settings。

提示：一個(gè) Pixels Per Unit 等于 8 意味著游戲世界里一個(gè)單元中有 8 x 8 個(gè)像素。我們將為所有貼圖賦予這個(gè)值。選擇8是因?yàn)閮蓚€(gè) Pac-Dot（食物）間永遠(yuǎn)相隔 8 個(gè)像素，同時(shí)我們也希望這個(gè)間距為游戲中的1單元。為 Pivot 選擇 Bottom-Left 是由于它會(huì)使之后的對(duì)齊工作更簡(jiǎn)單。

現(xiàn)在我們可以從 Project Area 將地圖 Sprite 拖拽到 Scene 中：

再來(lái)檢查一下 Inspector 并且將地圖的坐標(biāo)設(shè)置成 (0, 0) 以保持清晰：

地圖物理

此時(shí)的地圖還只是一張圖片而已。它并不屬于整個(gè)物理世界，物體不會(huì)與它碰撞并且吃豆人還是能穿墻的。所以來(lái)給地圖中的每面墻加上 Collider 吧。

在 Inspector 中選擇 Add Component->Physics 2D->Box Collider 2D：

如果我們往 Scene 里看一下就會(huì)發(fā)現(xiàn) Unity 用 Collider 將整個(gè)地圖給包裹住了，我們可不希望這樣：

我們真正想要的是地圖中的每面墻由一個(gè) Collider 包裹。實(shí)現(xiàn)它有兩種做法。我們可以創(chuàng)建一個(gè)算法來(lái)讀取迷宮圖片然后生成一系列基于它的 Collider，或者全部手動(dòng)添加。

點(diǎn)擊 Inspector 中的 Edit Collider 按鈕：

提示：這個(gè)按鈕是 Unity 4.6 中新添加的，所以若你看不到這個(gè)按鈕請(qǐng)確保使用了最新版本。

這允許我們?cè)趫?chǎng)景中使用綠點(diǎn)修改Collider：

我們將為迷宮中的每一堵墻重復(fù)這一過(guò)程。需要做的就是選擇 Add Component->Physics 2D->Box Collider 2D，點(diǎn)擊 EditCollider 按鈕并在 Scene 中修改它直到適合相鄰的那堵墻。

每個(gè)Collider的精確是很重要的。舉例來(lái)說(shuō)，如果我們放大來(lái)看，這些綠線應(yīng)該完美包裹藍(lán)色的方塊：

實(shí)現(xiàn)的技巧是選擇 Collider 中的 Center 和 Size 屬性，那樣它們就一直是 1.25、 1.5、 1.75 或 2.00，永遠(yuǎn)不會(huì)出現(xiàn)像 1.24687 或 1.25788 這樣的數(shù)字。這里有一些例子：

提示：如果稍后你的吃豆人在迷宮中卡住或者移動(dòng)有困難，那就是由于 Maze Collider 沒(méi)有被完美放置。

下面是最終效果：

提示：校準(zhǔn)所有的 Collider 可能得花上一些時(shí)間。

添加吃豆人

吃豆人Sprite

現(xiàn)在到了我們游戲中最重要的部分了：吃豆人。我們將需要每個(gè)移動(dòng)方向的不同動(dòng)畫(huà)：

- 右

- 左

- 上

- 下

來(lái)把所有動(dòng)畫(huà)畫(huà)在一張圖里，同一方向的動(dòng)畫(huà)位于位于圖中的一行：

提示：右鍵單擊圖片，選擇 Save As... 并保存在項(xiàng)目 Assets/Sprites的文件夾里。

我們將為它使用下面的 Import Settings：

切割 Pac-Man Sprite

將 Sprite Mode 設(shè)置成 Multiple 是很重要的，那將告訴 Unity 在我們的 Sprite 里哪里有多于一個(gè)的吃豆人。來(lái)通過(guò)點(diǎn)擊按鈕打開(kāi) Sprite Editor：

現(xiàn)在我們可以告知 Unity 哪些地方的吃豆人動(dòng)畫(huà)切片是定位在我們的 Sprite 中的。我們將選擇 Slice，然后將其切割成 16 x 16 Grid 并在之后按下 Slice 按鈕：

一旦Sprite 被切割好，我們就可以再次關(guān)閉 Sprite Editor 了。如果 Unity 詢(xún)問(wèn) Unapplied Import Settings，那就點(diǎn)擊 Apply。

結(jié)果就是我們現(xiàn)在在 Project Area 的Pac-Man Sprite 之下有了 12 片：

創(chuàng)建吃豆人動(dòng)畫(huà)

好了，現(xiàn)在我們有了動(dòng)畫(huà)的切片，可以用它來(lái)創(chuàng)建 4 個(gè)動(dòng)畫(huà)。

right (Slice 0, 1 and 2)

右（切片 0、1 和 2）

left (Slice 3, 4 and 5)

左（切片 3、4 和 5）

up (Slice 6, 7 and 8)

上（切片 6、7 和 8）

down (Slice 9, 10 and 11)

下（切片 9、10 和 11）

來(lái)創(chuàng)建一個(gè) right 動(dòng)畫(huà)吧。

然后將它們拖拽到 Scene 中：

現(xiàn)在我們無(wú)論何時(shí)將一些切片拖入到場(chǎng)景中，Unity 都將會(huì)知道我們希望通過(guò)它們創(chuàng)建一個(gè)動(dòng)畫(huà)，因此它會(huì)自動(dòng)詢(xún)問(wèn)我們存放動(dòng)畫(huà)的位置。來(lái)將它以right.anim 的名字存放于一個(gè)新建的 PacmanAnimation 文件夾中。Unity 就為場(chǎng)景添加了一個(gè) pacman_0 GameObject 并在 Project Area 添加了兩個(gè)文件：

第一個(gè)文件是可以具體說(shuō)明如動(dòng)畫(huà)速度以及混合樹(shù)等的動(dòng)畫(huà)狀態(tài)機(jī)。第二個(gè)是動(dòng)畫(huà)本身。接下來(lái)為剩下的動(dòng)畫(huà)（切片 3、4、5 作為左；切片 6、7、8 作為上以及切片 9、10、11 作為下）重復(fù)上述過(guò)程。

這里是 Hierarchy 在操作后的樣子：

Unity 后清理

Unity 為每個(gè)動(dòng)畫(huà)都創(chuàng)建了一個(gè)GameObject，但我們只需要第一個(gè)，很快就能知曉原因。所以來(lái)選中剩余三個(gè)，右鍵單擊并刪除它們：

在 Project Area 里一個(gè)相似的情況發(fā)生了。我們現(xiàn)在有了 4 個(gè)動(dòng)畫(huà)以及 4 個(gè)動(dòng)畫(huà)狀態(tài)機(jī)：

再一次的，我們只需要一個(gè)動(dòng)畫(huà)狀態(tài)機(jī)即可，所以刪除其它三個(gè)：

吃豆人動(dòng)畫(huà)狀態(tài)機(jī)

此時(shí)我們擁有了 4 個(gè)動(dòng)畫(huà)文件，但 Unity 還并不知道該在何時(shí)播放哪個(gè)動(dòng)畫(huà)。解決方法一部分靠 Unity 自身驚人、強(qiáng)大的 Mecanim 動(dòng)畫(huà)系統(tǒng)。我們將需要一個(gè)擁有 4 種狀態(tài)的動(dòng)畫(huà)狀態(tài)機(jī)：

右

左

上

下

同樣還需要添加一些 Transition 來(lái)讓 Unity 知道何時(shí)從一個(gè)動(dòng)畫(huà)狀態(tài)切換到另一個(gè)。

提示：Unity 會(huì)在處于 right 狀態(tài)時(shí)一直循環(huán)播放 right 動(dòng)畫(huà)。它將需要使用 Transitions 來(lái)知道何時(shí)切換到另一個(gè)狀態(tài)。Unity 會(huì)全部自動(dòng)完成，我們需要做的只需用稍后的一段代碼來(lái)通知它吃豆人的運(yùn)動(dòng)方向。

好了，來(lái)雙擊 Project Area 里的 pacman_0 動(dòng)畫(huà)狀態(tài)機(jī)文件：

現(xiàn)在我們可以在 Animator 中看到狀態(tài)機(jī)了：

創(chuàng)建其它狀態(tài)

right 狀態(tài)已經(jīng)在 Animator 中了，所以就簡(jiǎn)單將 left.anim 文件從 PacmanAnimation文件夾中拖拽到 Animator 里來(lái)添加狀態(tài)：

為另外兩個(gè)狀態(tài)重復(fù)這一過(guò)程：

Mecanim 特別厲害的一點(diǎn)是它將自動(dòng)管理所有的動(dòng)畫(huà)狀態(tài)。我們所要做的就是告訴 Mecanim 來(lái)注意吃豆人的運(yùn)動(dòng)方向，不需要做別的了。Mecanim 將會(huì)靠自己來(lái)在各個(gè)動(dòng)畫(huà)狀態(tài)間轉(zhuǎn)換，不需要我們的指引。

創(chuàng)建參數(shù)

所以讓我們來(lái)告知 Mecanim 需要注意吃豆人的運(yùn)動(dòng)方向吧。一個(gè)運(yùn)動(dòng)方向是一個(gè) Vector2 類(lèi)型，下面的圖片展示了一些可能的運(yùn)動(dòng)方向：

我們的吃豆人將只需要 4 個(gè)運(yùn)動(dòng)方向（上、下、左、右）。這就意味著動(dòng)畫(huà)狀態(tài)機(jī)里只需要一下 4 種 Transitions：

如果 DirY > 0 那么就 up（like DirY=1，DirY=2，DirY=3 等等）

如果 DirY < 0 那么就 down（like DirY=-1，DirY=-2，DirY=-3 等等）

如果 DirX > 0 那么就 right（like DirX=1，DirX=2，DirX=3 等等）

如果 DirX < 0 那么就 left (like DirX=-1，DirX=-2，DirX=-3 and so on)

再來(lái)看一下 Animator 的左側(cè)區(qū)域并且選擇 Parameters 標(biāo)簽：

這里我們要點(diǎn)擊右側(cè)的 并添加一個(gè)名為 DirX 的 Float 類(lèi)型參數(shù)，再添加一個(gè)名為 DirY 的 Float 類(lèi)型參數(shù)：

之后我們就可以通過(guò)如下代碼設(shè)置這些參數(shù)：

GetComponent<Animator>().SetFloat('DirX', 0);

GetComponent<Animator>().SetFloat('DirY', 0);

創(chuàng)建 Transitions

我們希望 Unity 能基于參數(shù)自轉(zhuǎn)換動(dòng)畫(huà)狀態(tài)。這些Transition 是被用于實(shí)現(xiàn)這一效果的。舉例來(lái)說(shuō)，我們可以添加一個(gè)從 left 到 right 的 Transition 帶有一個(gè) DirX > 0 的條件。

不管怎樣最好還是要有一個(gè)小的容差，因?yàn)楦↑c(diǎn)值不總是準(zhǔn)確的，這就是為什么我們?nèi)《褂?DirX >0.1。

現(xiàn)在我們也必須為其它到 right 的狀態(tài)使用 DirX > 0.1 Transition。想要省點(diǎn)力氣，可以使用 Unity 的 Any State。

Any State 確實(shí)代表了任意的狀態(tài)。所以如果我們創(chuàng)建了一個(gè)從 Any State 到 right 的 Transition 就等同于從 left、up 和 down 到 right 的。

右鍵單擊 Any State 并選中 MakeTransition。之后我們可以將白色箭頭拖拽到 right 狀態(tài)上：

現(xiàn)在我們可以點(diǎn)擊白色尖頭并且看一下 Inspector，在那里我們可以修改 Transition 的 Condition（換句話說(shuō)，轉(zhuǎn)換狀態(tài)的時(shí)機(jī)）。我們將把它設(shè)置成 DirX > 0.1：

提示：按下底部右側(cè)的 以添加一個(gè) Condition。

同樣在 Settings 里關(guān)閉 Can Transition To Self：

提示：這避免了異常狀況的發(fā)生，比如一個(gè)動(dòng)畫(huà)可能會(huì)在按下一個(gè)移動(dòng)鍵的時(shí)候一直重啟。

結(jié)果，無(wú)論何時(shí)吃豆人都向右走（DirX > 0.1），animator將會(huì)轉(zhuǎn)換到 right 狀態(tài)并播放動(dòng)畫(huà)。

再添加 3 個(gè) Transition：

Any State 到 left 伴有 Condition DirX< -0.1

Any State 到 up 伴有 Condition DirY> 0.1

Any State 到 down 伴有 Condition DirY< -0.1

以下是 Animator 現(xiàn)在的樣子：

我們基本上完成了動(dòng)畫(huà)狀態(tài)機(jī)。這里還有最后一個(gè)要校準(zhǔn)的內(nèi)容，所以選中所有狀態(tài)然后在 Inspector 里修改它們的 Speed 來(lái)使動(dòng)畫(huà)看起來(lái)不太快：

如果我們按下 Play，就可以看到 right 動(dòng)畫(huà)：

原文鏈接：https:///unity/-pacman-game

譯文版：http://www./thread-98978-1-1.html