您想找什么?
Engine & platform

使用瓷砖贴图的等距 2D 环境

ALICE HINTON-JONES / UNITY TECHNOLOGIESArtist
Mar 18, 2019|18 Min
使用瓷砖贴图的等距 2D 环境
为方便起见,此网页已进行机器翻译。我们无法保证翻译内容的准确性或可靠性。如果您对翻译内容的准确性有疑问,请参阅此网页的官方英文版本。

随着 Unity 2018.3 版本的发布,我们紧接着 2018.2 版本中添加的六角形瓷砖贴图支持,推出了等距瓷砖贴图支持。新的 Tilemap 功能提供了一种基于等距和六边形网格布局创建 2D 环境的快速而高效的方法,许多经典游戏都采用了这种方法,包括《暗黑破坏神》和《辐射》系列的第一部作品、《文明》、《帝国时代》等。这两项功能都建立在早在 Unity 2017.2 中就引入的现有 "瓷砖贴图 "系统之上,现在使用它们也同样简单!它们还与编辑器原生集成。在后续的 Unity 版本中,它们可能会被移到软件包管理器中。如果您有兴趣跟进并尝试所展示的技术,我们已经创建了一个预配置等距入门套件项目,其中包含一个动画角色和多个环境瓦片集,您可以免费下载

探索更多的2D 环境和工具 ,创造无限可能

等距瓷砖贴图的项目设置

在开始使用 Tilemap 之前,正确设置项目非常重要。Isometric Tilemap 使用二维精灵,依靠正确的渲染器排序来创建自上而下的等距视图。我们需要确保先绘制离观众较远的瓷砖,然后再绘制离观众较近的瓷砖。

要自定义 2D 物体在屏幕上的绘制顺序,我们可以使用 Unity 的 "自定义轴排序 "功能。您可以按摄像机定义此设置(目前,这是可编写脚本的渲染管线(包括 LWRP 和 HDRP)中的默认方式),也可以在项目级别全局定义此设置。

要在项目级别定义自定义轴排序,请转至编辑 > 项目设置 > 图形。在 "相机设置 "部分,您将看到 "透明度排序模式 "下拉菜单,以及 "透明度排序轴 "的 X、Y 和 Z 值设置。

默认情况下,Unity 中 XYZ 的 "透明度排序轴 "分别设置为(0、0、1)。然而,我们所有的 2D 瓦片实际上都在同一个 Z 平面上。相反,我们可以通过瓷砖在屏幕上的高度而不是深度来确定哪个瓷砖在后面或前面。在屏幕上位置较高的瓷砖将排序在位置较低的瓷砖之后。要根据高度对瓷砖进行排序,请将 "透明度排序模式 "更改为 "自定义";并将 "透明度排序轴 "值设置为 (0、1、0)。

项目设置 "菜单中的 "透明度排序 "选项。

如果您想进一步了解 2D 排序的工作原理,可以阅读相关的 Unity 文档页面

在某些情况下,您可能还需要调整透明度排序轴的 Z 值。我们将在本博文稍后部分对此进行更深入的介绍。

瓦片贴图类型

瓦片贴图功能由多个共同工作的组件组成。前两个是 "网格 "和 "瓷砖贴图 "游戏对象。要创建网格,只需右键单击层次结构中的任意位置,转到 2D Object(二维对象),然后选择要使用的分块贴图类型。默认情况下,每个新网格都会创建一个相应类型的子 "瓷砖贴图游戏对象"。当前可用的磁贴地图类型如下:

Tilemap- 创建矩形网格和 Tilemap。在 Unity 的2D 游戏工具包中可以看到使用这种瓦片贴图的示例。

六边形点顶平铺贴图- 创建六边形网格和平铺贴图,其中每个六边形的一个顶点朝上。

六边形平顶瓦片贴图- 另一种六边形网格类型,六边形的顶部是与屏幕顶部平行的边缘。

