第四章 游戏开发Tiled篇-Tiled正常方向（Orthogonal）地图编辑——导入图块集

4.1 新建正交（正常Orthogonal）地图

如下图：

第四章 游戏开发Tiled篇-Tiled正常方向（Orthogonal）地图编辑——导入图块集_tileset

选择地图大小50*50，你将看到一个空白地图：

第四章 游戏开发Tiled篇-Tiled正常方向（Orthogonal）地图编辑——导入图块集_tileset_02

点击新建图块集：

第四章 游戏开发Tiled篇-Tiled正常方向（Orthogonal）地图编辑——导入图块集_图块集_03

在弹出的新图块集窗口，进行属性配置：

名称：可以任意命名，建议取一个容易辨识的名字

类型：有两个选项：

基于整张图片集图片：是指引入一个张图片作为一个Tileset。

多图片集合：是指先建立一个Tileset，然后通过增加图片合并进来成为一个Tileset。

后者方便将很多素材合并成一个Tileset方便使用。

4.1.1 基于整张图片集图片

下面演示基于整张图片集图片的素材引入：

选择整张图片集图片，选择浏览，Tiled安装目录中，有一个自带的examples，提供了一些基本素材，本教程中选择tmw_desert_spacing.png

第四章 游戏开发Tiled篇-Tiled正常方向（Orthogonal）地图编辑——导入图块集_tileset_04

可以看到选择图片以后，自动填充了名称，这个素材块的宽高是32像素因此保持不变。

第四章 游戏开发Tiled篇-Tiled正常方向（Orthogonal）地图编辑——导入图块集_图块集_05

如图，逐个解释界面元素：

4.1.1.1 嵌入地图

如果勾选，则这个图块就专属于这个地图，只有这个地图可以用，如果不勾选则会被要求另存为，如下图：

第四章 游戏开发Tiled篇-Tiled正常方向（Orthogonal）地图编辑——导入图块集_图块集_06

点击另存为：

第四章 游戏开发Tiled篇-Tiled正常方向（Orthogonal）地图编辑——导入图块集_tileset_07

选择保存，则会发现项目文件列表中多了一个文件：

第四章 游戏开发Tiled篇-Tiled正常方向（Orthogonal）地图编辑——导入图块集_tileset_08

这个后缀为tsx的文件，就是一个本项目公用的tileset图块，这个图块将出现在后续任何一个新建的地图的图块集工作面板中。

4.1.1.2 源文件

在选择了基于整张图块集图片后，源文件选择你的图片，基于这张图片建立一个图块集。

4.1.1.3 设置透明度

有些图片采用某种颜色作为透明色，如紫色，在这里只要选择这个透明色即可将背景变得透明。

4.1.1.4 块宽高

要看你用的图片中的图块宽高是多少，一般素材名字会标注宽高是什么，例如：

第四章 游戏开发Tiled篇-Tiled正常方向（Orthogonal）地图编辑——导入图块集_图块集_09

上图中虽然素材是差不多的，但是图块的尺寸分别是4848,3232,16*16，选择了不同尺寸的素材就要选择相应的块宽高。

4.1.1.5 边距和间距

两者默认是0像素。

边距（Margin）：边距是指图像周围的空白边缘。在图块集中，边距通常用于指示图块集的边界，以便在地图上使用时能够正确地显示图块。设置边距可以确保图块在地图上渲染时不会因为贴近边界而产生不必要的碰撞或者渲染问题。边距的设置通常与图像素材的设计有关，以确保图块在游戏中的正确显示。  

间距（Spacing）：间距是指每个图块之间的空隙。在一个图块集中，如果图像文件包含多个图块，你需要通过设置间距来告诉 Tiled 每个图块的边界在哪里。正确设置间距可以让 Tiled 正确地将单个图像分割成多个独立的图块，这样你就可以在地图编辑时单独选择和使用这些图块。

