开源地图编辑器Tiled完整上手手册：8个步骤快速画出第一张游戏地图

开源地图编辑器Tiled完整上手手册8个步骤快速画出第一张游戏地图【免费下载链接】tiledFlexible level editor项目地址: https://gitcode.com/gh_mirrors/ti/tiledTiled 是一款免费开源的地图编辑器专门用来搭建 2D 游戏里的关卡场景。这篇手册会从一个真实的工作场景讲起再拆成 8 个可落地的步骤带你把新建地图 → 绘制地形 → 导出文件这条完整链路走通。策划的头发又少了几根地图到底该怎么画先讲一个几乎每个小团队都经历过的场景。游戏进入原型阶段关卡策划在纸上画好了格子草图接下来轮到程序同学上场打开代码编辑器一个数组一个数组地手敲瓦片编号——0,0,1,1,2,0,0...。地图稍微大一点几千个数字看得人眼冒金星策划说这块石头往右挪两格程序员就得对着坐标重新数一遍。更别提还要手工标记碰撞区域、反复调整图层顺序一整天下来连一张小地图都改不利索。也有的团队改用图片工具画地图把素材一块块手动对齐网格。看着是所见即所得了可地图一旦超过几十屏切图、分层、对齐坐标的体力活又全部卷土重来。这个痛点的解法是给团队配一个专门干这行的工具Tiled。它把瓦片、图层、对象、碰撞、动画这些关卡设计里最常用的概念全部变成可视化的操作面板让不写代码的人也能直接上手让写代码的人从枯燥的坐标劳动里解放出来。一分钟看懂Tiled它究竟能帮你省下什么打开 Tiled左侧是项目面板中间是画布右侧是图层与瓦片集面板结构一目了然。它的核心价值可以浓缩成下面几条 拖拽式瓦片绘制从瓦片集里选中素材画笔一拖就是一面墙、一片草地按住 Shift 拉直线按住 Ctrl 区域填充比手敲数组快上几十倍。️ 多种地图投影正交、斜 45 度等距、六边形、交错等距都能做横版、俯视、战棋类游戏全部覆盖。 图层与对象双体系瓦片图层管地面对象图层放 NPC、出生点、触发器另有图片图层与组图层场景结构一目了然。 动画、地形、碰撞一站搞定火焰流水动画、地形自动过渡、瓦片碰撞区域全都在编辑器里可视化完成。 插件式导出同一个工程能导出成 JSON、Lua、Godot、GameMaker、Defold 等多种引擎格式换引擎不用换工具。 脚本自动化内置 Python 与 JavaScript 脚本接口重复性操作可以写成脚本批量执行。适合谁独立游戏开发者、关卡策划、像素美术、游戏教育课堂以及所有想快速验证关卡想法的人。新手最常踩的5个坑误区与正解对照第一次接触 Tiled 的人问题往往不出在功能上而是出在概念没对齐。下面这张对照表帮你提前绕开最常见的几个坑误区正解以为要装游戏引擎或编程环境才能用 TiledTiled 是独立运行的桌面软件Windows / macOS / Linux 都有官方安装包装完直接打开就能画想把美术图片直接拖进地图画布图片要先作为瓦片集导入New Tileset设置好网格切割才能变成可绘制的瓦片图片路径写死素材一挪地方地图就白屏TMX 文件用相对路径引用素材把地图、瓦片集、图片放在同一目录结构下一起搬运即可图层顺序随手放画完发现角色被地面挡住图层自下而上叠放、上层覆盖下层开画前先规划好背景层、前景层、对象层的顺序以为碰撞框画在地图上游戏就会自动生效碰撞形状要写进瓦片的碰撞编辑器能否被识别取决于你的游戏引擎和导出插件的约定另外还有一条路线坑新手一上来就选等距或六边形投影。建议第一张地图先用正交投影、32×32 或 64×64 的瓦片把基础流程跑通之后再回头尝试其他投影。8个里程碑跑通第一张地图下面把从 0 到 1拆成 8 个里程碑每完成一个都会看到实实在在的进展。里程碑 1最快的安装启动方式下载对应操作系统的安装包或者用包管理器直接安装。装好后双击打开你会看到刚才那张主界面左侧项目区、中间空画布、右侧面板。先不用急着点按钮认住New Map和New Tileset两个入口就够了。里程碑 2新建一张正交地图点击New Map在弹出的对话框里设置三项关键参数地图方向选正交、瓦片大小填 32×32、地图尺寸先设 20×20 格。点确定一张带网格的空白画布就出现了。里程碑 3导入你的第一套瓦片集点击New Tileset选择一张瓦片图PNG 即可告诉 Tiled 每个瓦片是 32×32 像素它会自动把整张图切成小格子显示在右侧瓦片集面板里。这一步是整条流水线的原料入口后面的所有绘制都从这里取素材。里程碑 4画出第一块地形选中瓦片集面板里的草地瓦片用画笔工具在地图上点几下按住 Shift 拖动画直线按住 Ctrl 拖动区域填充。保存时文件后缀是.tmx——这就是 Tiled 的地图格式一个结构清晰的 XML 文本文件。里程碑 5用图层组织场景在右侧图层面板里新建几个图层把地面、装饰、可交互物件分开画。Tiled 支持图层拖拽排序、调整透明度还可以用组图层把一组图层折叠管理。场景复杂之后这一招能帮你省下大量查找时间。里程碑 6两步给瓦片加上碰撞区域选中一个瓦片打开瓦片碰撞编辑器用矩形、圆形或多边形工具给它画上碰撞边界。比如一张桌子瓦片画一个比桌子略小的矩形作为碰撞框游戏里角色就不会穿桌而过。画好记得保存碰撞信息会随瓦片一起写入地图文件。里程碑 7导出给你的游戏引擎菜单里的File Export提供多种导出方式导出成图片、导出成插件支持的引擎格式JSON、Lua、Godot 的 tscn、GameMaker 的 gmx 等或者直接导出整个地图的预览图。选一个和你的引擎匹配的格式导出后丢进游戏工程即可。里程碑 8进阶玩法按需解锁基础链路跑通之后下面几个功能值得逐个尝试地形工具标记好地形过渡瓦片后一笔下去自动生成自然的边界过渡画鹅卵石小路又快又自然瓦片动画在动画编辑器里把几帧瓦片排成序列、设置每帧时长火焰、流水立刻活起来无限地图开启无限地图模式后不再受固定尺寸限制画布可以随意向外扩展适合做大世界场景对象模板把常用物件存成模板.tx 文件下次直接拖进地图道具、NPC、机关都能复用高频疑问快答5个新手最关心的问题Q1Tiled 免费吗商业游戏能用吗A完全免费开源。编辑器本体和 TMX 地图格式都可以放心用于商业项目不需要付费授权。Q2必须用现成素材吗我想画自己的瓦片。A当然可以。你只需要一张规整的 PNG 图片导入时设置好瓦片宽高和间距Tiled 会自动帮你切割。手绘、AI 生成、素材包图片都支持。Q3TMX 文件是什么游戏程序怎么读取ATMX 是 Tiled 的地图文件格式本质是结构清晰的 XML。格式规范写在docs/reference/tmx-map-format.rst如果项目用 JSON可以看docs/reference/json-map-format.rst。绝大多数游戏引擎都有现成的 TMX 读取库或者用导出插件转成引擎自己的格式。Q4地图换台电脑打开图片全不见了怎么办A这是典型的相对路径问题。把地图.tmx、瓦片集.tsx和图片素材放在同一个目录结构里一起拷贝即可。养成素材目录跟随工程走的习惯问题基本不会再出现。Q5界面能换成中文吗A可以。翻译文件集中在translations/目录安装版一般在设置里直接切换语言想参与翻译也可以从那里入手。按图索骥官方文档、示例与插件都放在哪想深入钻研时仓库里这些目录就是你的地图官方手册docs/manual/下按主题整理了图层、地形、对象、自动化等全套教程示例工程examples/里放着可直接打开的现成地图比如沙漠小图desert.tmx、森林场景examples/forest/、RPG 小岛examples/rpg/以及一套完整的平台游戏素材包examples/sticker-knight/插件源码src/plugins/下列出了所有导出插件JSON、Lua、Defold、GameMaker、Godot 等格式的实现都在这里脚本 APIdocs/scripting-doc/是脚本接口的说明文档配合 Python 插件一起使用格式规范docs/reference/存放 TMX 与 JSON 地图格式的完整规范现在就动手下一步的三件小事读到这里工具、方法、坑位你都知道了剩下的就是动手。给你三个 5 分钟内能完成的动作克隆仓库把示例地图和源码都拿到本地git clone https://gitcode.com/gh_mirrors/ti/tiled打开仓库里的examples/desert.tmx用 Tiled 打开它随便画两笔感受一下瓦片绘制的流畅度。然后新建一张正交地图导入你手头任意一张图片作为瓦片集画出属于你的第一块游戏地形。地图设计这件事多画一张就多熟一分。今天先跑通 8 个里程碑里的前 4 个明天再挑战地形与动画一周后你就能给团队交付像样的关卡草图了。打开编辑器亲自上手试试吧。【免费下载链接】tiledFlexible level editor项目地址: https://gitcode.com/gh_mirrors/ti/tiled创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考