手把手教你在 Cocos2d-x 中使用 Tiled Map Editor (一)：基礎篇

優秀的 2D 遊戲離不開高效的關卡編輯工具。Tiled Map Editor (以下簡稱 Tiled) 是開源、跨平台 (Qt 編寫)、支援正交/等軸測/六邊形地圖的標準級編輯器。本系列將從安裝、圖塊導入、地圖繪製、屬性配置到 Cocos2d-x 運行時解析全流程實戰講解。

獲取與安裝

• 官網：https://www.mapeditor.org/
• 下載對應平台安裝包 (Windows/macOS/Linux)，一鍵安裝即用。
• 源碼託管於 GitHub，可二次開發擴展自定義屬性/導出格式。

為什麼不用「大圖」直接做地圖？

新建地圖向導關鍵參數

• 方向：正交 (平視) / 等軸測 45° (俯視斜 45°) — Tiled 稀有支援雙模式。
• 地圖大小：寬×高 格子數 (如 30×30 = 900 格)。
• 塊大小：單格像素 (正交常用 32×32；等軸測常用 64×32)。

導入圖塊集 (Tileset) 實戰

1. 菜單 地圖 → 新圖塊集 (或工具欄圖示)。
2. 選擇圖片：Cocos2d-x 自帶範例 TileMaps/tmw_desert_spacing.png。
3. 關鍵設置：

驗證：設置後預覽區白色分割線應完美覆蓋圖片原有黑色網格線 (見下圖)。若未設置間距/邊距，切片會逐行偏移 (見錯誤示例圖)。

地圖繪製核心工具

• 圖章 (B)：單格/矩形區域繪製。技巧：在圖塊面板框選矩形區域 → 畫筆變為「多格圖章」，批量鋪路極快。
• 填充 (G)：連通區域一鍵填充。
• 橡皮擦 (E)：刪除圖塊恢復透明。

高效編輯快捷鍵 (必記)

完整快捷鍵表：官方 Wiki

隨機模式：自然地形神器

1. 在圖塊面板框選多個同類圖塊 (如 3 種草地變體)。
2. 開啟 隨機模式 (骰子圖示)。
3. 大面積繪製 → 自動按權重隨機交替，消除機械重複感。

導出與 Cocos2d-x 整合預告

• 菜單 文件 → 另存為 → map.tmx (XML 格式，可讀、可版本控制)。
• 下一篇將講解：TMXTiledMap::create("map.tmx") 載入、圖層/物件組訪問、碰撞層解析、動態圖塊替換。

來源：奶制品博客