Tiled 实操教程：3 步做出首张带碰撞、可导出的地图

发布时间：2026/11/4 11:59:40

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

不到 1 小时，你会得到一张 40×30 格、带 3 组平台碰撞框和 5 个出生点的 Tiled 地图 map_01.tmx，直接导出 CSV 就能被引擎读。Tiled 是瓦片地图编辑器，把画瓦片、标注对象、画碰撞框收进同一个 TMX 文件。

环境：

素材：

参数：

先打开 File 菜单，选 New，再选 New Map，会弹出一个对话框。
接着把 Tile Width 和 Tile Height 都填 32，Map Width 填 40、Map Height 填 30，Orientation 保持 Orthogonal，点 OK。
这时左侧多出一个新标签页，中间画布是 40×30 的网格，Layers 面板里已有一条默认的 Tile Layer。

先打开 File 菜单，选 New，再选 New Tileset，在文件框里选中你的 512×512 图集，Tile Size 保持 32×32、Tile Spacing 保持 0。
接着回到地图标签页，在画布上右键，选 Add Tileset，勾选刚建的瓦片集，右侧 Tileset 面板会出现 16×16 的网格预览，点哪块就选中哪块。
这时切到工具栏的 Stamp 工具，左键落子、右键擦除，刷子会记住上一次选中的瓦片，换格子也能连续画。

# Tiled map file width:40 height:30

解决什么：平台砖只画一次矩形，地图上所有同款平台自动继承，不用逐格画。
在哪个面板：瓦片集编辑器里选中一块瓦片，点工具栏的 Tile Collision Editor 按钮，在 Collision 选项卡里画矩形，一块瓦片可挂多个框。
对应文件：碰撞编辑器实现
什么时候别用：只在地图某处出现一次、或尺寸独一无二的形状，画在对象层更合适。

场景换成你一个人在做的横版游戏。关卡就是前面那张 40×30、32×32 的地图，下面按时间线走三件事。

先做敌人模板。史莱姆要在图上出现 4 处，就在对象层画一个 32×32 的矩形、命名为 slime，右键它选 Create Template，生成一个 .tx 文件，里面就是一行对象描述，仓库示例模板的格式是这样的：

<object name="hero" type="hero" gid="22" width="128" height="160"/>

接着在 Templates 面板把模板拖进地图 4 个位置，4 个实例共用同一份数据，之后改模板会同步到每一处。

再处理碰撞。打开瓦片集编辑器，在 Tile Collision Editor 里给平台砖画一个 32×32 矩形，底边留 2 像素空隙，角色脚下才不会穿模。回到地图，打开 View 菜单，选 Show Tile Collision Shapes，屏幕上每个平台都浮出轮廓，漏画的立刻能找出来。

最后补齐数据。对象层再加一个名为 player_start 的点和一个名为 exit 的矩形，File 菜单，Export，选 JSON 存成 map_01.json，引擎从瓦片对象组读碰撞、从对象层读坐标。

交付前自检：

导出的地图错位、缺瓦片：先打开瓦片集编辑器的属性区，把 Tile Width、Tile Height、Spacing、Margin 四个字段和 PNG 实际像素逐一对一遍。数字对不上就改字段贴合图片，字段没错则是图集切错，重新裁图。
老地图打开后地形过渡全没了：先确认这张地图是不是 1.5 之前的版本写的。1.5 起地形存储格式统一过，旧版本读不了新文件。团队统一升到 1.12，升级后旧文件的地形要重刷一遍。
无限地图导出不全：先看 Layers 面板里各层显示的是否为已编辑区域尺寸，确认地图是不是 Infinite。无限地图没有固定宽高，部分插件只写已编辑部分。改回固定尺寸地图；实在离不开无限，参考官方无限地图说明。
想逐像素重画每个精灵：这类需求不适合 Tiled，它的定位是拼装瓦片，不是像素创作。用 Aseprite 完成原画，把画好的 PNG 带进 Tiled 铺瓦片，各干各的。