Unity-瓦片地图详解

前言

在学习瓦片地图的使用时，我发现无论国内外还是Unity官方的相关教程都比较散，接触的比较浅，学的我挺难受的，所以就把各个地方看的教程加上我自己的理解，和官方的API手册，总结出了这个详解。

0. 瓦片地图基础知识

0.1 什么是瓦片地图

TileMap是Unity5.5a实验版加入的新功能，就像他的字面意思「瓦片地图」。

但说起来这个技术并不“新”了，成熟的2D引擎（诸如gamemaker，RpgMaker），都带有自己自己的tile编辑器的，第三方的编辑工具如Tiled使用起来也是比较方便的，Tile编辑器界的老牌开源编辑器Tiled，很多引擎也提供Tiled导入的支持。

TileMap 是有助于快速搭建整体关卡的利器。如果没有它，开发者要么只有用最笨的方法手动逐一搭建，要么自己写编辑器，要么借助于第三方编辑软件，而这三种方法其实对初学者都不是很友好。

0.2 瓦片地图的构成

Tilemap用起来其实就和现实中画画一样，它由以下五个基本部分组成：

• Sprite(精灵)：
  纹理的容器。
  大型纹理图集可以转换为精灵图集(Sprite Sheet)。
• Tile(瓦片)：
  包含一个精灵，以及二个属性，颜色和碰撞体类型。
  使用瓦片就像在画布上画画一样，画画时可以设置一些颜色和属性。
• Palette(调色板)：
  当你在画布(Canvas)上画画时，会需要一个位置来保存绘画的结果。
  类似地，调色板(Palette)的功能就是保存瓦片，将它们绘制到网格上。
• Brush(笔刷)：
  用于将画好的东西绘制到画布上。
  使用Tilemap时，可以在多个笔刷中任意选择，绘制出线条、方块等各种形状。
• Tilemap（瓦片地图）：
  类似Photoshop中的图层，我们可以在Tilemap上画上Tile。

Tilemap部分其它工具：

• Grid(网格)：
  用于控制网格属性的组件。
  Tilemap是Grid的子对象。
  Grid类似于UI Canvas(UI画布)。
• Tilemap渲染器(Tilemap Renderer)：
  用于控制Tile在Tilemap上的渲染，控制诸如排序、材质和遮罩等。

1. 瓦片地图的初级使用

1.1 创建流程

1. 创建瓦片地图：
   在层级窗口中，依次点击Create->2D Object->Tilemap 新建Tilemap
   这将自动创建两个GameObject对象，一个是名为Grid的父对象，上面带有Grid组件。
   另一个是名为Tilemap的子对象，它在Grid对象下，带有Tilemap和Tilemap Renderer组件。
2. 创建调色板
   依次点击Window->Tile Palette打开调色板窗口。
   在调色板窗口中，选择Create New Palette。设置名字和属性，然后指定保存位置。
3. 创建笔刷
   向调色板加入新瓦片，拖动精灵到调色板中，会打开一个新窗口，询问瓦片的保存位置。
   你也可以通过精灵图集拖动多个瓦片。
4. 创建完成，开始在场景中绘制:
   瓦片加入调色板后，就可以用笔刷绘制场景了。

1.2 瓦片绘制工具

TilePalette(瓦片调色板) 中可以找到用来绘制Tile的绘图工具：

从左至右依次为：

• 选择工具
  用来选择Tile资源更改属性。
• 移动工具
  用于移动选中的Tile资源。
• 矩形工具
  用于绘制矩形块，并由选定的Tile资源来填充。
• 选取工具
  用于选取要绘制的Tile资源，按下左键并拖拽可以一次选取多个Tile。
• 擦除工具
  用于擦除Tile资源。
• 填充工具
  用于将选定区域填充为选定的Tile资源。

TilePalette面板上有一个Edit，如果选上的话可以编辑在TilePalette面板中的Tile资源。

1.3 瓦片地图的物理碰撞

在Tilemap中添加碰撞体十分简单，只要给Tilemap对象加入一个Tilemap Collider 2D组件即可。
可以看到，这个组件自动为该Tilemap上的所有瓦片都加入了碰撞体。

我们可以通过再添加Composite Collider来优化这里的碰撞体，Rigidbody 2D组件会随着Composite Collider自动添加。
因为平台不会移动，所以要记得将Rigidbody 2D上的Body Type属性设置为Static。
最后在Tilemap Collider 2D上勾选Used By Composite，在整个平台周围生成一个复合碰撞体。
设置好后的检视窗口如下所示。

这样我们的Tilemap部分就完成了。

1.4 注意事项

1.4.1 瓦片匹配问题

• 发生情景：
  在创建Tilemap及一个palette后，我们想把已有的美术资源(Jungle_Tileset.png)做成瓦片，在对图片进行切片、拖入Palette后、进行绘制地图时会发现，瓦片并不与Scene场景内的unit单元格匹配。
  例如下图:

• 问题原因：
  原因在于我们对图片进行切片时，Pixels Per Unit 数值的问题。

• 问题分析：
  它的含义是每个unit单元格所能容纳该图片的多少个像素。上图依次为Pixels Per Unit为不同值时每个瓦片与Scene场景下一个Unit的比例。拿Pixels Per Unit=43来说，其含义是每个unit只够装下43个像素，而我们的美术图片（左）像素为1024x1024，算下来每个瓦片有128像素，我们却只给每个Unit43像素，所以从最右边图片我们可以看出大概9个unit才可以放下一个瓦片。

• 如何解决：
  对每张将要被做成瓦片的美术资源进行Pixels Per Unit的计算。如本例最合理的数值为 1024/8 = 128

  非瓦片的Sprite直接拖拽进入Scene进行缩放操作即可。

1.4.2 Tiles的选择问题

• 发生情景：
  在导入2d-extras包后，我们可以在Project内右键添加各类Tiles（见下图）。假如我们要做一个带有Animation的瓦片，是否直接可以直接使用AnimationTile类型呢？答案是肯定的，但完美的做法是按需使用。

• 问题原因：

  AnimatedTile的RuleTile的功能存在差异

  • AnimatedTile：

    • 瓦片数目：对单块瓦片进行操作
    • 动画速度：MinimumSpeed ~ MaximumSpeed
    • 起始时间：Start Time

  • RuleTile

    (前提是设置瓦片output类型为Animation)：

    • 瓦片数目：多片，且能同时实现规则瓦片功能
    • 动画速度：Speed
    • GameObject：同时实现PrefabBrush功能

• 总结：
  对于带有Animation的瓦片，我们应该按需选择Tile的类型。
  例如：不同启用时间的地刺，我们应当选择AnimatedTile进而调节StartTime参数；
  例如：较长的瀑布，我们应该选用RuleTile，既能实现Animation效果又能方便画多个瓦片；
  例如：蜡烛，我们想实现燃烧动画不一致，就应当采用AnimatedTile进而调节两个Speed参数等等。
  但总的来说，RuleTile集成了几类extra瓦片的基础功能，较为常用。