Tiled 2D 地图编辑器实操：8 步画完并导出带地形过渡与碰撞框的第一张 TMX 关卡

Tiled 2D 地图编辑器实操：8 步画完并导出带地形过渡与碰撞框的第一张 TMX 关卡

【免费下载链接】tiledFlexible level editor项目地址: https://gitcode.com/gh_mirrors/ti/tiled

Tiled 是一款 2D 瓦片地图编辑器，核心功能是把瓦片层、对象层和碰撞信息收进同一份地图文件，画完即可导出引擎能直接读的 TMX。一张 48×14 的横版关卡有 672 个格子，若手动挑选每块地砖与路径的过渡瓦片，光对齐就要摆近 200 块——而 Tiled 的地形刷（Terrain Brush）用一次角点标注就能替你完成这件事。

本文写给第一次打开 Tiled 的开发者。读完并照做一遍，你能独立完成一张含地形过渡、瓦片碰撞框、对象模板实例、并可导出 CSV/JSON 的横版关卡。若本地还没克隆仓库拿示例素材：git clone https://gitcode.com/gh_mirrors/ti/tiled

2 步开出一块 32×32 的画布：新建地图与瓦片集

1. File → New → New Map（Ctrl+N）→ 对话框里填Tile Width: 32、Tile Height: 32、地图48×14、Orientation 选Orthogonal→ 左侧出现地图标签页，自带网格和一个默认 Tile Layer。
2. File → New → New Tileset→ 点Browse…选一张瓦片集图片（仓库里的 examples/tmw_desert_spacing.png 就是现成的，32×32、带 1 像素 margin 和 spacing），填好Margin: 1、Spacing: 1后保存为.tsx→ 图片被切成 32×32 网格，成为可取色的瓦片集。注意保持Embed in map关闭：瓦片集独立成文件后，地形标注、碰撞框这些附加信息才能被多张地图共享。

3. 切回地图标签页，在右侧Tilesets面板点Add Tileset，选中刚存的.tsx→ 面板出现 32×32 网格预览，可以取色了。

标注一次四角，地形刷自动补全地面

地形刷是 Tiled 区别于画图板的核心：它不画像素，而是按"每块瓦片的角/边属于哪种地形"来选瓦片，画到过渡处时自动挑对的那块 ⛏

前提是在瓦片集里定义好地形信息，操作流：

1. 打开瓦片集标签页，点工具栏的Terrain Sets按钮进入地形编辑模式 → 加一个 Corner Set（四角匹配，适合草地/路面这类过渡）。
2. 点Add Terrain加地形种类：本例加 Sand、Brick、Cobblestone、Dirt 四种。
3. 选中某个地形，在瓦片图上点击并拖拽，标出该瓦片属于此地形的角。每块瓦片的四角可以各不同，标完后切到Patterns页核对：已存在的图案会被压暗，缺哪块组合一眼可见。

四种地形全标完，关闭地形编辑模式，回到地图。选Bucket Fill工具（G）先把整张地图填满 Sand 底地，再切Terrain Brush（T）选 Cobblestone 直接画路——边缘过渡瓦片自动就位，连相邻瓦片都会被回头修正。

三种地形集类型按需选：

类型	匹配规则	2 种地形最少瓦片数
Corner Set	按四角匹配，草地、路面过渡	16
Edge Set	按四条边匹配，栅栏、围墙	16
Mixed Set	角+边都匹配，变化最多	256

一个能直接对照的成品：examples/desert.tsx 里预定义了整套 Corner 地形集，装饰瓦片还把probability压到0.01，让灌木以 1/100 概率随机冒出来。定义解析的源码在 src/libtiled/wangset.cpp，完整文档见 docs/manual/terrain.rst。

碰撞框画在瓦片上：每块墙都挂一个物理轮廓