最后两种类型,即等距 等距 Z 作为 Y,创建了两种不同的等距网格。在模拟不同的地砖标高时,例如在等距关卡中有一个高台时,它们之间就会产生差异。

当您希望为每块瓷砖的各个高程层创建单独的瓷砖贴图游戏对象时,最好使用常规 等距瓷砖贴图。这将简化创建自动碰撞形状的过程,但由于一个图层上的所有瓷砖都必须位于同一 "平面 "上,因此在瓷砖之间的高度变化方面灵活性较低。

在 "等距 Z 即 Y "瓦片贴图中,每个瓦片的 Z 位置值与自定义的 "透明度轴排序 "设置相结合,使瓦片看起来像堆叠在一起。在 "Z "为 "Y "的瓦片贴图上绘画时,我们会动态调整画笔上的 "Z "设置,以便在不同高度之间切换。Z 为 Y 的瓦片贴图需要在自定义透明度排序轴中添加 Z 值才能正确呈现。

瓷砖铺设过程示例的 GIF 动画。

请注意:此处显示的资产来自我们的等距入门套件项目中的寺庙瓦片集。请随意下载(完全免费)并尽情享受创建自己的环境的乐趣!

将网格看作是放置瓷砖贴图游戏对象的 "画架"--这些对象本质上就是您要在其上绘制瓷砖的画布。要开始在瓷砖贴图上绘画,还需要画笔和调色板。瓷砖调色板上有瓷砖资产,之后你就可以用画笔工具选取它们并开始绘制。

要创建磁贴调色板,请选择窗口 > 2D > 磁贴调色板。在新打开的窗口中,在左上角的下拉菜单中选择 "创建新调色板"。请确保设置的网格类型符合您的使用情况。在本示例中,我将使用普通的等距瓷砖贴图,以及等距入门套件项目中的资产。将调色板单元大小设置为 Manual,以便自定义等距瓷砖的尺寸。在这种情况下,我知道瓷砖的尺寸对应于 X 轴 1 和 Y 轴 0.5 的网格;但是,对于您的使用情况,这将取决于分辨率、导入时选择的单位像素值和资产的尺寸,即瓷砖旋转的等距角度。

将调色板更改为等距。
关于输入资产的说明

您可能不确定正确的导入设置和瓷砖贴图尺寸是否适合您的资产。在此,您可以根据您的初始资产规模遵循一个一般规则。首先,看看瓷砖的分辨率。通常情况下,等距砖(以块状表示)的高度大于宽度;"平面 "砖(以平面而非立方体表示)的宽度大于高度。不过,它们之间的宽度始终相同。因此,如果您希望磁贴正好占一个 Unity 单元,请将磁贴导入设置中的 "单位像素 "值设置为与其宽度(像素)相等。在某些情况下,您可能需要调整该值,通常是通过降低该值(或提高资产的实际分辨率)来实现;如果您试图制作一种效果,使某些磁贴看起来占据了一个以上的网格单元,并覆盖了相邻的磁贴,这可能会很有用。

六边形瓷砖布局的 GIF 动画。

为了确定瓷砖正确的 Y 网格值,可以用一块瓷砖的底座(或盖子)高度除以宽度。只要 X 为 1,就能得到相对于 X 的 Y 值。让我们来看几个例子:

测量你的像素艺术,以便准确放置。

对于本项目中使用的像素艺术,所有瓷砖的基本高度为 32 像素,宽度为 64 像素。因此,我们将使用的网格大小正好是 Y 轴的 0.5。为便于参考,我们缩小了示例磁贴的尺寸,但原始资产的宽度为 128 像素。瓷砖底座高约 66 像素,因此 Y 网格尺寸为 66/128 - 约 0.515 个单位。

瓦片贴图基本工作流程

确定了正确的网格尺寸后,我们就可以在调色板中添加一些瓷砖了。只需抓取一个磁贴精灵,然后将其拖入 "磁贴调色板 "窗口即可。这将创建一个磁贴资产。它包含瓦片本身的一些信息,如使用的精灵、色调颜色以及将生成的碰撞器类型。如果您想查看调色板上某个瓷片的详细信息,请选择瓷片调色板窗口顶部的选择 (S) 工具,然后单击该瓷片。现在,在 "检查器 "中,你应该可以看到它引用的是哪个 "磁贴 "资产。

要在瓷砖贴图上绘制新瓷砖,请选择画笔 (B) 工具,然后单击调色板中的瓷砖。现在您就可以在场景视图中使用所选的瓷砖进行绘制了。其他一些绘画工具包括橡皮擦 (D)、方框填充 (U)、填充 (G) 和瓷砖拾取器 (I)。

有时,您可能还希望编辑调色板中瓷砖的排列方式。在工具栏下方,您会看到一个 "编辑 "按钮。如果点击它,就会进入调色板编辑模式,在该模式下,工具将影响瓷砖调色板本身。完成所需的更改后,不要忘记退出该模式。

瓦片贴图渲染器模式

在某些情况下,你可能会看到不同类型的磁贴无法正确排序,尽管它们位于同一个磁贴贴图上,就像下面的例子一样:

完成等距瓷砖布局。

这取决于 "瓷砖贴图渲染器 "组件上的 "模式 "设置。默认情况下,模式设置为 Chunk。

分块 模式能有效降低 Tilemap 的性能成本。它不是单独渲染每块瓷砖,而是将它们作为一个大块一次性批量渲染。不过,使用它有两个主要缺点。首先,它不支持与场景中的其他二维对象进行动态排序。这意味着,如果您的分块贴图处于 "分块 "模式,它将无法在其他对象(如字符)的前后进行动态排序,每次只能根据 "图层中的顺序 "设置进行排序。不过,当你想优化游戏时,它仍然非常有效,可以用来批量渲染大面积的地面。

但是,这并不能解决不同瓷砖之间不能排序的问题。为了批量渲染来自两个或多个不同精灵(即纹理)的瓷砖,必须将这些精灵统一到一个 Sprite Atlas 资产中。

要创建 Sprite Atlas,请选择 "资产">"创建">"Sprite Atlas"。在 Sprite Atlas 设置中,您可以找到打包对象列表。只需将您希望批量渲染的所有瓷砖拖入此列表,并设置正确的导入设置(通常与单个精灵上的设置相同)即可。

完成后,磁贴将正确排序,但只有在 "播放 "模式或运行时才会以这种方式显示。

因此,在编辑时最好将 "瓷砖贴图渲染器模式 "设置为"单独" 。它将对每块瓷砖进行单独排序;这意味着即使不在 "播放 "模式下,您也能看到瓷砖的正确渲染--这在您对关卡进行修改时非常有用。关卡结构就位后,您可以随时将 "平铺贴图渲染器模式 "设置为 "分块"。

设置瓦片贴图的单独渲染模式

单独渲染模式在添加对象时也非常有用,例如树木、道具和高架地面,您希望将这些对象与角色或角色之间进行动态排序。在这篇博文中,我们将坚持使用 "单独模式 "来绘制所有的瓦片贴图。

个人渲染模式示意图
使用多个瓦片贴图

有时,您可能希望在同一个网格上使用多个分块贴图。对于等距和六边形贴图,如果您想在关卡中添加与网格对齐的道具对象,或者想添加看起来比第一层高的贴图,那么它将非常有用。

要在网格上附加其他瓷砖贴图,请右键单击网格游戏对象,然后创建相应类型的新瓷砖贴图。

要切换到在新的瓷砖贴图上绘制,请返回瓷砖调色板窗口,然后更改主工具栏下方的活动瓷砖贴图。

添加高架区域

一般来说,有两种方法可以在水平面上增加高地。您最有可能使用哪一种取决于您选择的瓷砖贴图类型。我们将逐一介绍可能出现的情况。

