Unity核心5——Tilemap

Tilemap 一般称之为瓦片地图或者平铺地图，是 Unity2017 中新增的功能，主要用于快速编辑 2D 游戏中的场景，通过复用资源的形式提升地图多样性

​ 工作原理就是用一张张的小图排列组合为一张大地图

​ 它和 SpriteShape 的异同

• 共同点：他们都是用于制作 2D 游戏的场景或地图的

• 不同点：

  • SpriteShape 可以让地形有弧度，Tilemap 不行

  • Tilemap 可以快捷制作有伪“Z”轴的地图，SpriteShape 不行

​ 在 Window --> Package Manager 中搜索 2D，选择 2D Tilemap Editor，导入项目

一、瓦片资源

​ Tilemap 的最小单位：“瓦片”，其创建方式有两种：

​ 方法一：

​ 在 Assets --> Create --> Tile 中创建，或者在 Project 窗口中单击右键 --> Create --> Tile

​ 方法二：

​ 在 Tile Palette 瓦片调色板窗口创建，点击 Window --> 2D --> Tile Palette

1.首先新建一个瓦片地图编辑文件，创建时的默认参数不动

2.将图片资源拖入到窗口中选择要保存的路径

​

​ 参数介绍：

1. Preview：预览图
2. Sprite：瓦片关联的精灵纹理
3. Color：瓦片色调颜色
4. Collider Type：碰撞器类型
   • None：不生成碰撞器
   • Sprite：基于精灵轮廓生成碰撞器形状
   • Gird：基于瓦片单元格生成碰撞器形状

二、瓦片调色板窗口

（一）创建瓦片调色器相关参数

1. Name：瓦片调色器的名称
2. Grid：瓦片的网格布局
   • Rectangle：矩形瓦片
   • Hexagon：六边形瓦片
   • Isometric：等距瓦片，单元格为菱形
   • Isometric Z as Y：等距瓦片并且将单元格 Z 轴转换为局部 Y 坐标
3. Hexagon Type：六边形瓦片地图类型，决定了六边形的旋转位置
   • Point Top：点朝顶部的六边形
   • Flat Top：面朝顶部的六边形
4. Cell Size：瓦片绘制到单元格的大小
   • Automatic：基于瓦片资源的精灵大小自动设置
   • Manual：自定义大小

（二）瓦片调色板面板

​ 编辑的时候注意打开 Editor 开关：

1. ：选择 (S)
2. ：移动 (M)
3. ：画笔 (B)，使用选取器后会自动切换到画笔工具，单个填充
4. ：框填 (U)，使用选取器后再切换到框填工具，范围填充
5. ：选取器 (I)，选取填充样本
6. ：橡皮擦 (D)，单个擦除
7. ：填充 (G)，使用选取器后再切换到填充工具，批量填充
8. Active Tilemap：当前激活的瓦片层

（三）创建地图

1. 将所有资源图片一起导入瓦片调色板中

1. 在 Hierarchy 窗口中右键选择 2D Project --> Tilemap 创建，此时 Scene 窗口中将出现网格
2. 用选取器选中调色板中的图片，直接在 Scene 窗口中单击创建即可
3. 可以创建多个 Tilemap，将其层级排序

（四）等距瓦片地图的编辑

​ 创建模式为 Isometric Z as Y 的瓦片调色板，将资源拖入其中，会发现高度不同的图片并没有对齐

​ 原因是在调色板中默认会将图片的中心点和菱形的中心点重合，我们这里需要在 Sprite Editor 窗口中调整 Sprite 的中心点即可

​ 调整好后，方块的上表面即可与菱形平面对齐

​ 也可以开启 Tile Palette 窗口中的 Can Change Z Position，为每一张图片手动设置高度。按 “+” 和 “-” 可以快捷修改 Z 的高度

​ 但此时在 Scene 窗口中绘制不同的方块时，其渲染情况会很奇怪

​ 因为 Unity 内部设置的原因，我们需要修改 Edit --> Project Setting --> Graphics --> Camera Settings 中的 Transparency Sort Mode 为 Custom Axis，并将 X、Y、Z 设置为 0、1、-0.26。同时，将该 Tilemap 的 Tilemap Renderer 的模式切换为 individual，此时渲染情况将变得正常。

三、瓦片地图关键脚本和碰撞器

（一）Grid

1. Cell Size：网格单元格的大小
2. Cell Gap：网格之间的间隔大小
3. Cell Layout：网格单元的形状和排列
   • Rectangle：矩形瓦片
   • Hexagon：六边形瓦片
   • Isometric：等距瓦片，单元格为菱形
   • Isometric Z as Y：等距瓦片并且将单元格 Z 轴转换为局部 Y 坐标
