前言

TileMapUnity2017.2及以上版本可使用,素材来自爱给网
你可以右键下方的图片另存,再导入项目中使用

Unity版本: 2019.4.26
Visual Studio版本: 2019

在这里插入图片描述

相关介绍

Tilemap-Unity官方手册(中文)

CellSwizzle-Unity脚本API

UnityEngine.Grid-Unity脚本API

Unity Tilemap动态生成2d地图-CSDN

按照Rule Tile规则动态生成地图-CSDN

unity 14瓦片地图tilemap-CSDN

Unity Tilemap模块全攻略-CSDN课程

使用TileMap快速构造2D关卡-B站

使用Tilemap系统制作2D场景关卡地图-B站

TileMap瓦片地图的详细使用方法-B站

其他介绍

微软官方C#函数文档

Unity官方API文档(英文)

Unity官方API文档(中文)

Unity官方用户手册(中文)

Unity游戏蛮牛API文档(中文)

Unity教程-C语言中文网

Unity用户手册-unity圣典

Unity组件手册-unity圣典

Unity脚本手册-unity圣典

上一篇笔记

Unity(8)-开启或关闭背景音乐

下一篇笔记

Unity(10)-OnGUI界面

一、图片预处理

  • 如果你的图片已经切分过了,可以跳过这个步骤。
  • 因为图片素材是一张图片包含着多个图片素材,所以需要对图片进行处理。
    将图片转换成Multiple模式,即多图片模式

在这里插入图片描述

然后点击SpriteEditor精灵编辑器

在这里插入图片描述

选择一种切分的方式Type进行切分

在这里插入图片描述

此时的图片很大概率切分是错误的,但是可以减少一部分切分的工作。

在这里插入图片描述

  • 图片的切分不是此文章需要关注的点,你可以根据文章Unity(3)-图片切分来学习图片切分的过程。
  • 为了方便演示,我只手动分了一部分的素材

在这里插入图片描述

  • 应用之后,展开图片就能看见那些被框起来的素材
  • 没有被框起来的素材不会出现在项目中

在这里插入图片描述
在这里插入图片描述

二、创建调色板(TilePalette)

点击菜单栏的Window,选择2D中的Tile Palette

在这里插入图片描述
在这里插入图片描述

点击Create New Palette下拉框后创建一个调色板

参数介绍
Name调色板名称
Grid网格类型
Cell Size每个网格的大小
Grid参数介绍
Rectangle矩形
Hexagon六边形
Isometric菱形
Isometric Z As Y菱形,将Z轴与Y轴替换
Cell Size参数介绍
Automatic自动设置,X轴宽度为1,Y轴宽度为1,Z轴宽度为0
Manual自定义

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

参数介绍
Cell Size网格大小
Cell Gap网格间隙
Cell Layout网格布局
Cell Swizzle网格重排
Cell Layout参数介绍
Rectangle矩形
Hexagon六边形
Isometric菱形
Isometric Z As Y菱形,Z轴与Y轴互换
Cell Swizzle参数介绍
XYZ将单元格位置保持在 XYZ。
XZY将单元格位置从 XYZ 重排为 XZY。
YXZ将单元格位置从 XYZ 重排为 YXZ。
YZX将单元格位置从 XYZ 重排为 YZX。
ZXY将单元格位置从 XYZ 重排为 ZXY。
ZYX将单元格位置从 XYZ 重排为 ZYX。

在这里插入图片描述

在调色板界面中可以选择已经创建好的调色板

在这里插入图片描述

三、创建瓦片(Tile)

[1]. 方式一

选中文件夹

在这里插入图片描述

右键选择Create

在这里插入图片描述

在可选项中选择Tile

在这里插入图片描述

选择保存的位置和瓦片名称

在这里插入图片描述

一个瓦片资源就创建好了

在这里插入图片描述

[2]. 方式二

  • 方式二需要通过调色板Tile Palette实现
  • 点击菜单栏的Window,选择2D中的Tile Palette

在这里插入图片描述

选中之前创建的调色板

