Tiled地图编辑器TMX格式详解：从基础到高级应用

吉昀蓓

于 2025-06-03 09:10:12 发布

阅读量231

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00156/article/details/148393618

Tiled地图编辑器TMX格式详解：从基础到高级应用

tiled Flexible level editor 项目地址: https://gitcode.com/gh_mirrors/ti/tiled

什么是TMX格式

TMX（Tile Map XML）是Tiled地图编辑器专用的地图文件格式，基于XML结构设计。作为一款开源2D地图编辑器，Tiled通过TMX格式为游戏开发者提供了一种灵活的地图描述方式。

核心特点

多尺寸支持：可定义任意尺寸的瓦片（tile）
多层结构：支持无限数量的图层叠加
多图集兼容：可同时引用多个瓦片集（tileset）
自定义属性：几乎所有元素都可添加自定义属性
多元素类型：包含瓦片层、对象组和图像层三种基础层类型

TMX文件结构解析

根元素

作为TMX文件的根容器，元素定义了地图的基础属性和全局设置：

<map version="1.8" tiledversion="2023.02.02" 
     orientation="orthogonal" renderorder="right-down"
     width="40" height="30" tilewidth="32" tileheight="32"
     infinite="0" nextlayerid="4" nextobjectid="1">

关键属性说明

| 属性 | 描述 | 示例值 | |------|------|--------| | orientation | 地图方向类型（正交/等距/六边形） | orthogonal/isometric/hexagonal | | renderorder | 瓦片渲染顺序 | right-down/right-up/left-down/left-up | | tilewidth | 单个瓦片宽度（像素） | 32 | | tileheight | 单个瓦片高度（像素） | 32 | | infinite | 是否为无限地图 | 0（有限）/1（无限） |

专业提示：在六边形地图中，hexsidelength属性特别重要，它定义了六边形边的长度，直接影响地图的视觉效果。

瓦片集

瓦片集是地图中使用的基础素材集合，分为两种类型：

单图切割式：基于一张大图自动分割
多图集合式：每个瓦片使用独立图片

<tileset firstgid="1" name="terrain" 
         tilewidth="32" tileheight="32"
         spacing="2" margin="1">
  <image source="terrain.png" width="320" height="320"/>
</tileset>

进阶特性

tileoffset：调整瓦片绘制偏移量
transformations：定义允许的瓦片变换（翻转/旋转）
wangsets：高级地形自动拼接系统（替代旧版terraintypes）

图层系统

Tiled支持三种基础图层类型：

1. 瓦片层

<layer id="1" name="Ground" width="40" height="30">
  <data encoding="base64" compression="zlib">
    eJxjYBgFo2AUjIJRMApGwSgYBaNgFIwCAAADAQ==
  </data>
</layer>

数据存储方式：

CSV明文：易读但体积大
Base64编码：平衡可读性和体积
Base64+zlib压缩：最小体积

2. 对象组

<objectgroup id="2" name="Collision">
  <object id="1" x="128" y="96" width="32" height="32"/>
</objectgroup>

应用场景：

碰撞区域标记
NPC出生点设置
触发器位置定义

3. 图像层

<imagelayer id="3" name="Background">
  <image source="sky.png"/>
</imagelayer>

动画系统

TMX支持瓦片动画，通过元素定义：

<tile id="10">
  <animation>
    <frame tileid="10" duration="200"/>
    <frame tileid="11" duration="200"/>
    <frame tileid="12" duration="200"/>
  </animation>
</tile>