此外,我们还准备了一个相关的视频短片,演示了其中一种使用常规等轴测瓦片贴图的方法,以及为瓦片添加碰撞区域的方法。如果您想获得这两方面的快速视频参考,请点击查看:

使用常规等距瓷砖贴图

对于普通等轴测瓦片贴图,只需在同一网格下创建一个新的瓦片贴图,并赋予其更高的 "层序 "值。然后,您可以更改 "平铺锚点 "设置,使新图层锚定到网格上的较高点。

我的地面平铺贴图的 X 和 Y 的贴图锚点分别为 (0, 0)。我希望我的新图层能高出一个单位,因此我要将新的平铺贴图的锚点改为 (1,1)。此外,我还会将它的阶梯层数定为 1,只比我的基础层高一个单位。

现在,我可以将我的活动贴图更改为具有第二个高度层的贴图,然后开始绘制。

带有高度的瓦片贴图 GIF 动画。
使用 Z 作为 Y 等距瓦片贴图

有时,使用相同的瓦片贴图模拟不同的高度会很有用。在这种情况下,您可以使用 Z 作为 Y 等距瓷砖贴图和网格。

使用 Z 即 Y 瓦片贴图时,每个瓦片的 Z 值都会对瓦片渲染顺序产生额外影响。在绘制瓷砖时,我们可以使用瓷砖调色板底部画笔上的 Z 位置设置来调整瓷砖的 Z 值(也可以使用 "+"和"-"热键进行更改):

设置画笔的 Z 位置。

但是,为了使 Z 值能够正确贡献,并使瓷砖能够正确排序,我们需要返回到自定义轴排序值并添加 Z 影响。我们在这里使用的数字与 Unity 将等距网格上的单元格位置转换为世界空间值的方式直接相关。

例如,一个 XYZ 尺寸为(1, 0.5, 1)的网格(默认为等距网格),其 Z 轴排序值为-0.26。如果您想知道这个数字是如何计算出来的,或者您使用的网格的单元格大小不同,请继续阅读,了解如何找到适合您情况的 Z 值。

设置正确的自定义轴排序值后,就可以开始绘制具有不同 Z 值的瓷砖了。您还可以通过更改网格的 Z 维度(默认设置为 1)来调整 Z 值向上或向下移动高架瓷砖的增量。

高度值变化的 GIF 动画。
计算 Z 值

有一个通用公式可以用来计算轴排序的 Z 值。首先,取网格的 Y 维。如果您还没有确定 Y 维度,请参阅本博文顶部的导入资产说明。将该值乘以负 0.5,再减去 0.01。

根据这个公式,一个尺寸为(1, 0.5, 1)的网格的 Z 排序值为-0.26(负二十六点)。在此轴排序值下,任何(1, 0.5, 1)网格的瓷砖都能正确排序。

如果您想进一步了解该值和计算方法的来源,请查看此处的文档。它深入浅出地解释了二维渲染器的工作原理,以及将等距单元转换为世界空间值时使用的方法。

添加碰撞

既然有些地砖的位置比其他地砖高,我们就可以利用碰撞来控制玩家可以前往的区域,并在这些区域之间进行转换。

添加碰撞的方法有很多;但在我们的案例中,我们希望玩家通过斜坡沿着关卡上升和下降,因此,哪些物体应该或不应该添加碰撞器并不明显。相反,我们可以使用额外的 Tilemap 手动定义碰撞。

在这个项目中,我们创建了一些与不同形状相对应的精灵,用来定义碰撞区域。我们可以将这些形状绘制到我们的第三个瓷砖贴图上,绘制在我们不想让玩家经过的区域。例如,我们希望玩家只能通过斜坡登上悬崖,而不是直接走到悬崖上。

我们还可以在 "瓦片贴图渲染器 "组件中添加自定义材质,以便将瓦片染成与关卡其他部分不同的颜色。

放置好碰撞瓦片后,我们就可以在碰撞瓦片图中添加一个瓦片图碰撞器组件。这将根据精灵的形状为每个单独的瓦片自动生成碰撞器。

