一币绩、前言
收到一個(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 平面游戲静陈，沒有一個(gè)好的游戲地圖燕雁，那是萬(wàn)萬(wàn)不行的诞丽！你可以沒有悅耳的背景音樂鲸拥，可以沒有花哨的粒子特效，沒有動(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 游戲開發(fā)經(jīng)驗(yàn)润匙，熟悉 SpriteKit 的話，那么你肯定對(duì) TileMap 非常了解唉匾， Xcode 對(duì)瓦片地圖的支持非常完善孕讳，功能很強(qiáng)大也易于上手，缺點(diǎn)是 Xcode 只支持 Mac OS 或者 iOS 系統(tǒng)巍膘。另外卫病，熟悉 Unity3D 的朋友們也知道，在 Unity 2018 版本之前典徘，使用 Unity制作 2D 游戲的地圖也是很不方便的蟀苛，如果你想在 Android 或者 Window/Linux 等其他操作系統(tǒng)上開發(fā)游戲，那么你需要使用其他的第三方軟件來(lái)輔助制作地圖了逮诲。
這里我強(qiáng)烈推薦一款開源軟件名為 Tiled 帜平，功能非常強(qiáng)大幽告！使用超方便！能很好地支持并導(dǎo)出你設(shè)計(jì)好的地圖到其他游戲引擎中使用裆甩，比如配合 LibGDX 框架開發(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ù)情況再添加一些背景钮呀，這些小瓦片我們稱之為： Tile 。瓦片可以很簡(jiǎn)單昨凡，也可以非常復(fù)雜爽醋，但是在同一個(gè)游戲世界里其大小都是統(tǒng)一的，瓦片的類型主要有三種類型： 90° 直角俯視地圖（ Orthogonal/Square ）便脊、45° 等距斜視地圖（ Isometric ）蚂四、等六邊形地圖（ Hexagonal ）。這三種類型在 Godot 中都是支持的就轧，本篇文章我們主要討論第一種類型证杭，也是最常用的一種類型吧。 :grin:
制作TileSet
理論到此結(jié)束妒御，擼起袖子開始干起解愤！要打造瓦片地圖，我們首先需要準(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è)名為TileSet_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è)瓦片炫彩，開始你的藝術(shù)創(chuàng)作吧，騷年絮短！ :sunglasses:
第二種方式：使用圖片合集制作瓦片
當(dāng)我們制作的地圖元素非常多的時(shí)候江兢，第一種方式明顯不合常理了！圖片過(guò)多導(dǎo)致文件難以管理丁频，加載性能也會(huì)下降杉允，這時(shí)候我們一般會(huì)把圖片制作成 SpriteSheet 圖片精靈集，這樣既能減少文件數(shù)量席里，方便管理叔磷，又能提高加載速度和游戲的性能，關(guān)于SpriteSheet 的原理我推薦大家到 TexturePacker 軟件官網(wǎng)上瀏覽開發(fā)者的相關(guān)文章： What is a sprite sheet? 奖磁，這篇文章圖文詳細(xì)介紹了什么是 SpriteSheet 改基，以及它的優(yōu)勢(shì)和原理。
除了圖片資源形式不同咖为，其他原理和第一種方式并沒有什么不一樣：我們把單張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)一低飒，我們只需要開啟 Snap 吸附功能就可以輕松完成區(qū)域劃分了许昨！具體操作在場(chǎng)景窗口的上方菜單欄選項(xiàng)里，打開吸附功能褥赊，并設(shè)置相關(guān)參數(shù)糕档，然后就可以精確地進(jìn)行相關(guān)操作了：
停！０韬怼速那！貌似這并沒有什么卵用啊尿背？是的端仰，這個(gè)吸附功能只在場(chǎng)景編輯操作中適用，和我們現(xiàn)在要制作的精靈節(jié)點(diǎn)并沒有半毛錢關(guān)系田藐，不過(guò)原理是一樣的荔烧。創(chuàng)建一個(gè) Sprite 節(jié)點(diǎn)，把 SpriteSheet 大圖拖拽到 Texture 屬性下汽久，然后勾選開啟 Region 特性鹤竭，打開 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)行地圖繪畫，效果如下蕾额，注意我框選的幾個(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)地圖集趴捅，顧名思義就是畫地圖的時(shí)候不需要手動(dòng)去添加那八個(gè)角落了垫毙， Godot 自動(dòng)幫我們完成，是不是很方便拱绑？
如果上圖看不清可以查看大圖： Godot 3.1 自動(dòng)地圖集操作詳細(xì)動(dòng)圖综芥。另外，TileMap 新特性中的有些功能是我們沒見過(guò)的猎拨，比如膀藐，我們制作 TileSet 范圍就是勾畫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è)例子，如何畫一片海洋區(qū)域：
三任内、小結(jié)
本篇就這樣利用多圖完成了撵渡，不知道讀者朋友們看完有啥感想？如果你能堅(jiān)持從我的 Godot 系列第一篇文章讀到本篇文章死嗦，那么非常感謝你的閱讀趋距，其實(shí)我最近更新的速度越來(lái)越慢，寫完一篇文章至少要耗費(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)告出爐！
