Contents

[Zenva 免費部落格式課程]

在本系列課程中，我們將構建一個多人炸彈超人( Bomberman )遊戲。我們的遊戲將有一個標題場景(title scene)，這將允許玩家(player)創建或加入遊戲。此外，它將有一個戰鬪場景(battle scene)，玩家將以競爭的方式和對方打鬪。

在這第一個教學中，我們將為遊戲建構基本的基礎設施，如標題和戰鬪場景，以及在遊戲中添加玩家。接下來我們將繼續添加功能。

為了讓你有辦法聽懂這個教學，你應該熟悉以下概念：

C＃程式設計
基本的Unity 概念，如如何輸入資產，建立預製和添加組件
基本平鋪地圖製作，例如添加圖塊和建圖塊圖層

在開始閱讀本教學之前，先建立一個新的Unity專案，並通過原始碼輸入可用的所有精靈。

資產版權

本教學中使用的資產由 Cem Kalyoncu / cemkalyoncu和Matt Hackett / richtaur 創建，並由 “usr_share” 提供，通過 Creative Commons 許可證，允許在歸屬下進行商業使用。你可以在 http://opengameart.org/content/bomb-party-the-complete-set 或以下原始碼的下載連結。

原始碼檔案

你可以在來信 info@esast.com , 主旨 Bomberman, 給我們你的email, 我們將用Dropbox與你共享. Soft & Share已跟Zenva要到原始碼資料

將spritesheets切片

一旦你從原始碼輸入了精靈(sprites)，你會注意到，這些精靈(sprites)只是簡單的一些圖像，而其他的是精靈片(spriteheets)。這些圖像已經好到可被使用了，但是我們需要將精靈片 (spriteheets) 分割成幀(frame)。

可行方法是通過在編輯器中選擇spritesheet，然後將其 Sprite Mode 更改為多個(Multiple)。然後我們可以點擊 “Sprite Editor” 按鈕來切片(Slice)。

打開 Sprite Editor 窗口後，切片按鈕將顯示切片(Slice)選項。通常，我們可以使用自動類型(Automatic Type)切片並點擊“切片”(Slice)按鈕，這將為每一幀(frame)找到最佳的分隔。你可以使用此切片類型做炸彈和玩家的精靈片(spritesheets)。

但是，對於地形設置(tileset)的切片來說，選擇自動類型(Automatic Type)不起作用，因為某些圖塊太靠近，並且太相似。所以我們要選擇按單元格大小類型的網格(Grid By Cell Size Type)。該地形設置(tileet)的單元格大小為16×16。最後，我們點擊切片(Slice)按鈕。

現在我們已經設定好了所有的遊戲精靈(sprites)，我們可以開始構建遊戲場景，從標題場景(Title Scene)開始。

標題場景

在本教程中，標題場景(Title Scene)將非常簡單。只需要簡單地顯示遊戲標題，並顯示“開始遊戲”的訊息。然後，我們將加一個腳本，讓玩家案任何一個鍵時就開始遊戲。為了顯示遊戲標題和訊息，我們將需要製作一個畫布(Canvas)。

標題畫布

Unity中的Canvas是一個可以放置UI元素的物件，例如文本、圖像和按鈕。為了製作畫布(canvas)，只需右鍵單擊物件層次結構(hierarchy)，然後到 UI-> Canvas。我們將把這個物件稱為 TitleCanvas (標題畫布)。

我們需要在 Canvas 物件中設置一些屬性。首先，我們將把渲染模式(Render Mode)設訂為螢幕空間- 相機(Screen Space-Ca,era) ，我們將選擇我們的主相機作為渲染(Render)相機。此外，我們將更改 UI 縮放模式(UI Scale Mode)以隨螢幕尺寸做縮放(Scale With Screen Size)，以便我們的畫布在遊戲畫面大小發生變化時表現良好。

現在我們有了我們的畫布，我們將添加它的元素。首先，我們添加一個BackgroundImage，但是添加一個新的圖像作為Canvas的子項（UI-> Image）。我們不會為背景選擇任何來源圖像，但是我們要將其顏色設定為黑色。

BackgroundCanvas的第二個子項將是另一個圖像，但這個將被稱為GameTitle。GameTitle將是我們的精靈檔案夾中的圖像，所以選擇它作為GameTitle物件的來源圖像。

最後，我們將添加一個文本作為Canvas的子項（UI-> Text），這將被稱為StartGameText。在此物件中，我們需要設定其文本內容和字體屬性。下圖顯示了我使用的設定，但你可以做在遊戲中看起來更好的選擇。

現在我們有標題場景(Title Scene)中的所有物件，我們只需要添加一個事件即可當玩家按任意鍵時開始遊戲。

