Unity Tilemap System 瓦片地图系统

可以使用Tilemap System （瓦片地图系统）在网格上布置Tiles。

Environment 文件夹下有许多资源用于创建游戏地图：

image.png

✅ 新建 Tilemap

在 Hierarchy 窗口右键 ：选择 2D Object > Tilemap > Rectangular

image.png

就会创建 Grid 和 Tilemap 两个游戏对象：

image.png

• Grid, which you will use to lay out tiles evenly. The grid will appear in the Scene view when this GameObject is created. 网格（Grid），您将使用它来均匀地布置瓦片。当创建这个游戏对象时，在场景视图中会显示网格。

• Tilemap, a child GameObject of the Grid GameObject, which you will use to render (display) the tiles that you set up. 瓦片地图（Tilemap），是网格游戏对象的子游戏对象，您将使用它来渲染（显示）您设置的瓦片。

• 一个Grid下可以创建多个Tilemap

image.png

最终就是在这个网格形的 Tilemap 上绘制内容。

在Art文件夹下创建一个【Tiles文件夹】来存放 Tile 资源：

image.png

✅ 新建第一个 Tile

在Tiles文件夹下，右键选择 Create > 2D > Tiles > Rule Tile

image.png

命名为“FirstTile”

image.png

要设置Tile （瓦片）引用的精灵，在Inspector中，点击 “Select”：

image.png

然后搜索 “Tile” 并选择 Tile1

image.png

image.png

✅ 新建 Tile Palette （瓦片调色板）

就像画家在调色板上安排他们计划用来绘画的颜色一样，Tile Palette 是一个工具，您将使用它来组织您的Tile并将它们绘制在Tilemap的网格单元。

打开 Tile Palette： Window ｜2D｜ Tile Palette

image.png

Tile Palette 窗口：

image.png

目前没有有效的Palette，需要新建一个Palette。

选 No Valid Palette, 点击 Create New Palette ｜ 命名为 Game Palette ｜ 点击Create ｜ 这个Palette的存放路径设置为 Assets > Art > Tiles 文件夹下 ：

image.png

image.png

Tile（瓦片）将出现在网格的一个单元格中：

image.png

➡️ Add another tile to the palette 向palette中添加其他的tile

比如，继续在Tiles文件夹下，右键选择 Create > 2D > Tiles > Rule Tile ，命名为 SecondTile:

image.png

瓦片精灵选择 Tile2

image.png

然后把 SecondTile 也拖拽到 Game Palette 上：

image.png

✅ 在TileMap上绘制

Palette 是调色板，创建的FirstTile、SecondTile这些Tile就类似于颜料，把颜料拖拽到调色板上。
选中调色板上的颜料，使用画笔就可以在TileMap上绘制了。

image.png

这一排工具虽然在 Tile Palette窗口下，但它们并不是操作Palette的，而是操作TileMap的。

比如，在“Tile Palette ”窗口中 Game Palette 调色板下，选择 “FirstTile” 这个颜料 ，然后选择“画笔”工具。

image.png

➡️ 开始在Tilemap 上绘制：

image.png

➡️ 擦除

image.png

要擦除图块，请选择【橡皮擦工具】或按住D并选择包含要删除的图块的单元格。

现在地图现在看起来有点奇怪，每个图块精灵周围都有一个间隙，而不是填充整个单元格；这是因为精灵比网格单元小。

➡️ 在tilemap上绘制地图时一些快捷键

image.png

✅ 修复图块间隙

要将图块适合网格，请按照以下说明操作：

1. 在Hierarchy中，选择Grid 游戏对象。
2. 在Inspector中，转到Grid组件并找到Cell Size属性。它的X和Y 值都设置为1 。这意味着每个单元格的宽度和高度都是一个单位。

image.png

在“Project” 中，选择Tile1精灵。

image.png

在Inspector 中，找到Pixels Per Unit属性，将其设置为100 。每单位像素 (PPU) 告诉 Unity 如何通过定义一个单位内应容纳多少像素来调整精灵大小 - 在本例中，每个单位为 100 像素。

image.png

在Inspector底部，找到精灵的预览图像。精灵大小为 64 x 64 像素。精灵太小，无法放入 100 x 100 像素的网格单元中。

