一、前言
收到一個(gè)高興的消息： 2018 年 Github 最新統(tǒng)計(jì)出爐， Godot 是所有項(xiàng)目里增長(zhǎng)速度最快的第三位！所以，我還是非常看好它的，哈哈！鏈接在此： Fastest growing open source projects ，截圖如下：
吹逼結(jié)束，本著承上啟下的精神，本篇一起來(lái)學(xué)習(xí)并打造一個(gè)“美麗壯觀”的游戲世界。使用的工具是 Godot 中的 TileMap 瓦片地圖節(jié)點(diǎn)。注意：本系列文章包括本篇依舊使用 Godot 3.1 預(yù)覽版講述故事的經(jīng)過(guò)，但這并不影響學(xué)習(xí)使用 Godot 3.0 版本中的瓦片地圖制作，不過(guò)在此我要提醒的是：預(yù)覽版中 TileMap 新增了一些強(qiáng)大且實(shí)用的功能，這些我會(huì)在后面講解，然后請(qǐng)記得在使用這些新功能的時(shí)候，務(wù)必時(shí)刻保存你的游戲項(xiàng)目，不然有可能因?yàn)?Crash 發(fā)生奔潰而前功盡棄！嗯，預(yù)覽版還是有點(diǎn)小 Bug 的， Good luck!
主要內(nèi)容： Godot 2D 中瓦片地圖 TileMap 的制作和使用
閱讀時(shí)間： 10 分鐘
永久鏈接：http://liuqingwen.me/blog/2018/10/19/introduction-of-godot-3-part-6-make-tile-map-in-godot/
系列主頁(yè)：http://liuqingwen.me/blog/tags/Godot/
二、正文
本篇目標(biāo)
了解瓦片地圖的一些理論知識(shí)
使用圖片制作瓦片集 TileSet
使用 SpriteSheet 制作瓦片集 TileSet
介紹 Godot 3.1 中 TileMap 的一些新特性
TileMap介紹
要打造一個(gè)好的 2D 平面游戲，沒(méi)有一個(gè)好的游戲地圖，那是萬(wàn)萬(wàn)不行的！你可以沒(méi)有悅耳的背景音樂(lè)，可以沒(méi)有花哨的粒子特效，沒(méi)有動(dòng)人的劇情設(shè)計(jì)，但是你至少得有一個(gè)完整的游戲地圖場(chǎng)景來(lái)證明你那“偉大”的游戲的存在吧？！在 2D 游戲中，要制作游戲地圖相對(duì)來(lái)時(shí)還是很簡(jiǎn)單的，特別是涉及多個(gè)關(guān)卡地圖，我們通常都是使用 TileMap 瓦片地圖來(lái)實(shí)現(xiàn)， TileMap 操作簡(jiǎn)單，效率也高，支持的軟件完善，很多游戲都采用它，比如我們小時(shí)候耳熟能詳?shù)囊恍靶“酝酢庇螒颍撼?jí)瑪利亞、坦克大戰(zhàn)、魂斗羅等等。
瓦片地圖，簡(jiǎn)單地說(shuō)就是一個(gè)個(gè)瓦片堆積起來(lái)的一個(gè)地圖。如果你有 iOS 游戲開(kāi)發(fā)經(jīng)驗(yàn)，熟悉 SpriteKit 的話(huà)，那么你肯定對(duì) TileMap 非常了解， Xcode 對(duì)瓦片地圖的支持非常完善，功能很強(qiáng)大也易于上手，缺點(diǎn)是 Xcode 只支持 Mac OS 或者 iOS 系統(tǒng)。另外，熟悉 Unity3D 的朋友們也知道，在 Unity 2018 版本之前，使用 Unity制作 2D 游戲的地圖也是很不方便的，如果你想在 Android 或者 Window/Linux 等其他操作系統(tǒng)上開(kāi)發(fā)游戲，那么你需要使用其他的第三方軟件來(lái)輔助制作地圖了。
這里我強(qiáng)烈推薦一款開(kāi)源軟件名為 Tiled ，功能非常強(qiáng)大！使用超方便！能很好地支持并導(dǎo)出你設(shè)計(jì)好的地圖到其他游戲引擎中使用，比如配合 LibGDX 框架開(kāi)發(fā)跨平臺(tái) 2D 游戲。本節(jié)的瓦片地圖圖片就是從 Tiled 軟件自帶的例子中拿過(guò)來(lái)的，建議大家了解一下這款軟件，有興趣的可以玩一玩，對(duì)瓦片地圖的制作和了解還是有幫助的。 :smiley:
一個(gè)游戲場(chǎng)景就是一個(gè)簡(jiǎn)單的世界，我們可以為這個(gè)世界添加很多有趣的元素，讓玩家有興趣去探索，這里我們使用瓦片地圖來(lái)制作我們的游戲場(chǎng)景，實(shí)際上，它是由很多小瓦片組成，當(dāng)然，完全可以根據(jù)情況再添加一些背景，這些小瓦片我們稱(chēng)之為： Tile 。瓦片可以很簡(jiǎn)單，也可以非常復(fù)雜，但是在同一個(gè)游戲世界里其大小都是統(tǒng)一的，瓦片的類(lèi)型主要有三種類(lèi)型： 90° 直角俯視地圖（ Orthogonal/Square ）、45° 等距斜視地圖（ Isometric ）、等六邊形地圖（ Hexagonal ）。這三種類(lèi)型在 Godot 中都是支持的，本篇文章我們主要討論第一種類(lèi)型，也是最常用的一種類(lèi)型吧。 :grin:
制作TileSet
理論到此結(jié)束，擼起袖子開(kāi)始干起！要打造瓦片地圖，我們首先需要準(zhǔn)備好所有的瓦片——也就是所謂的 TileSet 瓦片集。在 Godot 中制作瓦片集是非常簡(jiǎn)單的，我這里介紹常用的兩種方式，以及第三種：利用 Godot 3.1 中瓦片地圖新特性快速打造自動(dòng)瓦片地圖集！
第一種方式：使用單獨(dú)的圖片制作瓦片
第一種方式算是比較古老的一種方法了，在圖片數(shù)量比較少的時(shí)候我們可以選擇這種方式，快捷又方便。首先我們需要準(zhǔn)備一些相同大小的圖片：
接下來(lái)，我們需要把所有圖片制作成一個(gè)一個(gè)的 Sprite 精靈節(jié)點(diǎn)，這些節(jié)點(diǎn)最好是放在一個(gè)單獨(dú)的游戲場(chǎng)景中，方便我們?nèi)蘸缶庉?。這里我單獨(dú)創(chuàng)建一個(gè)名為T(mén)ileSet_Sprites 的游戲場(chǎng)景，然后把所有瓦片圖片資源直接拖拽到場(chǎng)景中，并選擇Sprite 方式創(chuàng)建所有的節(jié)點(diǎn)。接著使用 Godot 菜單直接把場(chǎng)景中的所有 Sprite 節(jié)點(diǎn)轉(zhuǎn)化為瓦片，制作 TileSet 瓦片集資源。在菜單欄中依次選中： Scene -> Convert To -> TileSet ，選擇項(xiàng)目中某個(gè)位置保存資源為 tileset_sprits.tres ，一鍵完成制作我們所需要的瓦片集，既簡(jiǎn)單又快捷！
瓦片集準(zhǔn)備好了，下一步就是使用它來(lái)制作你那偉大的游戲地圖了！我們制作地圖的節(jié)點(diǎn)叫做 TileMap 瓦片地圖，使用也很簡(jiǎn)單，只要把 TileSet 資源添加到 TileMap 即可。首先創(chuàng)建一個(gè)主場(chǎng)景，在根目錄下添加一個(gè) TileMap 地圖節(jié)點(diǎn)，注意，這里一定要設(shè)置好地圖的單元尺寸，即 Cell 屬性，示例中瓦片尺寸都是 32x32 像素，所以按此設(shè)置即可。接著在 Tile Set 屬性菜單下點(diǎn)擊 Load 加載我們剛才制作完的瓦片集資源tileset_sprits.tres ，這時(shí)你會(huì)看到所有的小瓦片都出現(xiàn)在編輯器中了，選中任意一個(gè)瓦片，開(kāi)始你的藝術(shù)創(chuàng)作吧，騷年！ :sunglasses:
第二種方式：使用圖片合集制作瓦片
當(dāng)我們制作的地圖元素非常多的時(shí)候，第一種方式明顯不合常理了！圖片過(guò)多導(dǎo)致文件難以管理，加載性能也會(huì)下降，這時(shí)候我們一般會(huì)把圖片制作成 SpriteSheet 圖片精靈集，這樣既能減少文件數(shù)量，方便管理，又能提高加載速度和游戲的性能，關(guān)于SpriteSheet 的原理我推薦大家到 TexturePacker 軟件官網(wǎng)上瀏覽開(kāi)發(fā)者的相關(guān)文章： What is a sprite sheet? ，這篇文章圖文詳細(xì)介紹了什么是 SpriteSheet ，以及它的優(yōu)勢(shì)和原理。
除了圖片資源形式不同，其他原理和第一種方式并沒(méi)有什么不一樣：我們把單張SpriteSheet 圖片轉(zhuǎn)化為一個(gè)一個(gè)的 Sprite 節(jié)點(diǎn)，然后一鍵轉(zhuǎn)換為 TileSet 資源就可以了。理論如此，但在操作過(guò)程中會(huì)有一個(gè)問(wèn)題：一張大圖由很多的小圖拼成，這些小圖需要制作成一個(gè)個(gè)的 Sprite 節(jié)點(diǎn)，那么如何精確的把這張大圖劃分為大小統(tǒng)一的小圖呢？這樣做工作量豈不是比第一種方式要大很多？——?jiǎng)e急， Godot 肯定想到這點(diǎn)了，既然大小統(tǒng)一，我們只需要開(kāi)啟 Snap 吸附功能就可以輕松完成區(qū)域劃分了！具體操作在場(chǎng)景窗口的上方菜單欄選項(xiàng)里，打開(kāi)吸附功能，并設(shè)置相關(guān)參數(shù)，然后就可以精確地進(jìn)行相關(guān)操作了：
停?。。∶菜七@并沒(méi)有什么卵用??？是的，這個(gè)吸附功能只在場(chǎng)景編輯操作中適用，和我們現(xiàn)在要制作的精靈節(jié)點(diǎn)并沒(méi)有半毛錢(qián)關(guān)系，不過(guò)原理是一樣的。創(chuàng)建一個(gè) Sprite 節(jié)點(diǎn)，把 SpriteSheet 大圖拖拽到 Texture 屬性下，然后勾選開(kāi)啟 Region 特性，打開(kāi) TextureRegion 編輯工具窗口，吸附功能就在這個(gè)窗口中進(jìn)行設(shè)置。注意：我所使用的這張圖的每一個(gè)小圖片都有偏移，偏移像素為 1 個(gè)像素，所以需要在 Grid Snap 網(wǎng)格吸附選項(xiàng)里進(jìn)行相關(guān)設(shè)置。具體操作如下動(dòng)圖：
雖然我只操作了兩張圖，不過(guò)還是蠻快的，只要按住 Ctrl + D 復(fù)制一下節(jié)點(diǎn)，利用吸附功能框選一下 Sprite 的材質(zhì)區(qū)域即可，付出一點(diǎn)耐心，很快就能把所有節(jié)點(diǎn)制作完成，最后和第一種方式一樣，一鍵把場(chǎng)景轉(zhuǎn)化為 TileSet 資源。在游戲主場(chǎng)景中，再創(chuàng)建一個(gè)新的地圖，隱藏剛才的創(chuàng)建的地圖，選擇我們新建的 TileSet 資源進(jìn)行地圖繪畫(huà)，效果如下，注意我框選的幾個(gè)角落：
第三種方式：新版本中瓦片地圖新特性
終于輪到新版本中的地圖新特性了！這種方式最為方便，也是功能最強(qiáng)大的一種方式，操作流程也與上面兩種方式截然不同。再次提醒一下：在使用 Godot 3.1 預(yù)覽版中的 TileMap 新功能的時(shí)候，務(wù)必時(shí)刻保存你的游戲項(xiàng)目，因?yàn)轭A(yù)覽版還不夠穩(wěn)定，有可能會(huì)產(chǎn)生意想不到的奔潰，牢記牢記！
第一步，使用瓦片地圖之前，我們需要手動(dòng)創(chuàng)建一個(gè)空的 TileSet 資源，并保存到合適位置：
記住，這種方式同樣適用于其他資源的創(chuàng)建。第二步就是愉快地使用 Godot 3.1 版本中的地圖新特性了，使用新功能快捷創(chuàng)建一個(gè)強(qiáng)大的自動(dòng)地圖集。啥叫自動(dòng)地圖集？參考上面的那張效果圖，注意幾個(gè)角落，所謂的自動(dòng)地圖集，顧名思義就是畫(huà)地圖的時(shí)候不需要手動(dòng)去添加那八個(gè)角落了， Godot 自動(dòng)幫我們完成，是不是很方便？
如果上圖看不清可以查看大圖： Godot 3.1 自動(dòng)地圖集操作詳細(xì)動(dòng)圖。另外，TileMap 新特性中的有些功能是我們沒(méi)見(jiàn)過(guò)的，比如，我們制作 TileSet 范圍就是勾畫(huà)Region 區(qū)域，而 Bitmask 區(qū)域則是告訴 TileMap 如何自動(dòng)完成整片地圖的繪制，Priority 代表圖片出現(xiàn)的概率， Icon 用來(lái)設(shè)置自動(dòng)地圖圖標(biāo)，還有我們后續(xù)游戲場(chǎng)景中會(huì)使用到的碰撞功能： Collision 碰撞區(qū)域設(shè)置，詳細(xì)說(shuō)明我在下圖中都勾選出來(lái)了?？傊?，這么多新特性，大家可以多做一些嘗試。 :smile:
其他說(shuō)明
這里我們只是簡(jiǎn)單地嘗試了一下 Godot 中的瓦片地圖制作，后續(xù)有機(jī)會(huì)我還會(huì)介紹如何在瓦片地圖上添加一些其他物理特性，比如光照遮擋，或者添加真正的碰撞體，以實(shí)現(xiàn)游戲世界中的墻壁、地面等。
最后， Godot 3.1 中還有一個(gè)輔助小特性，可以設(shè)置瓦片集合 Atlas ，即一組瓦片組成一個(gè)集合，方便地圖繪制，如下圖：
附加知識(shí)：關(guān)于舊版本 Godot 中的瓦片地圖繪制，如果不熟悉可以先看看 Xcode 中的關(guān)于瓦片地圖的一些標(biāo)記：
這里有一個(gè)例子，如何畫(huà)一片海洋區(qū)域：
三、小結(jié)
本篇就這樣利用多圖完成了，不知道讀者朋友們看完有啥感想？如果你能堅(jiān)持從我的 Godot 系列第一篇文章讀到本篇文章，那么非常感謝你的閱讀，其實(shí)我最近更新的速度越來(lái)越慢，寫(xiě)完一篇文章至少要耗費(fèi)我 3 天的閑暇時(shí)間，這篇文章更是花費(fèi)了我一周，因?yàn)槠綍r(shí)要工作，閑余時(shí)間還不一定有空，所以，等待更新的朋友要耐心點(diǎn)了。讀完，我相信你應(yīng)該會(huì)和我感受一樣： Godot 必定能火！哈哈！最后，附上 InfoQ 中關(guān)于 Github 的最新統(tǒng)計(jì)信息報(bào)告： GitHub發(fā)布史上最大更新，年度報(bào)告出爐！