为了获得更好的性能,我们还可以添加一个复合对撞机 2D 组件,并确保在 "瓷砖贴图对撞机 "上勾选 "复合使用"。这将我们所有的单个对撞机统一成一个大形状。

综合使用的 GIF 动画。
添加道具

为关卡添加道具非常简单。您可以手动将道具精灵放置在场景中的任意位置,也可以将道具制作成单独的图块,将其附加到贴图网格上。您可以决定哪种方法最适合您的情况。

在这个项目中,我们在关卡周围手动放置了一些树木。树木和人物在图层中具有相同的顺序,这样我们的人物就可以在树木前后动态排序。

我们可以使用碰撞器来定义玩家可以通过树的点。我们有几种方法可以做到这一点。

正如视频中演示的那样,第一种方法是在对象上附加一个子碰撞器,并根据需要改变其形状。

另一种方法是在 "精灵编辑器 "中为对象定义自定义物理形状

要打开 "精灵编辑器",请选择对象的精灵,然后在 "检查器 "中找到 "精灵编辑器 "按钮。在左上角的下拉菜单中,切换到自定义物理形状编辑器。在这里,您可以创建一个多边形来定义自定义碰撞器的边界。

一旦定义了物理形状,就可以将多边形碰撞器组件附加到对象上,它将与该形状相对应。

如果您将道具作为瓷砖贴在瓷砖贴图上,也可以使用网格碰撞器。选择与道具磁贴相对应的磁贴资产(如果需要了解如何找到该资产,请参阅 "基本磁贴贴图工作流程 "部分)。您将看到 Collider 类型的下拉设置。默认情况下,它被设置为 sprite--这意味着自动生成的碰撞器将使用我们之前谈到的物理形状。但是,如果将其设置为网格,它将始终与道具所连接的网格单元的形状完全一致。这可能不是实现碰撞器的最准确方法,但对特定类型的游戏可能有用。

要在这些瓷砖上使用网格碰撞器,请选择带有道具的瓷砖贴图并添加一个瓷砖贴图碰撞器组件。

瓦片贴图碰撞器的 GIF 动画。
使用规则瓷砖

规则瓷砖在实现瓷砖绘制工作流程自动化方面非常有用。规则平铺与普通平铺一样,只是多了一个平铺参数列表。利用这些参数或规则,磁贴可以根据邻近的磁贴自动选择要绘制的精灵。

在创建悬崖或平台时,如果想要避免手工选择不同旋转的瓷砖,规则瓷砖就非常有用。它们还可用于在同一块瓷砖的不同变体之间进行随机调整,以避免出现明显的图案,甚至还能制作出动画瓷砖。

等距和六边形规则图块可从 GitHub 上的 Unity2D Extras 代码库中获取。它们还包含许多其他方便的瓦片贴图功能资产,您可能想一探究竟。

我们还在 "等距入门套件"项目中为每个不同的图块集提供了预配置的规则图块。下面是一些项目中包含的瓷砖示例,供您尝试使用:

播放模式下的瓷砖贴图示例
播放模式下的瓷砖贴图示例
播放模式下的瓷砖贴图示例
播放模式下的瓷砖贴图示例
播放模式下的瓷砖贴图示例
更进一步

现在您已经了解了 Unity 中等距贴图的来龙去脉,请在此处下载等距贴图入门套件项目并亲自尝试!如果你是程序员,还可以通过脚本与瓦片贴图进行交互,所以你也可以试试。

例如,您可以观看本视频,了解如何使用等距瓷砖贴图实现一个简单的角色控制器:

这个项目中的作品是由@castpixel为 Unity 创作的,你可以在这里看到她的更多作品。如果您正在寻找其他 2D 资产来尝试使用 Tilemaps,也可以查看 Unity 资产商店

---

通过 Unity Learn Premium 平台上的初级和高级内容,学习使用 Tilemap 的最佳实践。