image.png

➡️ 现在你有两个选择。您可以执行以下任一选项：

• 【方式1】：将 Pixels Per Unit 设置为64 ，点击 “Apply” 。这种方法将使精灵适合一个 Unity 单位，即一个网格单元的大小。

image.png

将Tile1的Pixels Per Unit 设置为64 后：

image.png

将Tile2的Pixels Per Unit 设置为64 后：

image.png

• 【方式2】在Grid组件中，将两个Cell Size值调整为0.64 。

image.png

这两种方式都可以达到一样的效果：

image.png

但是【方式1】需要对每个图块精灵的Pixels Per Unit进行设置。

✅ Set the tilemap Order in Layer

➡️ 如何调整tilemap的绘制顺序？

【绘制顺序】是指游戏中不同的视觉元素在玩家屏幕上呈现（显示）的顺序。目前，玩家角色和您的瓦片地图都具有相同的z轴（深度）位置值 0。这两个游戏对象还在同一个Default Layer中。

image.png

image.png

这个共享的深度值和 Default Layer 可能导致瓦片地图显示在角色上方，这将导致游戏无法进行。更好的方式是明确告诉Unity正确的绘制顺序。

要设置瓦片地图的绘制顺序，如下操作：

• 选中Tilemap，在Tilemap Renderer 组件下找到Order in Layer属性

image.png

This property defines the order in which GameObjects in the same layer are drawn.
这个属性定义了在同一层中的游戏对象绘制的顺序。

游戏对象 Order in Layer 的值越小，越先被绘制。值越大越后被绘制。所以需要确保Tilemap的 Order in Layer 的值，要比PlayerCharacter 的 Order in Layer 的值小。

PlayerCharacter 的 Order in Layer 的值为0。所以将Tilemap的 Order in Layer 改为 -10。就可以确保先被绘制。

✅ 使用tilesets（图块集）

tilesets 是一个【包含多个精灵的单个图像文件】，您可以使用这些精灵来创建 Tile Palette。

它在一个图像文件中包含多个精灵纹理。将Tile组合在一起意味着您可以批量对它们进行调整。相也更容易让Unity以节省资源的方式在您的游戏中进行渲染。

tilesets 中的精灵通常排列在规则的网格中。 以下是Ruby's Adventure资源包中的tilesets示例，其中包含珊瑚地面上的一条3x3网格的铺砌石路：

image.png

这个tilesets被分解为9个独立的精灵时，每个精灵都是唯一的。

1. 在“Project”窗口中，在所选资源包的文件夹中，导航至Art > Sprites 。此文件夹中名称以“Floor_”开头的所有文件都是图块集。

选择FloorBricksToGrassCorner图块集，然后选择箭头以查看图像文件的精灵。

image.png

目前只有一个精灵可见，因为【该图块集尚未被切片】。

✅ tilesets（图块集）切片

比如，要把这6个tilesets 切片，每个tilesets 都切割成 3 x 3 的9张小图片。

image.png

选中这几个tilesets ｜ 将Sprite Mode 先改成 Multiple

image.png

然后选中第一个tilesets，点击 【Sprite Editor】 按钮打开编辑面板。 然后点击Slice后的箭头，打开小面板：

image.png

• Grid By Cell Size 按照Cell大小切割
• Grid By Cell Count 按照Cell数量切割

选择 Grid By Cell Size

image.png

也可以选择 Grid By Cell Count 按照行列切割，比如3行3列：

image.png

然后点击右上角的Apply 按钮，关闭面板，就切好了，再次展开查看第一个tilesets发现变成9张图了：

image.png

然后就可以把切割后的图，拖拽到 Tile Palette上了

image.png

如果拖拽到 Tile Palette上发现图块有间隙：

image.png

需要调整一下图片像素大小。因为 tilesets原图片大小是 192 x 192像素:

image.png

变成9张图后，每张图的大小应该是 64 x 64像素，只需要把这里的填充像素，改成 64 就可以了，然后点击下面的Apply 就可以了。

image.png

按照同样方式把其他几张tilesets也搞定就OK了：

image.png