跳到主要内容

瓦片集与瓦片地图

瓦片集保存可复用的小图块，瓦片图层负责把它们排列成地图。先准备瓦片集和地图网格，再在画布上放置瓦片；需要统一修改某个瓦片的外观时，编辑它的来源图像。

检查单张图片能否无缝重复，请使用平铺模式预览。体验可编辑地图，可从示例文件下载项目。

桌面端的六边形瓦片图层与瓦片集面板
桌面端的六边形瓦片图层与瓦片集面板

适合哪些场景​

瓦片地图适合由重复拼块组成的地面、墙体、道路、水岸、等距房间、六边形地图和关卡草图。需要独立编辑、控制显隐或调整遮挡顺序的内容，可以分到不同图层。

基本流程​

  1. 导入瓦片图片或瓦片集包，从库中加载，或链接来源图层。
  2. 新建瓦片图层，选择矩形、等距或六边形网格。
  3. 在瓦片集面板中选择单个瓦片或瓦片组合，到画布上绘制。
  4. 使用选区、填充、橡皮和取样工具调整布局。
  5. 矩形或等距地图需要自动连接边缘时，设置地形规则。
  6. 保存可编辑的 .resprite 项目，再按用途导出图片或 Tiled 地图。

准备瓦片集​

打开文档，选择瓦片集 ▸ 添加瓦片集，或使用瓦片集面板的添加菜单：

来源用途
从图片将 PNG 等图片切分为可复用瓦片。
从瓦片集包导入 Resprite 的 .restile 瓦片集包。
从 Tiled TSX导入单个 Tiled 瓦片集；移动端使用包含 .tsx 及其引用图片的 ZIP。
链接当前图层将栅格图层或符合条件的图层组作为可编辑来源。
从瓦片集库加载本机库中保存的瓦片集。
添加瓦片集菜单
添加瓦片集菜单

对照来源图片检查瓦片宽高、边距、间距和图集列数。地图格子尺寸控制排列间隔，瓦片基座与偏移控制图像落位；树木、墙面等超出基座的素材，两者可以不同。调整后请在地图上检查实际位置。

新建瓦片图层​

在时间轴图层菜单中选择新瓦片图层，设置以下内容：

  • 名称和网格类型：矩形、等距菱形或六边形。
  • 默认瓦片集：图层默认使用的瓦片来源；也可以在面板中选择文档内其他瓦片集的瓦片。
  • 槽位宽／槽位高：地图格子的尺寸。
  • 交错轴／交错奇偶／六边形边长：六边形网格的排列方式。

根据准备使用的素材核对网格，尤其是六边形地图的朝向与交错排列。创建图层后会自动打开瓦片集面板。

新瓦片图层对话框
新瓦片图层对话框

绘制和修改地图​

选中瓦片图层，再到瓦片集面板选择单个瓦片或瓦片组合。桌面端直接拖选；移动端先长按起始瓦片，再拖动选择。选中的内容将作为绘制来源。

工具瓦片地图中的操作
铅笔放置选中的瓦片、组合或地形。
橡皮清除地图格子里的瓦片。
填充按地图格子填充。
取色器从地图取样瓦片或可识别的地形。
矩形选区选择地图格子以编辑布局。

绘制会改变瓦片的放置，不会修改来源图像。重绘瓦片素材的方法见链接瓦片集工作流。

在瓦片图层上绘制和擦除瓦片
在瓦片图层上绘制和擦除瓦片
素材来源

上图中的瓦片集素材取自 Kenney 制作的 16 × 16 像素素材包 Monochrome Pirates，该素材包依据 Creative Commons CC0 1.0 通用（CC0 1.0）公共领域贡献声明发布。

选择、移动与变换​

瓦片选区以格子为单位。选中地图区域后，可以拷贝、剪切、粘贴、删除或拖动其中的瓦片，也可以使用翻转和旋转命令构建镜像或旋转布局，并对照地图网格检查结果。

这些操作修改选中的地图内容，不会重绘来源瓦片在整张地图中的所有实例。

选择、移动与变换瓦片区域
选择、移动与变换瓦片区域

使用地形规则​

地形绘制按连接规则选择边缘、转角和连接瓦片，适用于矩形与等距瓦片图层；六边形图层使用普通瓦片绘制。

选中瓦片集，打开瓦片集 ▸ 编辑地形规则，或在面板“地形”区域选择编辑。创建地形集、添加地形并标记规则，提交修改后回到面板选择地形，使用铅笔绘制。

完整设置、“角／边／混合”规则模式及“整格／精细”绘制方式见地形规则与地形绘制。

地形规则编辑窗口
地形规则编辑窗口
使用地形规则快速铺地图
使用地形规则快速铺地图
素材来源

