Tilemap 一般称之为瓦片地图或者平铺地图,是 Unity2017 中新增的功能,主要用于快速编辑 2D 游戏中的场景,通过复用资源的形式提升地图多样性
工作原理就是用一张张的小图排列组合为一张大地图
它和 SpriteShape 的异同
-
共同点:他们都是用于制作 2D 游戏的场景或地图的
-
不同点:
-
SpriteShape 可以让地形有弧度,Tilemap 不行
-
Tilemap 可以快捷制作有伪“Z”轴的地图,SpriteShape 不行
-
在 Window -->
Package Manager 中搜索 2D,选择 2D Tilemap Editor,导入项目
一、瓦片资源
Tilemap 的最小单位:“瓦片”,其创建方式有两种:
方法一:
在 Assets -->
Create -->
Tile 中创建,或者在 Project 窗口中单击右键 -->
Create -->
Tile
![](https://i-blog.csdnimg.cn/blog_migrate/748d33b90b25556a738a816c9e638071.png#pic_center)
方法二:
在 Tile Palette 瓦片调色板窗口创建,点击 Window -->
2D -->
Tile Palette
![](https://i-blog.csdnimg.cn/blog_migrate/b64b8f07acf6beb3d53305a9662117c7.png#pic_center)
- 首先新建一个瓦片地图编辑文件,创建时的默认参数不动
![](https://i-blog.csdnimg.cn/blog_migrate/289204cfc3a2389090648ef153ff3840.png#pic_center)
- 将图片资源拖入到窗口中选择要保存的路径
![](https://i-blog.csdnimg.cn/blog_migrate/b97d79e63f7e466020b88e71bb3ee919.png#pic_center)
参数介绍:
![](https://i-blog.csdnimg.cn/blog_migrate/f441c42ca03b80bf0c90dfeb02281bff.png#pic_center)
- Preview:预览图
- Sprite:瓦片关联的精灵纹理
- Color:瓦片色调颜色
- Collider Type:碰撞器类型
- None:不生成碰撞器
- Sprite:基于精灵轮廓生成碰撞器形状
- Gird:基于瓦片单元格生成碰撞器形状
二、瓦片调色板窗口
(一)创建瓦片调色器相关参数
![](https://i-blog.csdnimg.cn/blog_migrate/07c7d2f36f86a48d42ecf2ae8c523e5a.png#pic_center)
- Name:瓦片调色器的名称
- Grid:瓦片的网格布局
- Rectangle:矩形瓦片
- Hexagon:六边形瓦片
- Isometric:等距瓦片,单元格为菱形
- Isometric Z as Y:等距瓦片并且将单元格 Z 轴转换为局部 Y 坐标
- Hexagon Type:六边形瓦片地图类型,决定了六边形的旋转位置
- Point Top:点朝顶部的六边形
- Flat Top:面朝顶部的六边形
- Cell Size:瓦片绘制到单元格的大小
- Automatic:基于瓦片资源的精灵大小自动设置
- Manual:自定义大小
(二)瓦片调色板面板
编辑的时候注意打开 Editor 开关:
![](https://i-blog.csdnimg.cn/blog_migrate/645274b49445297615fd1deca592c056.png#pic_center)
:选择 (S)
:移动 (M)
:画笔 (B),使用选取器后会自动切换到画笔工具,单个填充
:框填 (U),使用选取器后再切换到框填工具,范围填充
:选取器 (I),选取填充样本
:橡皮擦 (D),单个擦除
:填充 (G),使用选取器后再切换到填充工具,批量填充
- Active Tilemap:当前激活的瓦片层
(三)创建地图
- 将所有资源图片一起导入瓦片调色板中
![](https://i-blog.csdnimg.cn/blog_migrate/e3078cde2f9ca2d141143e138070daee.png#pic_center)
- 在 Hierarchy 窗口中右键选择 2D Project
-->
Tilemap 创建,此时 Scene 窗口中将出现网格 - 用选取器选中调色板中的图片,直接在 Scene 窗口中单击创建即可
- 可以创建多个 Tilemap,将其层级排序
(四)等距瓦片地图的编辑
创建模式为 Isometric Z as Y 的瓦片调色板,将资源拖入其中,会发现高度不同的图片并没有对齐
![](https://i-blog.csdnimg.cn/blog_migrate/f889826a361e48ac45ec14d18ff06227.png#pic_center)
原因是在调色板中默认会将图片的中心点和菱形的中心点重合,我们这里需要在 Sprite Editor 窗口中调整 Sprite 的中心点即可
![](https://i-blog.csdnimg.cn/blog_migrate/b4ecd16d0202abb2312e10a9f16e78e0.png#pic_center)
调整好后,方块的上表面即可与菱形平面对齐
![](https://i-blog.csdnimg.cn/blog_migrate/9faf06e682c2b590cec4f4d9fc80b09c.png#pic_center)
也可以开启 Tile Palette 窗口中的 Can Change Z Position,为每一张图片手动设置高度。按 “+” 和 “-” 可以快捷修改 Z 的高度
![](https://i-blog.csdnimg.cn/blog_migrate/8636cb16eaca934231022d87b2fb9a2f.png#pic_center)
但此时在 Scene 窗口中绘制不同的方块时,其渲染情况会很奇怪
![](https://i-blog.csdnimg.cn/blog_migrate/da3e3d974d1a7f4e29a8e19cceec829c.png#pic_center)
因为 Unity 内部设置的原因,我们需要修改 Edit -->
Project Setting -->
Graphics -->
Camera Settings 中的 Transparency Sort Mode 为 Custom Axis,并将 X、Y、Z 设置为 0、1、-0.26。同时,将该 Tilemap 的 Tilemap Renderer 的模式切换为 individual,此时渲染情况将变得正常。
![](https://i-blog.csdnimg.cn/blog_migrate/024bc172806d76a7cade18767c45985e.png#pic_center)
![](https://i-blog.csdnimg.cn/blog_migrate/0ede67affb33cf77e0b35c72f1390b11.png#pic_center)
三、瓦片地图关键脚本和碰撞器
(一)Grid
![](https://i-blog.csdnimg.cn/blog_migrate/60e9475c8d5082afadc7b6959a4e99be.png#pic_center)
- Cell Size:网格单元格的大小
- Cell Gap:网格之间的间隔大小
- Cell Layout:网格单元的形状和排列
- Rectangle:矩形瓦片
- Hexagon:六边形瓦片
- Isometric:等距瓦片,单元格为菱形
- Isometric Z as Y:等距瓦片并且将单元格 Z 轴转换为局部 Y 坐标
- Cell Swizzle:Unity 将 XYZ 单元格坐标重新排序为你选择的类型
(二)Tilemap
![](https://i-blog.csdnimg.cn/blog_migrate/306938c4afc732e594355f6b92f4a4a7.png#pic_center)
- Animation Frame Rate:播放瓦片动画的速率,相当于倍速
- Color:瓦片色调颜色
- Tile Anchor:瓦片的锚点偏移
- Orientation:瓦片地图上瓦片的方向,相当于 2D 平面使用的是 Unity 中的哪两个轴
(三)Tilemap Renderer
![](https://i-blog.csdnimg.cn/blog_migrate/77b8f956b7d9f8113b8a66665c676eaf.png#pic_center)
-
Sort Order:设置所选瓦片地图上的瓦片排序方向
-
Mode:渲染器的渲染模式
-
Chunk:按位置对瓦片进行分组,并将瓦片精灵一起批处理进行渲染,性能较好
-
Individual:单独渲染每个瓦片,会考虑他们的位置和排序顺序。会让瓦片精灵和场景中其他渲染器或自定义排序轴进行交互
等距瓦片一般选择此项
-
-
Detect Chunk Culling:渲染器如何剔除瓦片地图的边界
- Auto:自动检测
- Manual:手动设置拓展边界
-
Mask Interaction:遮罩交互
- None:不与场景中任何精灵遮罩交互
- Visible Inside mask:精灵遮罩覆盖的地方可见,而遮罩外部不可见
- Visible Outside mask:精灵遮罩外部的地方可见,而遮罩覆盖处不可见
-
Material:材质,默认选择的是不受光照效果的材质
-
Chunk Culling Bounds:当选择手动设置剔除拓展边界时,可以在这里填写自己拓展的值
-
Sorting Layer:所在排序层
-
Order in Layer:排序层的序号
(四)瓦片地图碰撞器
为挂载 TilemapRenerer 脚本的对象添加 Tilemap Collider 2D 脚本,会自动添加碰撞器
注意:想要生成碰撞器的瓦片 Collider Type 类型要进行设置,不能为 None
四、导入瓦片官方拓展包
拓展包为 Tilemap 添加新的瓦片类型和笔刷类型,帮助我们更加方便的编辑 2D 场景
解压后直接拖入到 Assets 文件夹中即可
下载地址:https://github.com/Unity-Technologies/2d-extras
注意选择对应的 Unity 版本进行下载
下载好后,在 Project 窗口中右键,会发现多出来这些选项
![](https://i-blog.csdnimg.cn/blog_migrate/53a8182b958116d411a95ca00a7afeab.png#pic_center)
五、新增瓦片类型
(一)规则瓦片 Rule Tile
定义不同方向是否存在连接图片的规则,让我们更加快捷的进行地图编辑
![](https://i-blog.csdnimg.cn/blog_migrate/c658e78fed951981c51b7ada8886c959.png#pic_center)
-
Default Sprite:默认图片
-
Default GameObject:默认游戏对象,一般不关联
-
Default Collider:默认碰撞器规则
- None:不生成碰撞器
- Sprite:基于精灵轮廓生成碰撞器形状
- Gird:基于瓦片单元格生成碰撞器形状
-
Tiling Rules:平铺规则,可以自己添加删除
在右边的九宫格内左键单击可以选中 ✔️,表示这个九宫格位置有图片;右键单击可以选中 ❌,表示这个九宫格位置没有图片,双击可以切换选中形态
当整个九宫格都满足自己设置的条件时,九宫格中央区域将显示最右方选择的图片
(二)动画瓦片 Animated Tile
可以指定序列帧,产生可以播放序列帧动画的瓦片
![](https://i-blog.csdnimg.cn/blog_migrate/18f0ead7c9a92cc0602bbc39940b1a67.png#pic_center)
- Number of Animated Sprites:动画有多少张图构成
- Minimum Speed:最小播放速度
- Maximum Speed:最大播放速度
- Start Time:开始播放的时间
- Start Frame:从哪一帧开始播放
- Collider Type:碰撞器规则
- None:不生成碰撞器
- Sprite:基于精灵轮廓生成碰撞器形状
- Gird:基于瓦片单元格生成碰撞器形状
(三)管道瓦片 Pipeline Tile
根据自己相邻瓦片的数量更换显示的图片
![](https://i-blog.csdnimg.cn/blog_migrate/9b88805f8e58a5fc1768b2482b735af4.png#pic_center)
- One —— Four:相邻 1 ~ 4 个图片时使用的图片
(四)随机瓦片 Random Tile
根据你设置的图片,随机从中选一个进行绘制
![](https://i-blog.csdnimg.cn/blog_migrate/55ca1282d8bfc4b8c730c987c664ca9a.png#pic_center)
- Number of Sprites:有多少张图构成
- Color:叠加的颜色
- Collider Type:碰撞器规则
- None:不生成碰撞器
- Sprite:基于精灵轮廓生成碰撞器形状
- Gird:基于瓦片单元格生成碰撞器形状
(五)地形瓦片 Terrain Tile
有点类似规则瓦片,只不过地形瓦片是帮助你定好的规则
![](https://i-blog.csdnimg.cn/blog_migrate/b8ef24cb370ae395dbe23e256654ff13.png#pic_center)
- Filled:填满
- Three Sides:三个面
- Two Sides and One Corner:两面一角
- Two Adjacent Sides:相邻两侧
- Two Opposite Sides:两个相对的侧面
- One Side and Two Corners:一侧和两个角
- One Side and One Upper Corner:一边和上角
- One Side:一面
- Four Corners:四个角
- Three Corners:三个角
- Two Adjacent Corners:两个相邻角
- Two Opposite Corners:两个相反的角
- One Corner:一个角
- Empty:空
(六)权重随机瓦片 Weighted Random Tile
可以不平均随机选择图片的瓦片
![](https://i-blog.csdnimg.cn/blog_migrate/1d2d7a0b511e9f475f1d43ee9d64b2f6.png#pic_center)
- Number of Sprites:有多少张图构成
- Weight:每种图片的权重
- Color:叠加的颜色
- Collider Type:碰撞器规则
- None:不生成碰撞器
- Sprite:基于精灵轮廓生成碰撞器形状
- Gird:基于瓦片单元格生成碰撞器形状
(七)规则覆盖瓦片 Rule Override Tile
在规则瓦片的基础上,改变已经设置的规则对应的图片
![](https://i-blog.csdnimg.cn/blog_migrate/b74054b66b6edb4adf70690f3863650c.png#pic_center)
(八)高级规则覆盖瓦片 Advanced Rule Override Tile
在规则瓦片的基础上,改变已经设置的规则与对应的图片
![](https://i-blog.csdnimg.cn/blog_migrate/266818cbc5cd620824af4fcab1894986.png#pic_center)
六、新增笔刷类型
(一)自定义笔刷
-
预设体笔刷——用于快捷刷出想要创建的精灵
可以关联预制体,用于快速创建该预制体
![](https://i-blog.csdnimg.cn/blog_migrate/c7a8db74bd88e6d4305922c3a85cfa87.png#pic_center)
- 预设体随机笔刷——用于快捷随机刷出想要创建的精灵
- Perlin Scale:柏林算法参数,一般不需要改
![](https://i-blog.csdnimg.cn/blog_migrate/8a996baee159f5c79a64027e14699f41.png#pic_center)
- 随机笔刷——可以指定瓦片进行关联,随机刷出对应瓦片
- Random Tile Set Size:随机瓦片设置大小,每次绘制 X * Y 个瓦片
- Random Tile Sets:随机瓦片设置
- Pick Random Tiles:随机选择瓦片,效果不明显
- Add To Random Tiles:添加到随机瓦片,效果不明显
![](https://i-blog.csdnimg.cn/blog_migrate/fcf021c53bd25e94001e2e7df1c9e5ce.png#pic_center)
(二)拓展笔刷
笔刷记录了额外的信息,使用时相当于把这些信息显示出来
-
Coordinate Brush 坐标笔刷 —— 可以实时看到格子坐标
-
Game Object Brush 游戏对象笔刷 —— 可以在场景中选择和擦除游戏对象,仅限于选定的游戏对象的子级
-
Group Brush 组合笔刷 —— 可以设置参数,当点击一个瓦片样式时,会自动向后选取一个范围内的瓦片
- Gap:从笔刷向后看,遇到 Gap 个瓦片空格时停止选择
- Limit:从笔刷向后看 Limit 个瓦片,共选择 Limit + 1 个瓦片
![](https://i-blog.csdnimg.cn/blog_migrate/8cdc3e211d2bf42d3d77b7bad82342ca.png#pic_center)
- Line Brush 线性笔刷 —— 决定起点和终点画一条线出来
- Line Start Active:起点是否激活
- Fill Gaps:扩充线的宽度
- Line Start:线的起点坐标
![](https://i-blog.csdnimg.cn/blog_migrate/79c8a9a19b2d663ffc3c931f8fbed8db.png#pic_center)
-
Random Brush 随机笔刷 —— 和之前的自定义随机画笔类似,可以随机画出瓦片
类似自定义笔刷中的 Random Brush
![](https://i-blog.csdnimg.cn/blog_migrate/1a2d9ef261daca604d848525998d9735.png#pic_center)
-
Tint Brush 着色笔刷 —— 可以给瓦片着色,瓦片的颜色锁要开启(Inspector 窗口切换 Debug 模式,修改 Flags 为 None)
-
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();
}