企业官网建设流程全解析

Tiled 地图编辑器入门：40 分钟产出一张带碰撞的 TMX 关卡

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

Tiled 是 2D 瓦片地图编辑器：画地图、标碰撞，再导出成引擎直接读的 TMX（Tile Map XML，瓦片地图文件格式）。这篇走完一条最短路径：新建地图 → 绑瓦片集 → 画碰撞框 → 复用模板 → 导出文件，产出一张能直接跑的关卡。

第 0 分钟：铺出第一块地

任务：给平台跳跃游戏做第一关。40×30 格、32 像素瓦片，要 4 扇门、1 个出生点，最后交一个能直接导出的 TMX。

• File→New→New Map...：Width 填 40、Height 填 30、Tile width/height 填 32、Orientation 选 Orthogonal →Create。新标签页里出现一张空白网格和默认 Tile Layer（可独立开关的瓦片层）。
• File→New→New Tileset...：选一张瓦片集 PNG，tile size 同样 32×32 → 图片被切成 32×32 网格，成为可挑选的瓦片。
• 回到地图标签页，把瓦片集加到地图上 → 左侧 Tileset 面板出现格子预览。
• 选Stamp（盖章式画笔，落格即贴图）：左键铺墙和地板，右键擦掉。

⚠️ 导出的图错位、缺瓦片？八成是瓦片集的 tile size、margin 和图片实际尺寸对不上——打开瓦片集属性，把 tile width/height、spacing 两项和 PNG 逐一对齐。

第 5 分钟：给瓦片画 4 个碰撞框

碰撞框（collision shape，给瓦片画的物理轮廓）画在瓦片上，不画在地图上——引擎读到哪块砖，就把框变成实体，不用逐格对齐。

选中瓦片集里的地板砖 → 右侧属性区切到Collision选项卡 → 用矩形工具直接在瓦片上画，一块砖能画多个框：台阶只挡上半，坑沿只挡一条边。

画完验证：View→Show Tile Collision Shapes，地图上叠出全部瓦片的碰撞框，哪块砖漏画、哪块多画，一眼可见。

整块编辑器的实现在 src/tiled/tilecollisiondock.cpp。

⚠️ 换个版本打开老地图，地形过渡全没了？Tiled 1.5 起统一了地形（Wang，按相邻瓦片自动补过渡砖）的存储格式，旧文件的地形信息要重绘，团队先对齐版本再开工。

第 15 分钟：让 4 扇门共用 1 份模板

一扇门 = 门框瓦片 + 一个门对象。逐个摆 4 处太慢，模板复用（template reuse，同一份对象在地图上多次实例化）的做法：

• 选Create Template工具，在地图里把门画一次，右键选存为模板 → 生成一个 .tx 文件，左侧 Templates 面板同步出现它。
• 从面板把模板拖到其余门位：4 个位置拖 4 次，每个实例可独立移动、改名，瓦片样式改一处全部跟。

仓库里有现成模板可以打开研究：examples/sticker-knight/map/templates/hero.tx，配套地图 examples/sticker-knight/map/sandbox.tmx。

⚠️ 改了 .tx 模板，地图上的旧实例不会自动变——它是"快照"，改完记得先全选旧实例替换一遍。

第 30 分钟：导出前核对 3 个高频坑

坑 1 已经埋伏在前面两处：瓦片集尺寸错位、无限地图（无固定宽高）导出内容不全——引擎关卡就用固定尺寸地图，无限地图留给开放世界。

剩下的交给导出：File→Export→ 选格式填文件名；想换格式走Export As...，CSV、JSON、TSCN 各是一个独立插件，实现散在 src/plugins/ 里。

⚠️ 导出报错先看格式插件版本：老插件不认新字段的导出报错，升级 Tiled 比删字段省事。

下一步：去 examples 里挑一张地图照着走

examples/forest/forest.tmx 是一张森林场景，examples/sewer_automap/ 里还躺着 9 套自动映射（automapping，按瓦片图案匹配规则批量改图）规则文件和说明。打开一张，对照本文的菜单链重新走一遍，能独立复现每一步，就算出师了 🎮

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