一、前言

收到一個高興的訊息： 2018 年 Github 最新統計出爐， Godot 是所有專案裡增長速度最快的第三位！所以，我還是非常看好它的，哈哈！連結在此： Fastest growing open source projects ，截圖如下：

吹逼結束，本著承上啟下的精神，本篇一起來學習並打造一個“美麗壯觀”的遊戲世界。使用的工具是 Godot 中的 TileMap 瓦片地圖節點。注意：本系列文章包括本篇依舊使用 Godot 3.1 預覽版講述故事的經過，但這並不影響學習使用 Godot 3.0 版本中的瓦片地圖製作，不過在此我要提醒的是：預覽版中 TileMap 新增了一些強大且實用的功能，這些我會在後面講解，然後請記得在使用這些新功能的時候，務必時刻儲存你的遊戲專案，不然有可能因為 Crash 發生奔潰而前功盡棄！嗯，預覽版還是有點小 Bug 的， Good luck!

二、正文

本篇目標

1. 瞭解瓦片地圖的一些理論知識
2. 使用圖片製作瓦片集 TileSet
3. 使用 SpriteSheet 製作瓦片集 TileSet
4. 介紹 Godot 3.1 中 TileMap 的一些新特性

TileMap介紹

要打造一個好的 2D 平面遊戲，沒有一個好的遊戲地圖，那是萬萬不行的！你可以沒有悅耳的背景音樂，可以沒有花哨的粒子特效，沒有動人的劇情設計，但是你至少得有一個完整的遊戲地圖場景來證明你那“偉大”的遊戲的存在吧？！在 2D 遊戲中，要製作遊戲地圖相對來時還是很簡單的，特別是涉及多個關卡地圖，我們通常都是使用 TileMap 瓦片地圖來實現， TileMap

瓦片地圖，簡單地說就是一個個瓦片堆積起來的一個地圖。如果你有 iOS 遊戲開發經驗，熟悉 SpriteKit 的話，那麼你肯定對 TileMap 非常瞭解， Xcode 對瓦片地圖的支援非常完善，功能很強大也易於上手，缺點是 Xcode 只支援 Mac OS 或者 iOS 系統。另外，熟悉 Unity3D 的朋友們也知道，在 Unity 2018 版本之前，使用 Unity製作 2D 遊戲的地圖也是很不方便的，如果你想在 Android 或者 Window/Linux 等其他作業系統上開發遊戲，那麼你需要使用其他的第三方軟體來輔助製作地圖了。

這裡我強烈推薦一款開源軟體名為 Tiled ，功能非常強大！使用超方便！能很好地支援並匯出你設計好的地圖到其他遊戲引擎中使用，比如配合 LibGDX 框架開發跨平臺 2D 遊戲。本節的瓦片地圖圖片就是從 Tiled 軟體自帶的例子中拿過來的，建議大家瞭解一下這款軟體，有興趣的可以玩一玩，對瓦片地圖的製作和了解還是有幫助的。 :smiley:

一個遊戲場景就是一個簡單的世界，我們可以為這個世界新增很多有趣的元素，讓玩家有興趣去探索，這裡我們使用瓦片地圖來製作我們的遊戲場景，實際上，它是由很多小瓦片組成，當然，完全可以根據情況再新增一些背景，這些小瓦片我們稱之為： Tile 。瓦片可以很簡單，也可以非常複雜，但是在同一個遊戲世界裡其大小都是統一的，瓦片的型別主要有三種類型： 90° 直角俯視地圖（ Orthogonal/Square ）、45° 等距斜視地圖（ Isometric ）、等六邊形地圖（ Hexagonal ）。這三種類型在 Godot 中都是支援的，本篇文章我們主要討論第一種型別，也是最常用的一種型別吧。 :grin:

製作TileSet

理論到此結束，擼起袖子開始幹起！要打造瓦片地圖，我們首先需要準備好所有的瓦片——也就是所謂的 TileSet 瓦片集。在 Godot 中製作瓦片集是非常簡單的，我這裡介紹常用的兩種方式，以及第三種：利用 Godot 3.1 中瓦片地圖新特性快速打造自動瓦片地圖集！

第一種方式：使用單獨的圖片製作瓦片

第一種方式算是比較古老的一種方法了，在圖片數量比較少的時候我們可以選擇這種方式，快捷又方便。首先我們需要準備一些相同大小的圖片：

接下來，我們需要把所有圖片製作成一個一個的 Sprite 精靈節點，這些節點最好是放在一個單獨的遊戲場景中，方便我們日後編輯。這裡我單獨建立一個名為TileSet_Sprites 的遊戲場景，然後把所有瓦片圖片資源直接拖拽到場景中，並選擇Sprite 方式建立所有的節點。接著使用 Godot 選單直接把場景中的所有 Sprite 節點轉化為瓦片，製作 TileSet 瓦片集資源。在選單欄中依次選中： Scene -> Convert To -> TileSet ，選擇專案中某個位置儲存資源為 tileset_sprits.tres ，一鍵完成製作我們所需要的瓦片集，既簡單又快捷！

瓦片集準備好了，下一步就是使用它來製作你那偉大的遊戲地圖了！我們製作地圖的節點叫做 TileMap 瓦片地圖，使用也很簡單，只要把 TileSet 資源新增到 TileMap 即可。首先建立一個主場景，在根目錄下新增一個 TileMap 地圖節點，注意，這裡一定要設定好地圖的單元尺寸，即 Cell 屬性，示例中瓦片尺寸都是 32x32 畫素，所以按此設定即可。接著在 Tile Set 屬性選單下點選 Load 載入我們剛才製作完的瓦片集資源tileset_sprits.tres ，這時你會看到所有的小瓦片都出現在編輯器中了，選中任意一個瓦片，開始你的藝術創作吧，騷年！ :sunglasses:

第二種方式：使用圖片合集製作瓦片

當我們製作的地圖元素非常多的時候，第一種方式明顯不合常理了！圖片過多導致檔案難以管理，載入效能也會下降，這時候我們一般會把圖片製作成 SpriteSheet 圖片精靈集，這樣既能減少檔案數量，方便管理，又能提高載入速度和遊戲的效能，關於SpriteSheet 的原理我推薦大家到 TexturePacker 軟體官網上瀏覽開發者的相關文章： What is a sprite sheet? ，這篇文章圖文詳細介紹了什麼是 SpriteSheet ，以及它的優勢和原理。

除了圖片資源形式不同，其他原理和第一種方式並沒有什麼不一樣：我們把單張SpriteSheet 圖片轉化為一個一個的 Sprite 節點，然後一鍵轉換為 TileSet 資源就可以了。理論如此，但在操作過程中會有一個問題：一張大圖由很多的小圖拼成，這些小圖需要製作成一個個的 Sprite 節點，那麼如何精確的把這張大圖劃分為大小統一的小圖呢？這樣做工作量豈不是比第一種方式要大很多？——別急， Godot 肯定想到這點了，既然大小統一，我們只需要開啟 Snap 吸附功能就可以輕鬆完成區域劃分了！具體操作在場景視窗的上方選單欄選項裡，開啟吸附功能，並設定相關引數，然後就可以精確地進行相關操作了：

停！！！貌似這並沒有什麼卵用啊？是的，這個吸附功能只在場景編輯操作中適用，和我們現在要製作的精靈節點並沒有半毛錢關係，不過原理是一樣的。建立一個 Sprite 節點，把 SpriteSheet 大圖拖拽到 Texture 屬性下，然後勾選開啟 Region 特性，開啟 TextureRegion 編輯工具視窗，吸附功能就在這個視窗中進行設定。注意：我所使用的這張圖的每一個小圖片都有偏移，偏移畫素為 1 個畫素，所以需要在 Grid Snap 網格吸附選項裡進行相關設定。具體操作如下動圖：

雖然我只操作了兩張圖，不過還是蠻快的，只要按住 Ctrl + D 複製一下節點，利用吸附功能框選一下 Sprite 的材質區域即可，付出一點耐心，很快就能把所有節點製作完成，最後和第一種方式一樣，一鍵把場景轉化為 TileSet 資源。在遊戲主場景中，再建立一個新的地圖，隱藏剛才的建立的地圖，選擇我們新建的 TileSet 資源進行地圖繪畫，效果如下，注意我框選的幾個角落：

第三種方式：新版本中瓦片地圖新特性

終於輪到新版本中的地圖新特性了！這種方式最為方便，也是功能最強大的一種方式，操作流程也與上面兩種方式截然不同。再次提醒一下：在使用 Godot 3.1 預覽版中的 TileMap 新功能的時候，務必時刻儲存你的遊戲專案，因為預覽版還不夠穩定，有可能會產生意想不到的奔潰，牢記牢記！

第一步，使用瓦片地圖之前，我們需要手動建立一個空的 TileSet 資源，並儲存到合適位置：

記住，這種方式同樣適用於其他資源的建立。第二步就是愉快地使用 Godot 3.1 版本中的地圖新特性了，使用新功能快捷建立一個強大的自動地圖集。啥叫*自動地圖集*？參考上面的那張效果圖，注意幾個角落，所謂的自動地圖集，顧名思義就是畫地圖的時候不需要手動去新增那八個角落了， Godot 自動幫我們完成，是不是很方便？

如果上圖看不清可以檢視大圖： Godot 3.1 自動地圖集操作詳細動圖。另外，TileMap 新特性中的有些功能是我們沒見過的，比如，我們製作 TileSet 範圍就是勾畫Region 區域，而 Bitmask 區域則是告訴 TileMap 如何自動完成整片地圖的繪製，Priority 代表圖片出現的概率， Icon 用來設定自動地圖圖示，還有我們後續遊戲場景中會使用到的碰撞功能： Collision 碰撞區域設定，詳細說明我在下圖中都勾選出來了。總之，這麼多新特性，大家可以多做一些嘗試。 :smile:

其他說明

這裡我們只是簡單地嘗試了一下 Godot 中的瓦片地圖製作，後續有機會我還會介紹如何在瓦片地圖上新增一些其他物理特性，比如光照遮擋，或者新增真正的碰撞體，以實現遊戲世界中的牆壁、地面等。

最後， Godot 3.1 中還有一個輔助小特性，可以設定瓦片集合 Atlas ，即一組瓦片組成一個集合，方便地圖繪製，如下圖：

附加知識：關於舊版本 Godot 中的瓦片地圖繪製，如果不熟悉可以先看看 Xcode 中的關於瓦片地圖的一些標記：

這裡有一個例子，如何畫一片海洋區域：

三、小結

本篇就這樣利用多圖完成了，不知道讀者朋友們看完有啥感想？如果你能堅持從我的 Godot 系列第一篇文章讀到本篇文章，那麼非常感謝你的閱讀，其實我最近更新的速度越來越慢，寫完一篇文章至少要耗費我 3 天的閒暇時間，這篇文章更是花費了我一週，因為平時要工作，閒餘時間還不一定有空，所以，等待更新的朋友要耐心點了。讀完，我相信你應該會和我感受一樣： Godot 必定能火！哈哈！最後，附上 InfoQ 中關於 Github 的最新統計資訊報告： GitHub釋出史上最大更新，年度報告出爐！

原創實屬不易，希望大家喜歡！ :smile: