Unity——Tilemaps

1. Tilemaps 可以用不同的sprite构建更大的图像

1.在Hierarchy中 右键  2D Object >Tilemap

    将会生成两个gameObj

    grid：网格，在场景中的网格可以用于放置gameObj在格子中

    Tilemap：网格的子对象，由Tiles组成

1.在Project Window中 Assets >Art 右键 Create >Folder 重命名【此处为Tiles】

2.打开文件夹 右键 Create >Tile 重命名【此处为FirstTile】

1.选择要分配的tile

2.将要分配的sprite拖动到tile对应的Inspector 或 点击Inspector中Sprite右边圆点选择

3.直接拖动sprite到tiles上，若tile未被创建则创建并保存新的tile

1. 为了定义每个tile的位置，调色盘讲tilemap当做画布，tiles当做颜色。可以将tiles放在调色盘上去构建一个画布

2. Window >2D >Tile palette 打开调色盘

3. 选择 Create New Palette

4.保存调色盘到tile文件夹中

5. 将新tile【FirstTile】从project Window 拖到调色盘中

6. 点击Tile选择在格子中的tile

7.从顶端工具栏选择brush tool，即可在格子中铺设tile

1.在Hierarchy window中， 选择Grid物体，在Inspector中找到Cell Size选项，x和y都被设置为1【cell的长和高都是一个单位】

2. 在Project Window，选择Tile Sprite，Inspector中会显示设置，Pixels Per Unit显示着sprite的     尺寸，也就是一个单位里有多少像素。

    sprite的尺寸会在Inspector中显示，如下图为64x64，若默认为100像素，该图像会比一个单     位小

    更改pixels per unit为64可以将每个sprite占满每个单位【1 unit】

    点击Apply应用更改

1. 用于Tiles的sprites形成一个单独的图像文件

2.选择tileset的sprite

3.在Inspector中，将Sprite mode 由Single 变为 Multiple【将Pixel per unit改为64，sprite尺寸为     64】点击Apply应用

4. 分割图像为九个sprites

    在Inspector中点击Sprite Editor，可以在该窗口选择图像的哪一部分作为sprite导入

    在菜单顶部点击Slice，会d出如何切割图像的窗口

    用下拉菜单更改Type为Grid by Cell Count

    更改column&row为3,3

    点击Slice 点击右上角的Apply，新的sprites将被保存

1. 在Hierarchy 选择tilemap物体

2.在Inspector 找到 Tilemap Renderer

3.找到Order in Layer【定义了同一层中绘制游戏对象的顺序，数字越大越后绘制】

5.设置为-10，确保tilemap在任何游戏对象之前绘制

一、创建瓦片地图

1.在 Hierarchy 窗口中，右键单击一个空白位置。

2.从上下文菜单中选择 2D Object >Tilemap

此时将在 Hierarchy 窗口中创建两个游戏对象：

<1> Grid（网格）：顾名思义，场景中的网格可用于将游戏对象均匀地放置在网格单元格中

<2>Tilemap（瓦片地图）：此瓦片地图是网格的子游戏对象。瓦片地图由瓦片 (Tiles) 组成；在本教程中，可将瓦片视为特殊精灵

二：创建新瓦片

1、在 Project 窗口中，选择 Assets >Art

2、创建文件夹 Tiles 存放瓦片

3、在Tiles下创建瓦片

右键 >Crete >Tile 并命名（例如：FirstTile）

4、在 Inspector 中，可以看到瓦片资源的属性。此处包括一个 Sprite 字段（瓦片将绘制此精灵）

三、将精灵分配给FirstTile

1、选中FirstTile

2、在 Inspector 中，单击 Sprite 属性右侧的圈选按钮。此时将打开一个对话窗口，其中会显示你的项目的所有精灵。选择刚保存在 Project 中的一个精灵。（或者精灵直接拖过去）

四：将FirstTile 添加到你的面板 