4. Cell Swizzle：Unity 将 XYZ 单元格坐标重新排序为你选择的类型

（二）Tilemap

1. Animation Frame Rate：播放瓦片动画的速率，相当于倍速
2. Color：瓦片色调颜色
3. Tile Anchor：瓦片的锚点偏移
4. Orientation：瓦片地图上瓦片的方向，相当于 2D 平面使用的是 Unity 中的哪两个轴

（三）Tilemap Renderer

1. Sort Order：设置所选瓦片地图上的瓦片排序方向

2. Mode：渲染器的渲染模式

   • Chunk：按位置对瓦片进行分组，并将瓦片精灵一起批处理进行渲染，性能较好

   • Individual：单独渲染每个瓦片，会考虑他们的位置和排序顺序。会让瓦片精灵和场景中其他渲染器或自定义排序轴进行交互

     等距瓦片一般选择此项

3. Detect Chunk Culling：渲染器如何剔除瓦片地图的边界

   • Auto：自动检测
   • Manual：手动设置拓展边界

4. Mask Interaction：遮罩交互

   • None：不与场景中任何精灵遮罩交互
   • Visible Inside mask：精灵遮罩覆盖的地方可见，而遮罩外部不可见
   • Visible Outside mask：精灵遮罩外部的地方可见，而遮罩覆盖处不可见

5. Material：材质，默认选择的是不受光照效果的材质

6. Chunk Culling Bounds：当选择手动设置剔除拓展边界时，可以在这里填写自己拓展的值

7. Sorting Layer：所在排序层

8. Order in Layer：排序层的序号

（四）瓦片地图碰撞器

​ 为挂载 TilemapRenerer 脚本的对象添加 Tilemap Collider 2D 脚本，会自动添加碰撞器

​ 注意：想要生成碰撞器的瓦片 Collider Type 类型要进行设置，不能为 None

四、导入瓦片官方拓展包

​ 拓展包为 Tilemap 添加新的瓦片类型和笔刷类型，帮助我们更加方便的编辑 2D 场景

​ 解压后直接拖入到 Assets 文件夹中即可

​ 下载地址：https://github.com/Unity-Technologies/2d-extras

​ 注意选择对应的 Unity 版本进行下载

​ 下载好后，在 Project 窗口中右键，会发现多出来这些选项

五、新增瓦片类型

（一）规则瓦片 Rule Tile

​ 定义不同方向是否存在连接图片的规则，让我们更加快捷的进行地图编辑

1. Default Sprite：默认图片

2. Default GameObject：默认游戏对象，一般不关联

3. Default Collider：默认碰撞器规则

   • None：不生成碰撞器
   • Sprite：基于精灵轮廓生成碰撞器形状
   • Gird：基于瓦片单元格生成碰撞器形状

4. Tiling Rules：平铺规则，可以自己添加删除

   在右边的九宫格内左键单击可以选中 ✔️，表示这个九宫格位置有图片；右键单击可以选中 ❌，表示这个九宫格位置没有图片，双击可以切换选中形态

   当整个九宫格都满足自己设置的条件时，九宫格中央区域将显示最右方选择的图片

（二）动画瓦片 Animated Tile

​ 可以指定序列帧，产生可以播放序列帧动画的瓦片

1. Number of Animated Sprites：动画有多少张图构成
2. Minimum Speed：最小播放速度
3. Maximum Speed：最大播放速度
4. Start Time：开始播放的时间
5. Start Frame：从哪一帧开始播放
6. Collider Type：碰撞器规则
   • None：不生成碰撞器
   • Sprite：基于精灵轮廓生成碰撞器形状
   • Gird：基于瓦片单元格生成碰撞器形状

（三）管道瓦片 Pipeline Tile

​ 根据自己相邻瓦片的数量更换显示的图片

• One —— Four：相邻 1 ~ 4 个图片时使用的图片

（四）随机瓦片 Random Tile

​ 根据你设置的图片，随机从中选一个进行绘制

1. Number of Sprites：有多少张图构成
2. Color：叠加的颜色
3. Collider Type：碰撞器规则
   • None：不生成碰撞器
   • Sprite：基于精灵轮廓生成碰撞器形状
   • Gird：基于瓦片单元格生成碰撞器形状

（五）地形瓦片 Terrain Tile

​ 有点类似规则瓦片，只不过地形瓦片是帮助你定好的规则