上述地形规则示例使用的 Grassland 瓦片集改编自 Shackhal 的 Multi Platformer Tileset，原素材依据 Creative Commons CC0 1.0 通用（CC0 1.0）公共领域贡献声明发布。本示例将瓦片集的上部区域修改为道路瓦片。

编辑瓦片集​

使用瓦片集面板维护可复用来源：

  • 瓦片集属性：名称、切片、基座尺寸等设置。
  • 瓦片属性：单个瓦片的来源区域、偏移、概率和动画序列。
  • 拷贝／剪切／粘贴／删除瓦片：编辑图集内的瓦片。
  • 移动瓦片到瓦片集／合并到其他瓦片集：整理兼容的瓦片集。
  • 重新排列瓦片集：调整图集列数与瓦片顺序。
  • 保存到瓦片集库：保留可复用的本机资源。

修改共用瓦片可能影响地图上所有引用它的位置。删除、移动或合并正在使用的瓦片前，请阅读操作确认内容，并检查受影响的地图。

瓦片集面板
瓦片集面板

链接瓦片集工作流​

链接瓦片集读取同一文档内的栅格图层或图层组。修改来源后刷新瓦片集，即可更新地图中使用这些瓦片的位置；需要边编辑边更新时，开启自动刷新关联瓦片集。

从图层创建新瓦片集​

  1. 在栅格图层或符合条件的图层组中绘制素材，并选中该来源。
  2. 选择瓦片集 ▸ 添加瓦片集 ▸ 链接当前图层，或时间轴图层菜单中的链接为瓦片集。
  3. 检查瓦片集的切片与基座设置。
  4. 新建或选中瓦片图层，使用该瓦片集绘制。
  5. 修改来源后，使用从链接图层刷新或开启自动刷新。
将当前图层或图层组链接为瓦片集
将当前图层或图层组链接为瓦片集

编辑已有瓦片集图像​

  1. 在面板中选中瓦片集。
  2. 从工具栏或瓦片集菜单选择创建链接图层 ▸ 链接为图层或链接为组。
  3. 修改生成的来源图像，再刷新链接瓦片集。
为已有瓦片集创建链接图层或图层组
为已有瓦片集创建链接图层或图层组

打磨来源素材时，可以保持地图可见，同时检查单块图案及其重复组合的效果。

通过链接图层修改瓦片图像
通过链接图层修改瓦片图像

使用链接瓦片集参考线​

选中链接来源图层，开启界面 ▸ 链接瓦片集参考线，查看切分边界和基座轮廓，便于对齐超出基座的图像。

使用链接瓦片集参考线查看切分边界和基座轮廓
使用链接瓦片集参考线查看切分边界和基座轮廓

使用选区工具并启用双击选择网格格子后，双击切分格即可选中对应的瓦片图像区域。

用链接组绘制复杂瓦片集​

使用链接为组，将底色、轮廓、阴影和细节保留在不同栅格图层中。可见图层按顺序、透明度和混合模式合成为瓦片集图像。

将复杂瓦片集素材拆分到链接组内的多个图层
将复杂瓦片集素材拆分到链接组内的多个图层

来源组至少包含一个栅格图层，且不能包含瓦片图层。链接来源只读取首帧。 修改后续来源帧不会形成瓦片动画；需要动画时，请另行配置瓦片动画序列。

瓦片动画​

在瓦片属性中，用图集内的瓦片组成动画序列。地图中引用该动画瓦片的位置会一起解析这个序列，不需要逐个位置设置动画。

序列随项目时间轴进度显示。准备足够长的时间轴，再播放或逐帧查看效果；只有一个静态帧的项目不会自行持续推进瓦片动画。

设置瓦片动画
设置瓦片动画

与普通图层配合​

瓦片图层可以与栅格图层和图层组共同排列：底部铺地面，单独图层放墙体或装饰，栅格图层绘制角色和特殊素材。图层顺序控制最终合成与遮挡关系。

导出图片时会合成这些图层。后续仍需调整瓦片放置时，请保留项目内的可编辑地图。

保存与分享瓦片地图​

使用 .resprite 保留可编辑地图图层、文档瓦片集和地形规则。复用 Resprite 瓦片集可使用 .restile；与其他工具交换地图和瓦片集时使用 Tiled 格式。

TMX／TSX 的资源打包和转换限制见 Tiled 地图兼容性。导出的图片保留渲染结果，不包含可编辑地图结构。

复杂项目建议​

  • 需要独立控制时，将地面、墙体、遮挡和装饰分层。
  • 通过本机瓦片集库复用素材，整张地图则保存为项目。
  • 网格类型、排列参数或格子尺寸不同的图层，导出时可能拆成多个 Tiled 地图；交付前检查完整资源包。