Unity 使用面板 (Palette) 来定义在瓦片地图的哪个单元格中渲染哪个瓦片。你的瓦片地图就像是画布，瓦片则像是你的颜色。你可以将瓦片置于面板上，这样你就可以拾取瓦片并将瓦片应用于瓦片地图。

要将 FirstTile 添加到面板，请执行以下 *** 作：

1、选择 Window >2D >Tile palette。此时将打开 Tile Palette 窗口：

2、选择 Create New Palette。随即将出现一个窗口，允许你设置面板 （给面板起名字）Create

3、将新面板保存在 Tile 文件夹中（Art 下的文件夹，用于存放面板）

4、将瓦片（FirstTile）拖到面板中心（你想放置的位置，自己排版）

5、你的瓦片将显示在面板的网格中。单击瓦片以将其选中

6、从 Tile Palette 顶部的工具栏中，选择画笔工具

现在，可以在 Scene 视图内的网格上进行绘制

此时需要调整精灵适应网络（这样就要求出图像素要一致）

五：瓦片精灵适应网格

1、将Grid游戏对象， x he y 设置为 1 （每个单元格的宽度 he 高 度为 1 个单位）

2、在 Project 窗口中，选择瓦片精灵

“Pixels per Unit”通过定义 1 个单位内应该设置的像素数量来告知 Unity 如何设置精灵的大小。 这个根据图的大小来确定

五：瓦片集制作

1、点击大图可以看到此时就一张精灵， 比如下面一张大图本来下面就一个精灵 现在 分成了9个 可以看到他的像素本来是 192 * 192 

 （这样作图时需要注意的，比如我们一个单位是64像素，图集要是整数倍） 

把本来的 SpriteMode 从 Single 改为 Multiple . 

点击Sprite Editor (d出下面小图)

进行拆分 .在 Inspector 中，单击 Sprite Editor 按钮 > 单击 Slice > 使用下拉菜单将 Type 字段设置为 Grid by Cell Count > 将 Column &Row 值（包括 C 和 R）设置为 3  >单击 Slice > 单击 Apply

这样就将这张大图 3 * 3 分成了9个

九：将精灵分配给瓦片

Window >2D >Title Palette >d出面板 >右侧的图集拖到面板

调整绘制顺序 （调整地图渲染顺序）

Order in Layer 调整层级 越大 渲染越往后 比如 地图是 -10 玩家是 0 玩家就可以在地图上走，否则地图就盖住了玩家。

此时需要确定的就是 一个单图的大小 图集是确定单图n倍

特别注意的是，unity 创建的一定要是 2D项目，不可以是3D

创建工程骨架

让我们首先创建整个工程的骨架，这样可以确保今后我们需要的文件都包含进来了，并且能够跑起来。

首先工程命名为TileGame。

接下来，下载游戏资源文件。这个资源文件包里包含了以下内容：

玩家sprite。这个图片和《如何用Cocos2d-x3.0制作一款简单的游戏》差不多。

我使用cxfr这个工具制作的一些音效。

我使用Garage　Band制作的一些背景音乐。（查看这篇博文获得更多的信息）

我们将会使用的tile集合--它实际上会和tile地图编辑器一块儿使用，但是，我想把它放在这里，余下的事情会变得更容易。

一些额外的“特殊”的tile，我将会在后面加以说明。

一旦你获得了这些资源，解压并把它拖到你的工程的“Resources”分组下面。(编者的话：上面的音频资源都被编者转成了mp3格式)

如果一切顺利，所有的文件应该都在你的工程里了。是时候制作我们的地图了！

使用Tile来制作地图

Cocos2d-x支持使用Tile地图编辑器创建的TMX格式的地图。(建议大家在安装的时候选择英文，本教程的Tile采用英文的)

下载完之后，直接双击运行。点击File\New，然后会出现以下对话框：

在 orientation部分，你可以选择Orthogonal。Layer format我们也选默认的 Base64(zlib compressed)。