1. Filled：填满
2. Three Sides：三个面
3. Two Sides and One Corner：两面一角
4. Two Adjacent Sides：相邻两侧
5. Two Opposite Sides：两个相对的侧面
6. One Side and Two Corners：一侧和两个角
7. One Side and One Upper Corner：一边和上角
8. One Side：一面
9. Four Corners：四个角
10. Three Corners：三个角
11. Two Adjacent Corners：两个相邻角
12. Two Opposite Corners：两个相反的角
13. One Corner：一个角
14. Empty：空

（六）权重随机瓦片 Weighted Random Tile

​ 可以不平均随机选择图片的瓦片

1. Number of Sprites：有多少张图构成
2. Weight：每种图片的权重
3. Color：叠加的颜色
4. Collider Type：碰撞器规则
   • None：不生成碰撞器
   • Sprite：基于精灵轮廓生成碰撞器形状
   • Gird：基于瓦片单元格生成碰撞器形状

（七）规则覆盖瓦片 Rule Override Tile

​ 在规则瓦片的基础上，改变已经设置的规则对应的图片

（八）高级规则覆盖瓦片 Advanced Rule Override Tile

​ 在规则瓦片的基础上，改变已经设置的规则与对应的图片

六、新增笔刷类型

（一）自定义笔刷

1.预设体笔刷——用于快捷刷出想要创建的精灵

可以关联预制体，用于快速创建该预制体

2.预设体随机笔刷——用于快捷随机刷出想要创建的精灵

• Perlin Scale：柏林算法参数，一般不需要改

3.随机笔刷——可以指定瓦片进行关联，随机刷出对应瓦片

• Random Tile Set Size：随机瓦片设置大小，每次绘制 X * Y 个瓦片
• Random Tile Sets：随机瓦片设置
• Pick Random Tiles：随机选择瓦片，效果不明显
• Add To Random Tiles：添加到随机瓦片，效果不明显

（二）拓展笔刷

​ 笔刷记录了额外的信息，使用时相当于把这些信息显示出来

1. Coordinate Brush 坐标笔刷 —— 可以实时看到格子坐标

2. Game Object Brush 游戏对象笔刷 —— 可以在场景中选择和擦除游戏对象，仅限于选定的游戏对象的子级

3. Group Brush 组合笔刷 —— 可以设置参数，当点击一个瓦片样式时，会自动向后选取一个范围内的瓦片

   • Gap：从笔刷向后看，遇到 Gap 个瓦片空格时停止选择
   • Limit：从笔刷向后看 Limit 个瓦片，共选择 Limit + 1 个瓦片

4.Line Brush 线性笔刷 —— 决定起点和终点画一条线出来

• Line Start Active：起点是否激活
• Fill Gaps：扩充线的宽度
• Line Start：线的起点坐标

5.Random Brush 随机笔刷 —— 和之前的自定义随机画笔类似，可以随机画出瓦片

类似自定义笔刷中的 Random Brush

6.Tint Brush 着色笔刷 —— 可以给瓦片着色，瓦片的颜色锁要开启（Inspector 窗口切换 Debug 模式，修改 Flags 为 None）

7.Tint Brush(Smooth) 光滑着色笔刷 —— 可以给瓦片进行渐变着色，需要按要求改变材质

七、代码管理 Tilemap

​ Tilemap 组件：用于管理瓦片地图

​ TileBase 组件：瓦片资源对象基类

​ Grid 组件：用于坐标转换

​ 使用它们需要引用命名空间：using UnityEngine.Tilemaps;

// 瓦片地图信息 可以通过它得到瓦片格子
public Tilemap map;

// 格子位置相关控制 可以通过它 进行坐标转换
public Grid grid;

// 瓦片资源基类通过它可以得到瓦片资源
public TileBase tileBase;

// Start is called before the first frame update
void Start()
{
    // 1.清空瓦片地图
    map.ClearAllTiles();

    // 2.获取指定坐标格子
    TileBase tmp = map.GetTile(Vector3Int.zero);

    // 3.设置删除瓦片
    map.SetTile(new Vector3Int(0, 2, 0), tileBase); // 设置
    map.SetTile(new Vector3Int(1, 0, 0), null);     // 删除

    // 4.替换瓦片
    map.SwapTile(tmp, tileBase); // tmp 的所有瓦片将变成 tileBase

    // 5.世界坐标转格子坐标

    //   屏幕坐标转世界坐标
    //   世界坐标转格子坐标
    // 传入的参数是世界坐标
    grid.WorldToCell();
}