碰撞框的关键认知：画在瓦片集里，不画在地图上。输入是瓦片集里的某块墙砖，输出是挂在瓦片对象组里的一组形状；引擎运行时读这块砖的形状生成物理体，地图上每铺一块同款砖，碰撞自动生效。

操作三步：

1. 在瓦片集里点选某块墙砖 → 右侧属性区切到Collision选项卡。
2. 用矩形工具在瓦片上直接画碰撞框，一块砖可以画多个框（台阶、斜坡都拆成若干矩形近似）。
3. 回到地图，View → Show Tile Collision Shapes勾选后，整张地图叠出所有瓦片的碰撞框——漏画的墙、多画的洞一眼可见。

编辑器实现集中在 src/tiled/tilecollisiondock.cpp。

把玩家出生点存成模板，5 个场景直接复用

横版关卡里出生点、检查点、拾取物往往要在多张图里重复放。逐个摆是体力活，模板才是正解：

1. 在对象层用Create Object Tool（O）放一个玩家出生点，给它起名spawn、设好初始属性。
2. 右键该对象 →Save As Template→ 存成spawn.tx，放进项目目录的templates/文件夹。
3. 后续每张地图：从 Project 视图把spawn.tx拖进地图，或选中它后用Insert Template工具（V）在多个位置连点。

改模板时打开 Template Editor 编辑，所有实例同步更新；单个实例被手动改过的属性会被标记为 override，不受模板变更影响。仓库里就有可一键实例化的现成模板：examples/sticker-knight/map/templates/hero.tx，配套演示地图见 examples/sticker-knight/map/sandbox.tmx，方法细节在 docs/manual/using-templates.rst。

导出是终点线：TMX 与 CSV 各管一摊

第 8 步，也是唯一和"交付"有关的动作：

1. File → Export→ 首次会询问格式与文件名，之后重复触发只问文件名。
2. 选 CSV：一张二维数字表，轻量引擎（如自研、Cocos 老项目）直接按 GID 读；选 JSON：带完整属性结构，适合要读自定义属性、对象组的引擎。
3. 想要别的格式就看插件：仓库 src/plugins/ 下内置了 Defold、GameMaker（GMX）、Godot（TSCN）、Unity（TBIN）、YY 等十几个导出器，格式清单见 docs/manual/export.rst。
4. CI 里跑批量导出时，命令行参数--export-map可以在无界面流程中自动触发。

3 个常见画不出的毛病：现象到解法的排查路径

• 现象：地图还是空白时，地形刷点下去没反应 → 根因是空地图上没有过渡参照，地形刷不知道"空"该接哪块瓦片 → 解法：先用 Bucket Fill 把基础地形（如 Sand）铺满整图，或按住Ctrl用地形刷强制落一小片最小区域起步。
• 现象：明明标过地形，换张地图后地形刷就"失灵"了 → 根因是瓦片集被内嵌（Embed）进某张地图，地形信息没独立保存；或两组瓦片分属不同 tileset，而地形只认同一 Terrain Set 内的成员 → 解法：瓦片集存成独立.tsx；需要跨集过渡时，把瓦片合并进同一 tileset。
• 现象：碰撞框在编辑器里看着对，导出的文件里却找不到 → 根因是把矩形画到了地图的对象层上，而引擎读的是瓦片对象组里的形状 → 解法：回到瓦片集里给砖本身画框，导出后在 TMX 里能看到每块砖内嵌的<objectgroup>，这才说明挂对了位置。

最推荐的动作：打开 examples/desert.tsx，对照里面那套现成的 Corner 地形集定义和probability写法，把四种地形的标注方法搬到自己瓦片集上——这是仓库里成本最低的一份地形抄写素材。地形刷覆盖不了的复杂图案规则，再去看自动映射：examples/sewer_automap/ 里有 9 套规则文件和完整说明，照着抄一条到自己的瓦片集上试试 🗺

【免费下载链接】tiledFlexible level editor项目地址: https://gitcode.com/gh_mirrors/ti/tiled