企业官网建设流程全解析

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

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

Tiled 是一款免费开源的地图编辑器，专门用来搭建 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 的人，问题往往不出在功能上，而是出在"概念没对齐"。下面这张对照表，帮你提前绕开最常见的几个坑：

另外还有一条"路线坑"：新手一上来就选等距或六边形投影。建议第一张地图先用正交投影、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个新手最关心的问题

Q1：Tiled 免费吗？商业游戏能用吗？A：完全免费开源。编辑器本体和 TMX 地图格式都可以放心用于商业项目，不需要付费授权。

Q2：必须用现成素材吗？我想画自己的瓦片。A：当然可以。你只需要一张规整的 PNG 图片，导入时设置好瓦片宽高和间距，Tiled 会自动帮你切割。手绘、AI 生成、素材包图片都支持。

Q3：TMX 文件是什么？游戏程序怎么读取？A：TMX 是 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 等格式的实现都在这里
• 脚本 API：docs/scripting-doc/是脚本接口的说明文档，配合 Python 插件一起使用
• 格式规范：docs/reference/存放 TMX 与 JSON 地图格式的完整规范

现在就动手：下一步的三件小事

读到这里，工具、方法、坑位你都知道了，剩下的就是动手。给你三个 5 分钟内能完成的动作：

1. 克隆仓库，把示例地图和源码都拿到本地：

   git clone https://gitcode.com/gh_mirrors/ti/tiled

2. 打开仓库里的examples/desert.tmx，用 Tiled 打开它，随便画两笔，感受一下瓦片绘制的流畅度。
3. 然后新建一张正交地图，导入你手头任意一张图片作为瓦片集，画出属于你的第一块游戏地形。

地图设计这件事，多画一张就多熟一分。今天先跑通 8 个里程碑里的前 4 个，明天再挑战地形与动画，一周后你就能给团队交付像样的关卡草图了。打开编辑器，亲自上手试试吧。

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