開始遊戲

我們將使用一個非常簡單的腳本來開始遊戲，如下所示。

我們只需要實現這個腳本的Update方法，在這個方法中我們檢查是否有任何鍵被按下（Input.anyKey是true）。如果是這樣，我們載入一個叫做Battle的場景。但是，為了調用此LoadScene方法，你需要在腳本中使用 SceneManagement 命名空間，所以請記住要做這件事。

建腳本後，將其添加到 StartGameText 物件。

但是，如果你嘗試跑這遊戲，它將仍然無法打開下一個場景。為了做到這一點，我們需要：

建一個名為“戰鬥(Battle)”的新場景
在我們的遊戲的Build列表中添加兩個場景（Title 和 Battle）

第一件事很簡單。只需建一個新的空白場景，並稱之為“Battle”。現在，第二件事我們需要去File-> Build Settings。然後，你可以將這兩個場景拖放到“Build Settings”窗口的“Scenes in Build”部分。

現在，你應該能夠跑標題場景(Title Scene)並開始遊戲。

我們的下一步將是創造戰場(Battle Scene)。

戰鬪場面

戰鬪場面(Battle scene)將是所有的遊戲發生的地方。玩家將能夠通過現場放下炸彈。每一枚炸彈會在一段時間後爆炸，造成爆炸。爆炸可以破壞地塊，而不是牆壁。如果爆炸擊中一名玩家，玩家就會死亡。另外，如果爆炸發生時衝擊到炸彈，炸彈將會立即爆炸。

在我們的戰鬪場景中需要做的第一件事就是製作我們的戰鬪地圖。

製作並導入Tiled 地圖

我們將為我們的戰鬪場景(Battle scene)創建一個 Tiled 的地圖。為了做到這一點，我們將使用Tiled 地圖編輯器。

