主题

Editor Essentials Scripting Graphics & Visual Effects 2D Mobile & Touch XR Physics User Interface For Educators AI & Navigation

Content Type

Pathways

Build skills in Unity with guided learning pathways designed to help anyone interested in pursuing a career in gaming and the Real Time 3D Industry.

View all Pathways

Courses

Explore a topic in-depth through a combination of step-by-step tutorials and projects.

View all Courses

Projects

Create a Unity application, with opportunities to mod and experiment.

View all Projects

Tutorials

Find what you’re looking for with short, bite-sized tutorials.

主题

sriheitian

1603616092@qq.com

帐户

常见问题解答

查看教程内容

世界设计 - 瓦片地图

教程

初级

1 小时

(1270)

摘要

在前面的教程中，你已经使角色在屏幕上移动，接下来便可以提供一个有趣环境，让角色在其中移动。为此，在本教程中，你将在 2D 模式下使用 Unity 的另一个功能：瓦片地图 (Tilemaps)。
想进一步了解如何使用 Unity 来进行 2D 游戏开发？请与 Unity 开发专家联系以获取一对一的直播课程。

材料

Tile.png

选择 Unity 版本

最后更新:2021 四月 12

2020.3

2020.2

2020.1

2019.4

2019.3

2019.2

2019.1

2018.4

2018.3

语言

中文

1.简介

目前为止，你已发现，要在屏幕上显示对象，你需要将精灵渲染器添加到游戏对象。然后，Unity 将在此游戏对象所在的位置进行渲染。
这种方法对于像你的角色这样的单个移动对象非常有用，但是角色移动所在的世界可能非常广阔，因此绘制整个世界将是极为繁重的工作。对于需要根据游戏测试来更改世界的游戏，你可能需要大规模重绘各种资源。

瓦片地图可以用来解决此问题！瓦片地图将世界作为一个网格，你可以在其中为每个网格单元格设置不同的精灵。通过使用在视觉上连在一起的精灵，你可以创建便于在编辑器内直接更改的更大图像。

选择要展开的图像
输入图像描述 (可选)

2.创建瓦片地图

首先，让我们创建一个瓦片地图：
1.在 Hierarchy 窗口中，右键单击一个空白位置。
2.从上下文菜单中选择 2D Object > Tilemap。
选择要展开的图像
输入图像描述 (可选)

此时将在 Hierarchy 窗口中创建两个游戏对象：
Grid（网格）：顾名思义，场景中的网格可用于将游戏对象均匀地放置在网格单元格中。
Tilemap（瓦片地图）：此瓦片地图是网格的子游戏对象。瓦片地图由瓦片 (Tiles) 组成；在本教程中，可将瓦片视为特殊精灵。


选择要展开的图像
输入图像描述 (可选)

3.创建新瓦片

瓦片地图不会直接使用精灵，而是使用瓦片。要创建新瓦片，请执行以下操作：

1.在 Project 窗口中，选择 Assets > Art。
2.在文件夹内右键单击，然后选择 Create > Folder。将新文件夹命名为“Tiles”。

3.双击 Tiles 以打开文件夹。
4.在文件夹内右键单击，然后选择 Create > Tile。在对话框中，将此瓦片命名为“FirstTile”并保存。

选择要展开的图像
输入图像描述 (可选)

5.在 Project 窗口中，选择 FirstTile。

6.在 Inspector 中，可以看到瓦片资源的属性。此处包括一个 Sprite 字段（瓦片将绘制此精灵）：
选择要展开的图像
输入图像描述 (可选)

4.将精灵分配给 FirstTile

要将精灵分配给你的瓦片，请执行以下操作：
1.从本页顶部的教程资料中，下载 Tile.png 并将其保存在你的计算机上。


2.就像对 Ruby.png 进行的操作一样，将此瓦片保存在 Sprites 文件夹中：
选择要展开的图像
输入图像描述 (可选)


3.确保在 Project 窗口中仍然选中 FirstTile 瓦片。

4.在 Inspector 中，单击 Sprite 属性右侧的圈选按钮。此时将打开一个对话窗口，其中会显示你的项目的所有精灵。选择刚保存在 Project 中的一个精灵。

或者，可以将刚保存的精灵从 Project 文件夹拖放到 Inspector 中的 Sprite 属性字段。
选择要展开的图像
输入图像描述 (可选)

你现在已准备好瓦片，接下来便需要通过一种方法告诉瓦片地图，网格的哪个单元格包含此特定瓦片。为此，你需要绘制瓦片地图。

5.将 FirstTile 添加到你的面板

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

要将 FirstTile 添加到面板，请执行以下操作：
1.选择 Window > 2D > Tile palette。此时将打开 Tile Palette 窗口：

选择要展开的图像
输入图像描述 (可选)


此窗口的中心为空，这是因为你还没有面板。


2.选择 Create New Palette。随即将出现一个窗口，允许你设置面板。
选择要展开的图像
输入图像描述 (可选)

为新面板命名（例如 GamePalette），然后单击 Create。


3.将新面板保存在 Tile 文件夹中（这是你在本教程中先前创建的文件夹）。
4.将新瓦片 (FirstTile) 从 Project 窗口拖到新面板的中心（要求的位置）。
5.现在，你的瓦片将显示在面板的网格中。单击瓦片以将其选中。
6.从 Tile Palette 顶部的工具栏中，选择画笔工具。

选择要展开的图像
输入图像描述 (可选)

现在，可以在 Scene 视图内的网格上进行绘制：
选择要展开的图像
输入图像描述 (可选)


但是… 糟糕！你的瓦片并未相连！瓦片之间有巨大的间隙！为什么会这样？

6.使瓦片精灵适应网格

让我们调查其中的原因：

1.  在 Hierarchy 窗口中，选择 Grid 游戏对象。在 Inspector 中，找到 Cell Size 属性。你会发现 x 和 y 均设置为 1：

选择要展开的图像
输入图像描述 (可选)


这意味着每个单元格的宽度为 1 个单位，高度为 1 个单位。
2.在 Project 窗口中，选择瓦片精灵。Inspector 将显示精灵的 Import Settings。你会发现 Pixels Per Unit  属性已设置为 100。
选择要展开的图像
输入图像描述 (可选)

“Pixels per Unit”通过定义 1 个单位内应该设置的像素数量来告知 Unity 如何设置精灵的大小。此示例中为 100 像素/单位。


3.在 Inspector 底部，查看精灵的大小。你会发现精灵的宽度和高度只有 64 像素。
选择要展开的图像
输入图像描述 (可选)

由于精灵小于 100 像素，即小于 1 个单位，因此无法填满边长为 1 个单位的网格单元格。
4.将 Pixel Per Unit 值更改为 64。这样就会告诉 Unity 在场景的 1 个单位内包含精灵的 64 像素。由于你的精灵为 64 像素，因此可以恰好填满 1 个单位。
5.在更改 Pixel Per Unit (PPU) 值之后，单击 Inspector 底部的 Apply。现在，你的所有精灵都应该会恰好填满网格！
选择要展开的图像
输入图像描述 (可选)

7.什么是瓦片集？

现在，你知道：
什么是瓦片
瓦片与精灵和瓦片地图之间的关联性
如何使用 Tile Palette 来绘制瓦片地图


但是，构建一个有趣的世界需要许多不同的瓦片。还记得本教程开头简介中的示例网格吗？这个网格使用 9 个不同的瓦片。将所有这些瓦片作为微小的图像文件进行导入可能既麻烦又耗时。

为了简化瓦片创建过程并实现技术优化，用于瓦片的精灵通常以单个图像文件（称为瓦片集）形式出现。

例如，以下图像在 3x3 网格上包含九个瓦片，因此 Unity 稍后可以在 Import Settings 中将此图像拆分为 9 个不同的精灵：
 

选择要展开的图像
输入图像描述 (可选)

8.调整瓦片集

你在本项目开头下载的教程资源包含了游戏所需的所有瓦片集。

让我们来调整其中一个瓦片集：
1.在 Project 窗口中，选择 Art > Sprites > Environment。名称以“Floor”开头的所有文件都是瓦片集。
2.选择名为 FloorBricksToGrassCorner 的瓦片集。就像在先前教程中一样，单击小箭头可以查看从图像创建了哪个精灵。

选择要展开的图像
输入图像描述 (可选)

此刻只存在一个精灵，这是完整图像。但你需要告诉 Unity，该图像实际上包含九个不同的精灵。

3.在 Inspector 中，使用下拉菜单将 Sprite Mode 从 Single 更改为 Multiple。

4.将 Pixel Per Unit 值从 100 更改为 64（因为就像先前的示例一样，这些瓦片的宽度为 64 像素）。
选择要展开的图像
输入图像描述 (可选)

5.单击 Apply 按钮以应用所做的更改。

9.调整瓦片集的精灵设置

现在，你需要调整将图像的哪一部分作为精灵导入。你可以手动选择 9 次，但这很繁琐，有一种更简单的方法来执行此操作。
要将图像拆分为 9 个精灵，请执行以下操作：
1.在 Inspector 中，单击 Sprite Editor 按钮。此时将打开一个窗口，你可以在其中调整将图像的哪一部分作为精灵导入。
2.在窗口顶部的菜单栏中，单击 Slice。随即将出现一个窗口，你可以在其中指定如何拆分图像。

3.使用下拉菜单将 Type 字段设置为 Grid by Cell Count。
4.将 Column & Row 值（包括 C 和 R）设置为 3。
选择要展开的图像
输入图像描述 (可选)



5.单击 Slice。一个网格将出现在你的图像上；该网格的每个单元格都是一个单独的精灵。
选择要展开的图像
输入图像描述 (可选)


6.在窗口菜单栏的右上角，单击 Apply。此时将保存这种把图像拆分为不同精灵的新方式。
7.关闭窗口。如果你尝试关闭窗口而未单击 Apply，则会显示一个警告对话框，询问你是否要应用所做的更改。
现在，如果你查看 Project 窗口，然后单击小箭头以查看从该图像创建的精灵，则会看到有 9 个精灵！
选择要展开的图像
输入图像描述 (可选)

10.将精灵分配给瓦片

你可以像以前一样，手动创建所有瓦片，并逐个分配这些精灵。但是，Unity 还为此提供了快捷方式！
要将精灵分配给瓦片，请执行以下操作：
1. 将整个图像从 Project 窗口拖放到 Palette 窗口中。
2. 松开鼠标按键时将出现一个对话框，要求你选择要保存瓦片的文件夹。请选择 Tile 文件夹。

选择要展开的图像
输入图像描述 (可选)


现在已创建瓦片，并且这些瓦片已添加到你的面板中！你将能够选择这些瓦片并进行绘制，就像先前的瓦片一样。

11.调整其他瓦片集

在开始绘制你的世界之前：
对文件名以“Floor”开头的所有资源（全都是包含 3x3 精灵的瓦片集）重复上述三个步骤中的过程。
现在，你可以依照自己内心的想象来绘制一个有趣的世界！

12.绘制瓦片地图

Tile Palette 工具栏
你可以将两个有用的工具与 Tilemap Palette 搭配使用来进行绘制：Tile Palette 工具栏和其他快捷方式。
工具栏
该工具栏中有许多有用的工具。
选择要展开的图像
输入图像描述 (可选)

选择要展开的图像
输入图像描述 (可选)


键盘和鼠标快捷方式
还有一些有用的快捷方式将帮助你绘制瓦片地图：
Alt + 鼠标左键拖动 - 平移
鼠标滚轮键拖动 - 平移
旋转鼠标滚轮键 - 放大或缩小

13.绘制瓦片地图

 
你已经准备好绘制自己的世界了！
目前，你无需在 Scene 视图中的白色矩形外绘制太多内容。此矩形显示的是摄像机可以看到的区域，也就是你在 Game 视图中看到的区域。在稍后的一个教程中，你将学习如何移动摄像机。

选择要展开的图像
输入图像描述 (可选)

提示：请注意，框填工具可以帮助你快速绘制世界：

选择要展开的图像
输入图像描述 (可选)

当完成瓦片地图的绘制时：

1.保存对场景的更改。

2.单击 Play 以进入运行模式，并观察你的角色如何在你所绘制的世界中移动！
如果你看到自己的角色，那就成功了！如果没看到，也别气馁！
这是因为瓦片地图和角色具有相同的深度（各自位置的 z 坐标），此深度设置为 0。如果 Unity 在绘制瓦片地图之后再绘制你的角色，那么你会看到 Ruby，因为她将显示在瓦片地图之上。但如果先绘制 Ruby，然后绘制瓦片地图，则会将 Ruby 擦除。
为了避免瓦片地图擦除 Ruby，你可以更改 z 位置。但对于纯 2D 游戏，最好避免修改深度。
为了显示 Ruby，你需要告诉 Unity 要按照什么顺序进行绘制。Unity 需要先绘制瓦片地图，这样才能让 Ruby 出现在背景之上。

14.更改瓦片地图的图层顺序

要更改 Unity 绘制瓦片地图和角色的顺序，请执行以下操作：
1.在 Hierarchy 中，选择 Tilemap 游戏对象。

2.在 Inspector 中，找到 Tilemap Renderer 组件。
3. 找到 Order in Layer 字段。此字段定义同一图层中绘制游戏对象的顺序，其中编号更大的游戏对象排在后面。在此示例中，你的所有游戏对象均位于默认的排序图层 (Sorting Layer) 中。

4.将 Order in Layer 字段设置为 -10。这样将确保先绘制瓦片地图，然后绘制游戏对象。由于你的角色位于 Order in Layer 0（默认值），因此现在会在瓦片地图之后绘制角色，这样你的角色便会再次显示。
选择要展开的图像
输入图像描述 (可选)

 5.保存对场景的更改。

15.总结

在本教程中，你已学习如何：
使用瓦片在瓦片地图上进行绘制
从精灵创建瓦片
在单个图像文件中创建多个精灵
在下一教程中，你将向你的世界中添加更多游戏对象。你还将了解一个重要的 Unity 概念：预制件！

项目:

Ruby's Adventure：2D 初学者

世界设计 - 瓦片地图

一般教程讨论

1. 简介

2. 创建瓦片地图

3. 创建新瓦片

4. 将精灵分配给 FirstTile

5. 将 FirstTile 添加到你的面板

6. 使瓦片精灵适应网格

7. 什么是瓦片集？

8. 调整瓦片集

9. 调整瓦片集的精灵设置

10. 将精灵分配给瓦片

11. 调整其他瓦片集

12. 绘制瓦片地图

13. 绘制瓦片地图

14. 更改瓦片地图的图层顺序

15. 总结