简而言之，边距用于定义整个图块集的边界，而间距用于在多个图块排列在一起时定义每个图块的边界。正确设置这两个属性对于确保图块集中的图块能够被正确识别和使用至关重要。

第四章 游戏开发Tiled篇-Tiled正常方向（Orthogonal）地图编辑——导入图块集_tileset_10

上图紫色部分就属于边距，两个图块之间相邻的黑色部分就是间距，Tiled导入图片按照下面步骤逻辑进行的：

假设边距为x，间距为y，那么对于整张图，以左上角为原点，从坐标（x,x）开始，从左到右，从上到下，每32像素建立一个图块，跳过y像素再继续建立图块。

第四章 游戏开发Tiled篇-Tiled正常方向（Orthogonal）地图编辑——导入图块集_tileset_11

以Tiled自带的examples中的tmw_desert_spacing.png为例：

如果边距 间距设置为0，那么图块绘制出来的地图是下图中上部分，这样的：

第四章 游戏开发Tiled篇-Tiled正常方向（Orthogonal）地图编辑——导入图块集_图块集_12

注意看，下部分是正确的，上部分的不同在于，没有裁掉边距，从（0,0）开始裁剪，没有跳过间距，因此可以看到左边、上面的黑线是存在的（因为没有裁边距），右边下面被裁掉了一部分，因此没有跳过间距，所有的间距都被纳入到图块中去了，所以图块中把边线也留下来了，而右下角被寄走的部分，应该和多纳入的边线的像素和一样。

因此如果导入的图片有这类问题，那请注意边距和间距的设置。

4.1.1 基于多图片集合

基于多图片集合的建立方式和机遇整张图片集图片的建立方式略有不同，操作如下：

第四章 游戏开发Tiled篇-Tiled正常方向（Orthogonal）地图编辑——导入图块集_图块集_13

点击完成后，界面如下：

第四章 游戏开发Tiled篇-Tiled正常方向（Orthogonal）地图编辑——导入图块集_tileset_14

选择刚刚建立的图片集合，然后点击编辑图块集这个案件，如图红色箭头部分，打开如下界面：

第四章 游戏开发Tiled篇-Tiled正常方向（Orthogonal）地图编辑——导入图块集_图块集_15

点击上图红色箭头指向的加号按键，弹出如下界面：

第四章 游戏开发Tiled篇-Tiled正常方向（Orthogonal）地图编辑——导入图块集_tileset_16

多选则可以将多个图片整合进一个图块集中，方便管理：

第四章 游戏开发Tiled篇-Tiled正常方向（Orthogonal）地图编辑——导入图块集_tileset_17

工具栏中，十字箭头

第四章 游戏开发Tiled篇-Tiled正常方向（Orthogonal）地图编辑——导入图块集_图块集_18

可以拖动图片顺序，返回箭头

第四章 游戏开发Tiled篇-Tiled正常方向（Orthogonal）地图编辑——导入图块集_图块集_19

可以选择环绕规律，其实就是不同的摆布方式。

第四章 游戏开发Tiled篇-Tiled正常方向（Orthogonal）地图编辑——导入图块集_tileset_20

点击保存案件进行修改确认，返回地图编辑界面。你会发现，这里的图块是以图片为单位的，也就是一个图片一个图块。比较适合很多单个图片表示不同状态的情况下。比如有一个文件夹下面有20张小图片，分别是主角的20个动作瞬间，这种适合用多图片集合。

总结

  • Tiled 的正交地图编辑允许使用两种不同类型的图块集，以满足不同的游戏地图设计需求。
  • “基于整张图片集图片” 类型适合从一张大图中分割出多个图块。
  • “多图片集合” 类型适合将多个独立的小图片组合成一个图块集，特别适用于角色动作帧等场景。
  • 正确设置边距和间距对于确保图块集中的图块能够被正确识别和使用至关重要。
  • 通过.tsx文件可以共享和重用图块集，提高地图编辑的效率。

下个章节将聚焦在基于整张图片集图片建立一个游戏地图。