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

发布时间:2026/11/4 11:59:46
Tiled 实操教程:3 步做出首张带碰撞、可导出的地图 Tiled 实操教程3 步做出首张带碰撞、可导出的地图【免费下载链接】tiledFlexible level editor项目地址: https://gitcode.com/gh_mirrors/ti/tiled不到 1 小时你会得到一张 40×30 格、带 3 组平台碰撞框和 5 个出生点的 Tiled 地图 map_01.tmx直接导出 CSV 就能被引擎读。Tiled 是瓦片地图编辑器把画瓦片、标注对象、画碰撞框收进同一个 TMX 文件。开工前 3 分钟备好环境、素材和地图参数环境装好 Tiled 1.12.2CSV、JSON 等导出插件已内置无需另装存档目录留出至少 10MB 空闲空间地图和瓦片集放在同一文件夹素材一张至少 512×512 像素的 tile sheet PNG格子全是 32×3216×16 网格至少 20 个可用瓦片一张 32×32 透明背景的敌人瓦片 PNG留给对象层和模板用参数Tile Width 32、Tile Height 32、Tile Spacing 0、Margin 0Map Width 40、Map Height 30、Orientation 选 Orthogonal三拍出图新建地图、挂瓦片集、导出格式逐项填新建地图参数怎么填先打开 File 菜单选 New再选 New Map会弹出一个对话框。接着把 Tile Width 和 Tile Height 都填 32Map Width 填 40、Map Height 填 30Orientation 保持 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 工具左键落子、右键擦除刷子会记住上一次选中的瓦片换格子也能连续画。导出格式怎么选、文件长什么样先打开 File 菜单选 Export格式下拉框里挑 CSV文件名填 map_01.csv。接着用文本编辑器打开生成的 CSV开头几行是以 # 开头的注释记录着宽、高、朝向、瓦片尺寸# Tiled map file width:40 height:30这时往下是 30 行纯数字每个数字是一块瓦片的 GID引擎按表格读取即可。五个功能各答四问碰撞框、对象层、模板、地形刷、导出碰撞框怎么画在瓦片上解决什么平台砖只画一次矩形地图上所有同款平台自动继承不用逐格画。在哪个面板瓦片集编辑器里选中一块瓦片点工具栏的 Tile Collision Editor 按钮在 Collision 选项卡里画矩形一块瓦片可挂多个框。对应文件碰撞编辑器实现什么时候别用只在地图某处出现一次、或尺寸独一无二的形状画在对象层更合适。出生点这类数据放哪个层解决什么承载出生点、门、摄像机、道具坐标这些与像素无关的数据。在哪个面板Layer 菜单Add Object Layer用工具栏的对象工具画矩形或点再在属性区填 name 和 type。对应文件对象层数据结构什么时候别用对象层不渲染瓦片可见的场景地面、墙面仍应画在瓦片层。同一组合对象怎么复用解决什么敌人 判定框这种固定组合要摆 4 处时建一次、用多次。在哪个面板对象层里选中组合右键 Create Template 生成 .tx 文件之后在 Templates 面板选中模板拖进地图即可实例化。对应文件模板数据结构什么时候别用每个实例外观差异很大时模板反而添乱直接单独放置。地形刷怎么自动补过渡瓦片解决什么草地与泥土的过渡瓦片原本要逐格挑选地形刷按周围 4 格或 8 格自动补上过渡。在哪个面板瓦片集编辑器切到 Terrain 选项卡把过渡瓦片编进一个 terrain set再在工具栏选 Terrain Brush 工具刷地。对应文件地形数据结构什么时候别用瓦片集里没有现成过渡瓦片时刷子变不出来要么补图要么改用自动映射。导出格式怎么挑解决什么不同引擎读不同格式Tiled 自带 CSV、JSON、TSCN、GMX 等导出插件。在哪个面板File 菜单Export下拉框列出全部已装插件格式选一个填文件名。对应文件CSV 插件源码什么时候别用目标引擎的格式不在列表里就别硬套让引擎直接读 TMX 或 JSON或用插件扩展。横版平台工作流模板、对象层、碰撞框一条线串完场景换成你一个人在做的横版游戏。关卡就是前面那张 40×30、32×32 的地图下面按时间线走三件事。先做敌人模板。史莱姆要在图上出现 4 处就在对象层画一个 32×32 的矩形、命名为 slime右键它选 Create Template生成一个 .tx 文件里面就是一行对象描述仓库示例模板的格式是这样的object namehero typehero gid22 width128 height160/接着在 Templates 面板把模板拖进地图 4 个位置4 个实例共用同一份数据之后改模板会同步到每一处。再处理碰撞。打开瓦片集编辑器在 Tile Collision Editor 里给平台砖画一个 32×32 矩形底边留 2 像素空隙角色脚下才不会穿模。回到地图打开 View 菜单选 Show Tile Collision Shapes屏幕上每个平台都浮出轮廓漏画的立刻能找出来。最后补齐数据。对象层再加一个名为 player_start 的点和一个名为 exit 的矩形File 菜单Export选 JSON 存成 map_01.json引擎从瓦片对象组读碰撞、从对象层读坐标。交付前自检开着 Show Tile Collision Shapes确认没有平台漏掉碰撞框地图标签页标题没有未保存标记打开导出的 JSON确认地图尺寸仍是 40×30按症状排查4 个导出与地形常见问题的处理导出的地图错位、缺瓦片先打开瓦片集编辑器的属性区把 Tile Width、Tile Height、Spacing、Margin 四个字段和 PNG 实际像素逐一对一遍。数字对不上就改字段贴合图片字段没错则是图集切错重新裁图。老地图打开后地形过渡全没了先确认这张地图是不是 1.5 之前的版本写的。1.5 起地形存储格式统一过旧版本读不了新文件。团队统一升到 1.12升级后旧文件的地形要重刷一遍。无限地图导出不全先看 Layers 面板里各层显示的是否为已编辑区域尺寸确认地图是不是 Infinite。无限地图没有固定宽高部分插件只写已编辑部分。改回固定尺寸地图实在离不开无限参考官方无限地图说明。想逐像素重画每个精灵这类需求不适合 Tiled它的定位是拼装瓦片不是像素创作。用 Aseprite 完成原画把画好的 PNG 带进 Tiled 铺瓦片各干各的。下一步建议从示例地图继续上手再建一张只靠对象层画碰撞的地图体会按瓦片碰撞与按对象碰撞的差别逛一下 examples/sewer_automap/ 里的 9 套自动映射规则挑一条抄到自己的瓦片集上试在引擎代码里读一次导出的 CSV 或 JSON打印任意一块瓦片的 GID 验证链路示例地图带模板与对象层的完整地图含模板实例和对象层直接打开对照 ⛏【免费下载链接】tiledFlexible level editor项目地址: https://gitcode.com/gh_mirrors/ti/tiled创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

关于本文作者

来自尧图内容编辑团队

尧图内容编辑团队 内容团队

尧图内容编辑团队

本文由尧图网络内容编辑团队执笔。团队由资深项目经理、前端工程师与设计师组成,所有内容均来自亲手交付的真实项目,先讲清问题、再给出可落地的解法。尧图深耕北京网站建设十年,服务过京华建材集团、智造科技等各行业客户,把一线经验沉淀为可复用的行业观察。

  • 十年建站经验,覆盖建材、制造、服务、文创等
  • 项目经理把关选题与事实准确性
  • 工程师与设计师联合撰写专业细节
  • 统一编辑规范,保证文风与排版一致
  • 每月复盘转化数据,迭代选题方向

延伸阅读

相关资讯与近期热门内容

深度阅读推荐

建站决策前值得细读的三篇

网站改版的5个关键决策
2024-08-12

网站改版的5个关键决策

什么时候该改版、改到什么程度、如何避免流量掉光,京华建材集团改版复盘给出答案。

获取专属建站方案

看完文章,把您的行业与预算告诉我们,免费获取一份量身定制的官网建设方案与报价。

立即免费咨询