Tiled地圖編輯器 Tiled Map Editor 的使用（一）基礎功能+地形功能
阿新 • • 發佈：2019-01-22
看了很久關於 Tiled Map Editor 相關資料，但是網上的東西相對太少了，多日整理之後重新寫一份吧 一方面是對自己學習的總結 另外也是和想入門的人做個分享。
首先是官網下載地址
http://www.mapeditor.org/
另外官方文件雖然簡易，但是也是重要的參考資料
http://doc.mapeditor.org/
安裝軟體後進入 examples 目錄中可以看到官方給出的幾個 demo 可以用來練手
把網上所有人入門都會參考的文章粘貼出來（1-3）
http://blog.csdn.net/zhy_cheng/article/details/8308609
http://blog.csdn.net/zhy_cheng/article/details/8316277
http://blog.csdn.net/zhy_cheng/article/details/8363028
其他參考文章
關東昇 http://blog.csdn.net/tonny_guan/article/details/39324041
泰然網1 http://www.taikr.com/article/1924
泰然網2 http://www.tairan.com/archives/7122/
Github https://github.com/chukong/cocos-docs/blob/master/tutorial/framework/native/how-to-make-a-tile-based-game-with-cocos2d/part1/zh.md
圖片素材網址 http://www.2gei.com/rpg-marker/map/pn3/
然後說 我以工具的使用為主，使用 cocos2d-x 3.x （C++）呼叫地圖顯示
作為剛入門不久的新手，寫的內容難免會很初級，如果有不完善的地方希望留言指出。
MapEditor簡介
為了快速開發遊戲，這個工具為開發者提供了一種快捷的解決方法 -- 地圖編輯器。
儲存方式為 TMX檔案+圖片素材PNG（支援透明格式的圖片）
已知適用語言 Flash（ActionScript）、HTML5、Cocos（C++，Lua，JS）、Unity（C#）、MAC（Object-c）、 Android（Java），其他語言暫時不詳
工具分類
同樣是MapEditor又分為了 Java跨平臺版本和 QT版本
區別是工具發展是先有的Java版本，然後才有的QT版本，功能方面Java版本相對較完整，QT因為出現的時間較晚，所以功能實現方面略慢於Java版本（目前我的版本是 0.11.0）以前看到的QT版工具沒有實現六邊形地圖
介面圖
地圖的基本分類
1.正常（俯檢視或者說是平檢視）可以用於RPG遊戲地圖，也可考慮用於類似超級瑪麗一樣的橫版過關遊戲。
2.45度（地圖順時針旋轉45度）可用於RPG遊戲地圖，也可以考慮戰棋類遊戲
3.45度交錯（地圖呈現為四邊形邊界位置使用1/2的三角形地圖塊呈現）
4.六角形交錯（Hexagonal Staggered）展現方式類似於45度交錯地圖
檔案 --> 新檔案
此外在建立地圖的時候還有2個重要的引數
圖層儲存格式：XML、Base64（無壓縮、gzip、zlib）、CSV
地圖座標方向：預設是Right Down（右 下）也就是說左上角為頂點向右為X軸，向下為Y軸
基本地圖引數
地圖大小，也就是建立的地圖中擁有 寬*高 個地圖塊
塊大小，此處對應的是畫素點，也就是每個圖塊所佔的寬高
根據使用者的配置，地圖大小的下方會呈現出最終地圖的總寬高（以畫素為單位）
建立後我們就能看到一個簡單的地圖了
視窗調節
檢視 --> 顯示網格 Ctrl+G
檢視 --> 放大縮小地圖 Ctrl+加減號 或者 Ctrl+滾輪
用過Photoshop的人應該瞭解圖層的概念，對於半透明的圖片來說層級越靠上就能遮擋住底層的圖片，關於圖層的建立
關於層
圖層、物件層、影象圖層
圖層：用於分隔不同作用的地圖元素以方便管理和實現層疊顯示。舉例跑酷的場景中可以將地面、背景建築、碰撞物體等分層放置，對於背景只是用來增加畫面效果不會用於判斷碰撞等事件，牆壁等瓦片圖如果不能充滿整個圖塊就會造成顏色不協調（同一個圖塊位置無法放置兩種不同的瓦片圖），所以層的出現解決了這個棘手的問題，保證了背景可以存在上面又能用牆壁等瓦片圖遮擋顯示一部分圖片。
圖層主要放置不會改變的圖片，如地面或牆壁等（當然遊戲中也會有會塌陷的地面）
物件層：主要用於放置NPC、金幣、主角、寶箱等，該類特點是經常會移動、變換形態、顯示或隱藏等。另外對於我們自定義的一些選框、路徑等也可以放在此層中
影象圖層：字面意思用於放置整張的圖片。屬性框中可以選擇使用的圖片檔案、位置、RGB透明度等，實際使用中很少用到，而且cocos論壇中有使用者提出使用這個後會導致地圖解析出錯。
圖塊
終於到了瓦片地圖的核心位置了，圖塊。
也就是我們用於填充地圖用的元素，根據我們自己設定的圖塊大小配以分割後相同尺寸的圖塊來填充我們的地圖。雖然說圖塊要和地圖塊的尺寸相同，但是對於透檢視來說圖片的大小可以大於圖塊的大小（後面有空會找時間寫一下這部分）
我們以Tiled工具提供的圖片素材為例
因為有邊框，所以要用邊距1、間距1 處理圖片中的黑線
載入圖塊後，常規的操作是選右邊的圖塊，然後到座標地圖中畫圖。
或者是先選沙地圖塊然後選擇工具欄中的油漆桶填充整個地圖
當你長時間繪製地圖時候就會覺得麻煩了，邊角位置都要重新選擇一次圖塊來繪製，那麼有沒有辦法把地圖變成根據我們的繪製自動選擇邊界圖片呢，後面請看地形。
圖塊中有個地形的按鈕，讓我們來編輯一類地形的圖片。
比如在圖塊中我們選好了所有的沙土地，那麼我們就有了沙土地的型別
每次點選都會繪製一個半圓，直至我們選完了所有的地形。
然後要選擇的是城牆、石子路等
操作步驟是左鍵選一個圖塊作為展示用的地形圖，如圖片中點右鍵位置的那個沙土地。
沙土地點右鍵 - 增加地形型別，此時左側會出現一個沙土地的圖片並可以編輯名字
然後我們在右側選上所有有沙土的地形。
注意：此方法建立的地形必須在沙土地上才能繪製如城牆、石子路等的地形。
下面這張圖是選中了所有有沙子的區域（注意非沙土地圖的顏色，有些朦朧但跟右下角的透明度不同）
另附這張比較詳細的圖，可以看出來我選了左邊9個格子，中間4個格子（顯示為有邊框的深藍色）
再關注一下灰濛濛的沙土地，代表的是這些地形在其他地方被選中使用了，需要注意的是當使用清除按鈕後他會清除所有地形的選擇。如箭頭位置我在wall地形中刪了一個圈，對應的去看sand圖層。
可以對比前面sand圖層的顯示（我用滑鼠放在了箭頭下方，顯示了1/4個圓，畫上這個圈其他地形圖層就正常灰濛濛了）
close後，切換到地形選框後就可以看到我們剛剛編輯的幾個地形了
左鍵選一個，然後就可以在地圖上隨意繪製了（不過只能在沙土地上才可用）
我們可以用 sand 一點點填充滿了所有的格子 -- 然後是懶人做法，點普通的沙土地然後用 填充（快捷鍵F） 填充滿了整個螢幕的沙子
快捷鍵：
當我們畫直線的時候比較費勁，這時候按住shift點起點，然後再挪到終點就可以線段畫圖了（原點和目標點做連線） 斜線 還是手動慢慢畫吧~
選擇greatwall，移動到圖層上看到的是一個佔地9個格子的圖塊，如果是小一號的呢？
按住 Ctrl 的時候你就看到佔地4格的圖塊了~
基於Cocos2d-x C++ 檢視效果
隨便畫下地圖，然後儲存檔案 desert.tmx
將地圖和圖片放到Resources目錄下，HelloworldScene.cpp 中註釋掉演示的程式碼
// auto rootNode = CSLoader::createNode("MainScene.csb");
// addChild(rootNode);
（有可能你是用的原始碼方式建立的專案，註釋掉demo中的addChild就好）
讀取和現實地圖使用下面2行程式碼
TMXTiledMap* map = TMXTiledMap::create("desert.tmx");
this->addChild(map);
先這麼多吧，Tiled Map Editor 基礎的東西就這麼多
首先是官網下載地址
http://www.mapeditor.org/
另外官方文件雖然簡易，但是也是重要的參考資料
http://doc.mapeditor.org/
安裝軟體後進入 examples 目錄中可以看到官方給出的幾個 demo 可以用來練手
把網上所有人入門都會參考的文章粘貼出來（1-3）
http://blog.csdn.net/zhy_cheng/article/details/8308609
http://blog.csdn.net/zhy_cheng/article/details/8316277
http://blog.csdn.net/zhy_cheng/article/details/8363028
其他參考文章
關東昇 http://blog.csdn.net/tonny_guan/article/details/39324041
泰然網1 http://www.taikr.com/article/1924
泰然網2 http://www.tairan.com/archives/7122/
Github https://github.com/chukong/cocos-docs/blob/master/tutorial/framework/native/how-to-make-a-tile-based-game-with-cocos2d/part1/zh.md
圖片素材網址 http://www.2gei.com/rpg-marker/map/pn3/
然後說 我以工具的使用為主，使用 cocos2d-x 3.x （C++）呼叫地圖顯示
作為剛入門不久的新手，寫的內容難免會很初級，如果有不完善的地方希望留言指出。
MapEditor簡介
為了快速開發遊戲，這個工具為開發者提供了一種快捷的解決方法 -- 地圖編輯器。
儲存方式為 TMX檔案+圖片素材PNG（支援透明格式的圖片）
已知適用語言 Flash（ActionScript）、HTML5、Cocos（C++，Lua，JS）、Unity（C#）、MAC（Object-c）、 Android（Java），其他語言暫時不詳
工具分類
同樣是MapEditor又分為了 Java跨平臺版本和 QT版本
區別是工具發展是先有的Java版本，然後才有的QT版本，功能方面Java版本相對較完整，QT因為出現的時間較晚，所以功能實現方面略慢於Java版本（目前我的版本是 0.11.0）以前看到的QT版工具沒有實現六邊形地圖
介面圖
地圖的基本分類
1.正常（俯檢視或者說是平檢視）可以用於RPG遊戲地圖，也可考慮用於類似超級瑪麗一樣的橫版過關遊戲。
2.45度（地圖順時針旋轉45度）可用於RPG遊戲地圖，也可以考慮戰棋類遊戲
3.45度交錯（地圖呈現為四邊形邊界位置使用1/2的三角形地圖塊呈現）
4.六角形交錯（Hexagonal Staggered）展現方式類似於45度交錯地圖
檔案 --> 新檔案
此外在建立地圖的時候還有2個重要的引數
圖層儲存格式：XML、Base64（無壓縮、gzip、zlib）、CSV
地圖座標方向：預設是Right Down（右 下）也就是說左上角為頂點向右為X軸，向下為Y軸
基本地圖引數
地圖大小，也就是建立的地圖中擁有 寬*高 個地圖塊
塊大小，此處對應的是畫素點，也就是每個圖塊所佔的寬高
根據使用者的配置，地圖大小的下方會呈現出最終地圖的總寬高（以畫素為單位）
建立後我們就能看到一個簡單的地圖了
視窗調節
檢視 --> 顯示網格 Ctrl+G
檢視 --> 放大縮小地圖 Ctrl+加減號 或者 Ctrl+滾輪
用過Photoshop的人應該瞭解圖層的概念，對於半透明的圖片來說層級越靠上就能遮擋住底層的圖片，關於圖層的建立
關於層
圖層、物件層、影象圖層
圖層：用於分隔不同作用的地圖元素以方便管理和實現層疊顯示。舉例跑酷的場景中可以將地面、背景建築、碰撞物體等分層放置，對於背景只是用來增加畫面效果不會用於判斷碰撞等事件，牆壁等瓦片圖如果不能充滿整個圖塊就會造成顏色不協調（同一個圖塊位置無法放置兩種不同的瓦片圖），所以層的出現解決了這個棘手的問題，保證了背景可以存在上面又能用牆壁等瓦片圖遮擋顯示一部分圖片。
圖層主要放置不會改變的圖片，如地面或牆壁等（當然遊戲中也會有會塌陷的地面）
物件層：主要用於放置NPC、金幣、主角、寶箱等，該類特點是經常會移動、變換形態、顯示或隱藏等。另外對於我們自定義的一些選框、路徑等也可以放在此層中
影象圖層：字面意思用於放置整張的圖片。屬性框中可以選擇使用的圖片檔案、位置、RGB透明度等，實際使用中很少用到，而且cocos論壇中有使用者提出使用這個後會導致地圖解析出錯。
圖塊
終於到了瓦片地圖的核心位置了，圖塊。
也就是我們用於填充地圖用的元素，根據我們自己設定的圖塊大小配以分割後相同尺寸的圖塊來填充我們的地圖。雖然說圖塊要和地圖塊的尺寸相同，但是對於透檢視來說圖片的大小可以大於圖塊的大小（後面有空會找時間寫一下這部分）
我們以Tiled工具提供的圖片素材為例
因為有邊框，所以要用邊距1、間距1 處理圖片中的黑線
載入圖塊後，常規的操作是選右邊的圖塊，然後到座標地圖中畫圖。
或者是先選沙地圖塊然後選擇工具欄中的油漆桶填充整個地圖
當你長時間繪製地圖時候就會覺得麻煩了，邊角位置都要重新選擇一次圖塊來繪製，那麼有沒有辦法把地圖變成根據我們的繪製自動選擇邊界圖片呢，後面請看地形。
圖塊中有個地形的按鈕，讓我們來編輯一類地形的圖片。
比如在圖塊中我們選好了所有的沙土地，那麼我們就有了沙土地的型別
每次點選都會繪製一個半圓，直至我們選完了所有的地形。
然後要選擇的是城牆、石子路等
操作步驟是左鍵選一個圖塊作為展示用的地形圖，如圖片中點右鍵位置的那個沙土地。
沙土地點右鍵 - 增加地形型別，此時左側會出現一個沙土地的圖片並可以編輯名字
然後我們在右側選上所有有沙土的地形。
注意：此方法建立的地形必須在沙土地上才能繪製如城牆、石子路等的地形。
下面這張圖是選中了所有有沙子的區域（注意非沙土地圖的顏色，有些朦朧但跟右下角的透明度不同）
另附這張比較詳細的圖，可以看出來我選了左邊9個格子，中間4個格子（顯示為有邊框的深藍色）
再關注一下灰濛濛的沙土地，代表的是這些地形在其他地方被選中使用了，需要注意的是當使用清除按鈕後他會清除所有地形的選擇。如箭頭位置我在wall地形中刪了一個圈，對應的去看sand圖層。
可以對比前面sand圖層的顯示（我用滑鼠放在了箭頭下方，顯示了1/4個圓，畫上這個圈其他地形圖層就正常灰濛濛了）
close後，切換到地形選框後就可以看到我們剛剛編輯的幾個地形了
左鍵選一個，然後就可以在地圖上隨意繪製了（不過只能在沙土地上才可用）
我們可以用 sand 一點點填充滿了所有的格子 -- 然後是懶人做法，點普通的沙土地然後用 填充（快捷鍵F） 填充滿了整個螢幕的沙子
快捷鍵：
當我們畫直線的時候比較費勁，這時候按住shift點起點，然後再挪到終點就可以線段畫圖了（原點和目標點做連線） 斜線 還是手動慢慢畫吧~
選擇greatwall，移動到圖層上看到的是一個佔地9個格子的圖塊，如果是小一號的呢？
按住 Ctrl 的時候你就看到佔地4格的圖塊了~
基於Cocos2d-x C++ 檢視效果
隨便畫下地圖，然後儲存檔案 desert.tmx
將地圖和圖片放到Resources目錄下，HelloworldScene.cpp 中註釋掉演示的程式碼
// auto rootNode = CSLoader::createNode("MainScene.csb");
// addChild(rootNode);
（有可能你是用的原始碼方式建立的專案，註釋掉demo中的addChild就好）
讀取和現實地圖使用下面2行程式碼
TMXTiledMap* map = TMXTiledMap::create("desert.tmx");
this->addChild(map);
先這麼多吧，Tiled Map Editor 基礎的東西就這麼多