在这里插入图片描述

  • 下方是已经切分好的Sprite素材
  • 方式二是直接通过选中的素材Sprite来生成瓦片Tile
    按下Ctrl + 左键可以多选

在这里插入图片描述

先选择一个资源,再按下Shift + 左键可以连选

在这里插入图片描述

可以将选中的素材拖进调色板中
如果是该图片下所有的素材都需要时,可以直接将图片拖进去

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

四、修改瓦片(Tile)

[1]. 参数介绍

在项目中选中一个瓦片资源

在这里插入图片描述

参数介绍
Preview预览图片
Sprite精灵资源
Color颜色
Collider Type碰撞体类型
Collider Type参数介绍
None无碰撞体
Sprite根据Sprite素材的形状创建碰撞体
Grid根据网格的形状创建碰撞体

在这里插入图片描述

点击Sprite就可以跳转到对应的素材

在这里插入图片描述

[2]. 修改Sprite

修改Sprite参数有两种方式,一是直接将素材拖进去

在这里插入图片描述

二是点击右侧的圆圈,在选择面板中选择

在这里插入图片描述

在选择素材时,下发会有对应图片信息的预览

在这里插入图片描述

[3]. 修改Color

在这里插入图片描述

  • Color界面中,你可以调整R G B值来设置颜色,也可以通过可视化颜色界面选择。
  • R: Red,红色,范围[0,255]
    G: Green,绿色,范围[0,255]
    B: Blue,蓝色,范围[0,255]

在这里插入图片描述

A通道是用来修改瓦片的透明度的,阿尔法Alpha

在这里插入图片描述

[4]. 修改ColliderType

  • 不需要碰撞时选择None
  • 当素材是不规则的形状,就需要使用Sprite
  • 使用Grid会根据网格的大小生成碰撞体,容易出现大小不匹配的情况

在这里插入图片描述

五、创建瓦片地图(TileMap)

在这里插入图片描述

右键选择2D ObjectTilemap

在这里插入图片描述

  • 创建Tilemap游戏对象时,会创建一个Grid父类游戏对象用来显示网格
  • 选中Grid及其子游戏对象时,在场景中都可以显示网格
    其实Grid就是一个无组件的空物体加上了Grid组件和Transform组件

在这里插入图片描述
在这里插入图片描述

有需要的话可以创建多个TileMap,这样你就可以针对不同的瓦片资源进行管理

在这里插入图片描述

然后将瓦片地图拖动到项目中创建预制体

在这里插入图片描述

六、修改瓦片地图(TileMap)

在项目中选中一个瓦片地图的预制体

在这里插入图片描述

包含有三个组件TransformTilemap(瓦片地图)和Tilemap Renderer(瓦片地图渲染器)

在这里插入图片描述

[1]. 修改Tilemap组件

  • Tilemap组件参数如下
  • Orientation参数为Custom时,下面的PositionRotationScale才能设置值
Tilemap参数介绍
Animation Frame Rate动画帧速率
Tile Anchor锚点
Orientation瓦片地图绘制在哪个面
Position位置
Rotation旋转
Scale缩放
Orientation参数介绍
XY在X和Y轴绘制,默认
XZ在X和Z轴绘制
YX在Y和X轴绘制
YZ在Y和Z轴绘制
ZX在Z和X轴绘制
ZY在Z和Y轴绘制
Custom自定义绘制

在这里插入图片描述

[2]. 修改TilemapRenderer组件