接下来，设置地图的大小。记住，这个大小是以tile为单位的，而不是以像素为单位。我们将创建一个尽量小的地图，因此选择50*50。

最后，你指定每个tile的宽度和高度。你这里选择的宽度和高度要根据你的实际的tile图片的尺寸来做。这个教程使用的样例tile的尺寸是32*32，所以在上面的选项中选择32*32.

接下来，我们把制作地图所需要的tile集合导入进来。点击菜单栏上面的“map”菜单，“New　Tileset...”，然后会出现下面的窗口：

为了获得图片，点击“Browse...”按钮，然后定位到工程的的Resources文件夹，选择 tmw_desert_spacing.png文件（我们刚才解压进去的），然后加到工程中去。它会基于文件名自动填充名称。然后把新图快 名称命名为“tmw_desert_spacing.png”.同时，设置下面的Tile spacing和Margin都为1。

你可以保留宽度和高度为32*32，因为tile的实际大小也是这么多。至于margin和spacing，我还没找到任何好的文档解释如何设置这两个值，下面是我的个人看法：

Margin就是当前的tile计算自身的像素的时候，它需要减去多少个像素（宽度和高度都包含在内）。（类比word、css的margin）

Spacing 就是相邻两个tile之间的间隔（同时考虑宽度和高度）（类比word、css的spacing）

如果你看看 tmw_desert_spacing.png，你将会看见每一个tile都有一个像素的空白边界围绕着，这意味着我们需要把margin和spacing设置为1。

一旦你选择ok，你将会看到Tilesets窗口中显示了一些tiles。现在，你可以制作地图了！在Tilesets小窗口，选择一个tile，然后再在地图上的任意位置单击，你就会看到你选中的tile出现在点中的地方了。

因此，继续制作地图吧---充分发挥你的聪明才智！确保增加至少一对建筑物在地图上，因为后面我们需要一些东西来做碰撞。

记住一些方便的快捷方式：

你可以在Tileset拾取器中拖出一个方框，一次选取多个tile。

你可以使用工具栏上的“Bucket Fill Tools”按钮(就是一个桶那个)来基于一个基准tile绘制整个地图。

你可以使用“View\Zoom　In...”和“View\Zoom out...”来放大和缩小地图。

一旦你完成了地图的绘制工作，在Layers选项卡的层上面双击（现在可以说是“Layer1”），然后重命名为“Background”。然后点击“File\Save”并且保存文件到你的工程的资源文件夹中，并且命名为“TileMap.tmx”。

后面我们将会使用这个tmx来做一些有趣的事情，好了，让我们把地图加载到游戏中去吧！

把tile地图添加到Cocos2d-x的场景中

打开HelloWorldScene.h，然后添加一些成员变量：

cpp

private:

cocos2d::TMXTiledMap *_tileMap

cocos2d::TMXLayer *_background

然后在HelloWorldScene.cpp文件中做如下修改：

cpp

// Replace the init method with the following

bool HelloWorld::init()

{

if ( !Layer::init() )

{

return false

}

std::string file = "TileMap.tmx"

auto str = String::createWithContentsOfFile(FileUtils::getInstance()->fullPathForFilename(file.c_str()).c_str())

_tileMap = TMXTiledMap::createWithXML(str->getCString(),"")

_background = _tileMap->layerNamed("Background")

addChild(_tileMap, -1)

return true

}

这里，我们调用TMXTiledMap类的一些方法，把我们刚刚创建的地图文件加载进去。

一些简明的TMXTiledMap的背景知识。它是一个Node，你可以设置它的位置和比例等。这个地图的孩子是一些层，而且提供了一个帮助函数可以让你通过层的名字得到层对象--我们上面就是通过这种方面获得地图背景的。每一个层都是一个SpriteSheet的子类，这里考虑了性能的原因--但是这也意味着每一个层只能有一个tile集。

因此，我们这里做的所有这些，就是指向一个tile地图，然后保存背景层的引用，并且把tile地图加到HelloWorld层中。

好了，就这么多！

---