Unity3D中Isometric Tilemap功能实践

前言

最近出于兴趣想本身作一个2D的游戏，由于有着C#的基础，因此决定使用Unity3D来作。

以前对于Unity3D其实了解很少，不过看了一些Unity3D的视频和官方文档后，暂时作起来也没遇到什么太大的困难。

本篇博客要说的是Unity 2018.3新增的一个东西——Isometric TileMap，通常用于作一个2.5D的地图。

这个东西官方文档讲的并不详细,而且有些配置彻底没有说出来，致使始终没法达到预期效果。

国内的各类中文社区和问答网站都没有这方面的资料，最后仍是在Unity的英文社区找到了一篇答案才有了进展：参考连接。

可是即便按照这篇答案中的方法进行操做，在我这里依然无法成功实现这个2.5D的地图。

后来本身慢慢摸索才最终实现，因此特此记录下实现的步骤。

导入图片生成纹理图片

若是将使用TileMap画地图比做给墙贴瓷砖，那么首先咱们须要为瓷砖设置不一样的花纹，因此咱们要导入一张图片做为花纹。

导入图片生成纹理图片后，须要将其纹理类型设置为Sprite (2D and UI)，由于Tilemaps不支持其它的纹理类型。

注意到纹理属性中的Pixels Per Unit (PPU)，它的值默认为100。

这个属性很关键，它决定了这个纹理图片在Unity中显示时，1个Unity的单元显示多少个像素。

也就是说一张400 X 200的纹理图片在Unity中，至关于4*2个Unity单元。

新建瓷砖

纹理就是一个花纹，不可能将花纹直接花在墙上，咱们须要根据花纹生成不一样的瓷砖，而后再将瓷砖贴到墙上，Tile就是咱们的瓷砖。

经过Assets > Create > Tile生成一个Tile文件，而后将以前导入的纹理图片与Tile文件关联。

新建Isometric Tilemap

要贴瓷砖还须要一面墙，而Isometric Tilemap就是咱们的墙。

使用GameObject > 2D Object > Tilemap，建立一个带有一个Tilemap子节点的Grid对象。

在这个Grid对象的属性Cell Layout中，咱们发现关于Isometric Tilemap有两个选项，一个是Isometric，而另一个是Isometric Z As Y。

Isometric实现的是至关于一个地形同样的东西，可是想要在这个地形上放上房子和树木之类的，那么须要设置为Isometric Z As Y。

在这里咱们看到还有一个Cell Size的设置，我在这里设置为 X：1，Y：0.5，Z：1。（请注意，这里的Z的大小务必为1，不然一样没法在地形上放置房子）

Cell Size中的X为1，表示一个Unity的单元格中X的长度至关于多少个Unity单元。

导入一张400 X 200的纹理图片，它的PPU为100，那么至关于须要4 X 2的Unity单元。

由于咱们这里讲CellSize的X与Y设置为1和0.5，因此这张纹理图片在TileMap中的显示占4个单元格。

而对于Grid下的Tilemap对象，咱们只须要修改一个属性，即将Tilemap Render的Mode改成Individual。

这么作的缘由是只有在Individual下，Scene视图中Tilemap的各个Tile间才能正确排序。

若是是Chunk模式，不一样的Tile在绘制时会出现下面这种遮挡的现象：

不过在咱们打包时，仍是须要将Mode改成Chunk，由于Chunk会按位置对Tiles进行分组，并将它们的Sprite一块儿批处理以进行渲染，这样会提升性能。

另外在Chunk模式下，还须要将不一样的Sprite放到一个Sprite Altas中，这样它们才能正确排序。

由于这篇博客的主题不是这方面因此只是捎带提起，具体如何使用Chunk模式能够查询官方文档，这里再也不赘述，先将Mode设置为Individual便可。

新建Tile Palette

有了瓷砖和墙，那么咱们还须要一个装瓷砖的箱子。

这个瓷砖箱装着各类各样的瓷砖，当咱们贴瓷砖时，就从这个瓷砖箱中取出来用。

Tile Palette就是咱们瓷砖箱。

使用Window > 2D > Tile Palette，打开Tile Palette视图。

点击Create New Palette建立一个Tile Palette，请保证这个Tile Palette的属性和Isometric Tilemap的属性匹配，即：

• Cell Size为Manuel，值为 X：1，Y：0.5，Z：1
• Grid为Isometric Z As Y

若是你的图片是矩形图片那么就是，那么这里的Y为0.5，若是基于等距投射的图片，那么Y为0.57735。

建立了Tile Palette后，咱们将以前导入的Tile文件拖动到Tile Palette上，也就至关于将瓷砖放到了瓷砖箱中。

若是拖动纹理图片到Tile Palette上，也会自动生成一个Tile文件，这样方便得多。

开始绘制Tilemap

贴瓷砖就是从瓷砖箱中选择瓷砖，而后贴到墙上。

而绘制地图，就是在Tile Palette中选择不一样的Tile，而后选定Active Tilemap为指定的TileMap后就能够绘制了。

可是当咱们准备画图的时候发现，一个Unity单元格实在过小了，就至关于一个像素那么大。

这里能够经过设置TileMap对象的scale，将其X和Y放大100倍来处理。（固然也能够经过同时调节Grid的Cell Size的X为100，Y为50，而后再将图片的PPU从100改成1）

此时能够看到咱们的Tile大小正好合适。

那么咱们能够在两个单元格内绘制不一样的Tile，可是这里注意到，Tile之间的遮挡存在问题。

解决Tile间的遮挡问题

上面Tile间的遮挡问题，我经过以前提到的Unity英文社区的参考连接解决了。

操做就是经过Edit > Settings > Graphics，修改Transparency Sort Mode为Custom Axis，并将其值设为X：0，Y：1，Z：-0.49。

不一样Z Position下Tile的绘制

上面咱们实现了基本地形的绘制，如今咱们须要在地形上面绘制房子。

以前咱们绘制Tile时，Tile Palette的Z Position为0。

如今咱们须要在地形上绘制房子，那么就须要调高Z Position,将Z Position设为1。

绘制后发现遮挡顺序不对，我们的Z Position为1的房子居然被Z Position为0的地形给遮挡了。

到这里参考以前的帖子也没办法处理这个事，没有任何文档和资料有关于这个事情的处理。

我这里也纠结了好久，搞了一两个晚上都没搞出来，最后直接加了几个QQ群，把问题甩在那里，而后打Dota2去了。

而果真期望别人也不怎么靠谱，结果最后仍是本身去研究。

虽然不清楚内部工做原理，可是按照排除法去想了一下相关的几个设置点，问题应该就是出如今透明度排序那里。

因而调节XYZ这三个值，发现将Z进一步调小到-26后就没有问题了，虽然不知道发生了什么，可是终究是搞定了。

如下是最终效果：

总结

不知道为何最后一个那么大的坑在官方文档上彻底没有说起，并且这个功能从这个角度来看，不像是彻底作完了的样子。

但愿个人这篇博客对后来的趟坑者有用吧，固然若是有用也别忘了点个赞。

如文中有谬误，还望不吝赐教。

PS：

本身建了一个QQ群328544641，用于Unity2D技术的学习交流群，里面暂时就我一我的。

若是您对Unity的2D技术有兴趣，能够互相学习交流。

人不在多，只但愿进群的人能够获得本身想要的答案，也一样但愿您能在了解的状况下给予一些Unity菜鸡帮助，好比身为菜鸡的我。