参数介绍
Material定义用于渲染精灵纹理的材质。
Sort Order设置所选瓦片地图上的瓦片排序方向
Mode设置渲染器的渲染模式
Detect Chunk Culling Bounds确定渲染器如何检测用于剔除瓦片地图块的边界。这些边界可扩展瓦片地图块的边界,以确保在剔除过程中不会裁剪过大的精灵。
Chunk Culling Bounds输入剔除边界扩展的值(采用 Unity 单位)
Sorting Layer设置瓦片地图的排序图层 (Sorting Layer)。从下拉框中选择现有的排序图层,或创建新的排序图层
Order in Layer设置瓦片地图在其排序图层中的渲染优先级。首先渲染编号较低的图层。编号较高的图层叠加在前者之上。
Mask Interaction设置瓦片地图渲染器 (Tilemap Renderer) 在与精灵遮罩交互时的行为方式
Sort Order参数介绍
Bottom Left从左下角的点开始
Bottom Right从右下角的点开始
Top Left从左上角的点开始
Top Right从右上角的点开始
Mode参数介绍
Chunk渲染器按位置对瓦片进行分组,并将瓦片的精灵一起批处理以进行渲染。选择此模式可在瓦片地图中获得最佳渲染性能。
Individual渲染器单独渲染每个瓦片,同时还会考虑它们的位置和排序顺序。此模式使瓦片上的精灵能够与场景中的其他渲染器或与自定义排序轴进行交互。
Detect Chunk Culling Bounds参数介绍
Auto渲染器会自动检查瓦片使用的精灵,以确定要使用的扩展剔除边界。
Manual于扩展边界以剔除瓦片地图块的值是手动设置的,而不使用 Editor 的自动检测功能。
Mask Interaction参数介绍
None瓦片地图渲染器不与场景中的任何精灵遮罩交互。这是默认选项。
Visible Inside Mask瓦片地图在精灵遮罩覆盖瓦片地图的地方是可见的,而在遮罩外部不可见
Visible Outside Mask瓦片地图在精灵遮罩外部是可见的,而在遮罩内部不可见。精灵遮罩会隐藏其覆盖的精灵部分。

在这里插入图片描述

七、使用调色板(TilePalette)

[1]. 吸管工具

快捷键:I
功能:

在这里插入图片描述

在调色板TilePalette直接点击瓦片Tile就会快速地调用吸管工具

在这里插入图片描述

吸管工具也可以选中多个素材

在这里插入图片描述

[2]. 画笔工具

快捷键: B
功能: 在瓦片地图Tilemap中绘制瓦片Tile

在这里插入图片描述

在一个调色板中选择素材时,会首先调用吸管工具,然后重新返回画笔工具

在这里插入图片描述

  • 然后需要在场景中选择需要绘制的瓦片地图Tilemap
  • 这样绘制的瓦片信息就会被保存在对应的瓦片地图里

在这里插入图片描述
在这里插入图片描述

[3]. 网格调整

  • 可以看到上一步操作时瓦片Tile的大小和网格不匹配,这样在绘制的时候瓦片就是在网格居中绘制。
  • 为了实现绘制的瓦片是相邻的,需要把网格大小调整成瓦片资源的大小
    此时的瓦片资源会比瓦片地图的网格小,所以可以将瓦片地图的网格调小
  • 在瓦片地图对象中是没法变更网格大小的,网格组件存在于Grid对象中
    选中Grid对象,把XY改小适应瓦片的大小即可

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

[4]. 橡皮工具

快捷键: D 或按住Shift
功能: 删除瓦片地图Tilemap的瓦片Tile

在这里插入图片描述
在这里插入图片描述

[5]. 矩形工具

快捷键: U
功能: 绘制或删除多个瓦片Tile

在这里插入图片描述

绘制一个区域的瓦片,先选择矩形工具和瓦片素材,选中一块区域创建瓦片资源

在这里插入图片描述

删除一个区域的瓦片,先选择矩形工具,按下Shift键选中一块区域删除区域内的瓦片

在这里插入图片描述

[6]. 油漆桶工具

快捷键: G
功能: 快速填充瓦片Tile

在这里插入图片描述

加入瓦片地图中有一块空心的区域,需要绘制成某个瓦片时就可以使用到油漆桶

在这里插入图片描述

  • 也可以通过油漆桶,替换一片相邻且使用相同素材的瓦片
  • 如果两个瓦片只有四个角接触到,则瓦片不算相邻

在这里插入图片描述

[7]. 箭头工具

快捷键: S
功能: 选中瓦片Tile

在这里插入图片描述

在这里插入图片描述

[8]. 移动工具

快捷键: M
功能: 移动选中的瓦片Tile

在这里插入图片描述
在这里插入图片描述

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