[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)。

spritesheet_properties

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

automatic_slicing.png

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

manual_slicing.png

現在我們已經設定好了所有的遊戲精靈(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),以便我們的畫布在遊戲畫面大小發生變化時表現良好。

background_canvas

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

background_image.png

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

game_title.png

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

start_game_text

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

開始遊戲

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

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

UNITYENGINE

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

start_game_text

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

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

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

build_settings.png

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

title_scene.png

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

戰鬪場面

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

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

製作並導入Tiled 地圖

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

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

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

battle_tiled_map-1.png

tile_collision_editor_wall

建立地圖後,你可以使用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 檔案。

tiled2unity_export.png

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

tiled2unity_map.png

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

battle_map_properties.png

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

imported_map_without_blocks.png

添加磚塊

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

block_prefab.png

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

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

imported_map_with_blocks.png

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

移動玩家

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

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

player_prefab1.png

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

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

playercode

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

動畫處理玩家

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

player_prefab2

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

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

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

idle_left_animation

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

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

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

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

player_animator

然而,仍然有一些細節我們需要修復我們的動畫。首先,走動的動畫應該在結束時循環。所以,選擇這些動畫,並檢查循環時間(Loop Time)框。

walking_animation_loop

此外,為了在動畫之間有更平順的過渡,我們將把它們之間的延遲設置為0.我們可以通過選擇一個轉換(transition),然後檢查“有退出時間(Exit Time)”和“固定持續時間(Fixed Duration)”框,並將“轉換持續時間(Transition Duration)”設置為0。

animation_transition_duration.png

最後,我們需要在 PlayerMovement 腳本中設置 DirectionX 和 DirectionY 參數。這將如下所示完成。一旦我們將速度設置在給定的方向,我們會相應地更新 DirectionX 或 DirectionY 參數。如果玩家沒有在給定的軸上移動,我們將其方向參數設置為0。

finalcode.png

現在,你可以嘗試玩遊戲並移動玩家。檢查所有動畫是否正確播放,以及玩家是否與牆壁正確碰撞。

battle_scene_with_player-2.png

本教學系列的這一部分於此結束。在下一部分中,我們將允許玩家放炸彈,以及使炸彈爆炸和銷毀遊戲中的磚塊(blocks)。 

本文作者:

Renan Oliveira

Renan 是計算機科學碩士生和遊戲愛好者。他在遊戲開發方面的興趣在幾年前就開始上2D遊戲引擎課程,做出些小型的2D引擎和遊戲。他接著開始上 Zenva遊戲開發課程 的Javascript和Phaser。目前他正在製作自己的遊戲。 查看Renan Oliveira發表的所有分享文

本文由Zenva授權翻譯,原文: How to Create a Multiplayer Bomberman Game in Unity – Part 1

續集 :如何在Unity中製作多人炸彈超人遊戲 – 第2部分 

你也許會有興趣

cvision.png game.png mobilegame-platinum

覺得這篇有用嗎? 歡迎分享! 

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s

分類

遊戲開發