由於在 Tiled 中建構地圖不是本教學的目標，我不會解釋如何使用它建構戰鬪地圖的細節。所以，請隨時使用源始碼中提供的地圖(如下所示）或建立自己的地圖。但是，如果你建立自己的地圖，請小心以下兩件事情：

我只是添加背景和牆壁的磁磚(tile)層。其他物件，如玩家(player)和磚塊(block)，稍後將在Unity中添加。
為了正確地為牆壁設置碰撞器(collider)，我們需要相應地配置一些磁磚(tile)對撞機。你可以經由選擇應該相互碰撞的圖塊(例如牆磚)並選擇 Tile->Tile Collision Editor來實現。這將打開一個像下面的視窗，你可以在其中設置磁磚的碰撞區域。

建立地圖後，你可以使用Tiled地圖格式保存地圖，並將其添加到Unity項目中的Maps檔案夾。

但是，我們不能簡單地在Unity中打開這個地圖。我們將需要另一個工具將其轉換為Unity物件，以便我們可以將其添加到我們的遊戲中。

我們將使用Tiled2Unity工具來作轉換。該工具接收輸入的Tile圖，並在你要用這地圖的遊戲中創建Unity物件。在這個過程中，它還會在需要時創建磁磚(tile)的碰撞器(colliders)。

安裝Tiled2Unity後，你將在其安裝檔案夾中找到兩個重要的文檔案：Tiled2Unity可執行檔和Tiled2Unity Unity包。

首先，打開Tiled2Unity包，以便它將被輸入你的Unity專案中。這將在你的Assets檔案夾中建立一個Tiled2Unity檔案夾，其中包含一個Tiled2Unity.export檔（在許多其他檔案和檔案夾中）。此檔案在未來輸入你的地圖時將很重要。

現在，打開 Tiled2Unity 可執行的檔案。這將打開一個像下面的視窗，你可以在其中選擇要輸入到Unity的地圖。Export To 的位置是前面提到的 Tiled2Unity.export 檔案。

你還可以在輸出之前預覽地圖。這應該顯示牆壁的碰撞器(colliders)。

將地圖輸出到Unity後，它將在 Tiled2Unity / Prefabs 檔案夾中為其建一個預製。然後，你可以將此預製添加到遊戲中。但是，你將需要更改其規模，因為它將會對遊戲畫面太大，如果維持原樣。

並且隨著我們已經完成了在我們的Unity專案中輸入我們的 Tiled 地圖。現在，我們將在我們的戰鬪場景(Battle Scene)中添加其他物件。從磚塊(blocks)開始，可能被用炸彈炸掉。

添加磚塊

我們先來建一個預製的磚塊。該磚塊將只有一個Sprite Renderer 和一個 Box Collider。精靈(sprite)將是來自瓷磚組(tileset)的其中一片。但是，請注意，我們正在將 Sprite Renderer 的Sorting Layer(排序層)設置為遊戲。這是你需要創建的自訂圖層，以便這些磚塊(blocks)出現在地圖上。

然後，我們將添加一個空物件作為BattleMap的子項。這個空物件將被稱為磚塊(blocks)，它將對所有磚塊(blocks)進行分組(group)。

現在，我們可以在我們的遊戲中添加Block預製，並將它們作為磚塊(blocks)物件的子項。你可以隨意放置磚塊（下圖顯示了一個例子）。但是，請注意，你需要正確設定磚塊的大小，這樣才會看起來大小合宜。

現在我們有牆壁和磚塊了，我們將創建遊戲的玩家(Player)物件。

移動玩家

我們需要做的第一件事是創建一個玩家(Player)預製，並允許它在地圖上走動。

所以，建一個名為 “Sprite Renderer” 的新的預製(Prefab)，一個 Rigidbody 2D（以便我們可以控制其速度）和一個 Box Collider 2D（來檢查碰撞）。此外，你將需要調整其規模，使其在我們的戰鬪地圖中具有合理的尺寸。

現在，我們將建一個名為 Player Movement 的新腳本，如下所示。腳本獲取移動軸（水平和垂直），以確定兩個方向上的玩家速度。玩家移動的方式如下：玩家可以移動到給定的方向（例如，向左移動），如果它還沒有移動到相反的方向（向右）。

所以，腳本中的第一個條件檢查玩家速度是否小於或等於零（這意味著玩家沒有向右移動）。如果是這樣，我們可以在X軸上改變其速度，使其向左移動。我們為所有方向做同樣的事情。最後，我們設置玩家物件的速度。

現在，我們將這個腳本添加到玩家預製中，如果你現在玩遊戲，你可以移動玩家了。然而，它仍然沒有表現出它的步行動畫。所以，我們的下一步將是添加玩家的動畫及其轉換。

動畫處理玩家

為了在Unity中添加動畫，我們需要做的第一件事是建一個動畫控制器(Animator Controller)。我要做的是在Assets / Animations / Player中建一個新檔案夾，然後我將建一個名為PlayerAnimator 的新的動畫控制器（你可以通過單擊 Create-> Animator Controller 創建Animator）。然後，我們可以將此Animator添加到玩家預製。

現在我們要建玩家(Player) 動畫。玩家將有八個動畫：四個閒置動畫（每個方向一個）和四個步行動畫（每個方向一個）。

一旦你創建了所有的動畫（你不需要設置動畫frames），我們將把它們添加到 PlayerAnimator。所以，在選擇玩家預製件之後，打開 Unity 中的 Animator編輯器。這將顯示 Animator 狀態機。然後，將動畫拖放到Animator。現在，如果切換到動畫編輯器(Animator editor)，你可以為每個動畫設置幀(frames)。這將為每個動畫創建一個狀態(state)。

閒置的動畫只會顯示玩家站在一個給定的方向，所以他們只有一幀(frame)。步行動畫將具有該步行運動的許多幀(frames)。下圖顯示了 IdleLeft 和 WalkingLeft 動畫的示例。你可以類似的方式創建其他的。但是，請注意，你需要在動畫中正確設置樣本數。

當玩家移動往那方向移動時，我們想要有走動的動畫表現，所以 Animator 狀態將被 PlayerMovement 的腳本控制。我們可經由於 Animator 添加參數來控制動畫（在Animator編輯器的Parameters選項卡中）。我們要添加兩個參數：DirectionX 和 DirectionY。每個參數將是 -1 和 1 之間的整數，並且會告訴Animator 玩家是否往給定的方向移動。例如，如果DirectionX 參數等於 1，則玩家應轉換到 WalkingRight 動畫。

現在我們需要使用參數來做動畫之間的轉換。將有三種類型的轉換：

如果玩家停止並開始向任何方向移動，它應該開始播放該方向的動畫。所以，我們需要在每個閒置(Idle) 狀態與每個行走(walking)狀態之間放入轉換(transition)。轉換的參數將取決於玩家移動的方向。
如果玩家往給定的方向移動，並且 DirectionX 和 DirectionY 參數都變為0，則應該返回到IdleState。正確的閒置狀態取決於當前的步行動畫。例如，如果當前動畫是WalkingLeft，它將返回到IdleLeft狀態。
如果玩家往給定的方向移動，並且 DirectionX 或 DirectionY參數改變，它將做不同的步行動畫。例如，如果當前的動畫是 WalkingLeft，但是最終 DirectionX 變為 0 並且DirectionY 變為1，則應該轉換到 WalkUp 動畫。

添加所有這些轉換規則，PlayerAnimator 最終應該是這樣的：