找回密码
 立即注册
查看: 289|回复: 4

【Unity】使用 Tilemap 创建等距视角 (Isometric) 的 2D 环境 ...

[复制链接]
发表于 2023-2-22 21:43 | 显示全部楼层 |阅读模式
原文地址:https://blogs.unity3d.com/2019/03/18/isometric-2d-environments-with-tilemap/
紧随 Unity 2018.2 版本对 Hexagonal Tilemap 的支持,在 Unity 2018.3 中,我们引入了 Isometric Tilemap 支持。新的 Tilemap 功能提供了一种快速,高效的方法来创建等距和六边形网格布局的 2D 环境,就像许多经典游戏中用到的一样,例如《暗黑破坏神》和《辐射》的初代作品,《文明》,《帝国时代》等等。
这两个功能都基于 Unity 2017.2 引入的 Tilemap 系统,并且非常易于使用。它们也原生集成进了编辑器中。在以后的 Unity 版本,这些功能也许会移到包管理 (package manager) 中。
如果您有兴趣体验该功能,我们已经创建了一个预先配置好的 Isometric Starter Kit 项目,该项目有包含动画的角色以及多环境 tilesets,您可以免费下载。
Isometric Tilemap 项目设置

在开始使用 Tilemap 之前,需要正确设置项目。Isometric Tilemap 需要使用 2D 精灵,并且依赖正确的渲染顺序,才能创建自上而下的等距视角的错觉效果。我们需要确保先将距查看者视角较远的 Tiles 先画上;然后再依次往更近的画。
要自定义 2D 对象在屏幕上的绘制顺序,我们可以使用 Unity 的 “自定义轴排序”  (Custom Axis Sort) 功能。您可以按每个摄像机做单独设置(在目前版本,这是在可编程渲染管线,包括 LWRP 和 HDRP 中,进行此设置的默认方法),也可以在项目级别进行全局设置。
要在项目级别自定义轴排序,在 编辑 > 项目设置 > 图形 中。在 “相机设置” 部分中,您会看到一个 “透明度排序模式” 下拉列表以及 “透明度排序轴” 的 X,Y 和 Z 值设置。
默认情况下,对于 Unity 中的透明度排序轴 XYZ 分别设置为 (0, 0, 1)。但是,我们所有的 2D 切片实际上都在同一 Z 平面上。取而代之的是,我们可以通过使用屏幕上的高度而不是其深度来确定哪些图块在后面或前面。屏幕上位于较高位置的图块将排在较低位置的后面。要根据高度对图块进行排序,请将透明度排序模式更改为自定义;并将 “透明度排序轴” 值设置为 (0, 1, 0)。


如果您想了解更多有关2D排序的信息,可以阅读有关 2D 排序的 Unity 文档。
在某些情况下,您可能还需要调整透明度排序轴的 Z 值。我们将在本博客文章的后面部分对此进行更深入的介绍。
Tilemap 的类型

Tilemap 的功能由多个组件协同工作。最重要的两个是 Grid(网格)和 Tilemap Game Objects。要创建 Grid,只需右键单击 Hierarchy(对象结构树)中的任意位置,选择 2D Object,然后选择要使用的 Tilemap 的类型。默认情况下,每创建一个 Timemap Gmae Object 都会有一个对应的 Grid 被创建。目前版本可用的 Tilemap 类型如下:

  • Tilemap – 创建一个四边形的 Grid 和 Tilemap。在 Unity 的 2D 开发工具包 中可以看到使用此 Tilemap 的示例。
  • Hexagonal Point Top Tilemap(尖顶六边形 Tilemap) – 创建一个六边形网格和 Tilemap,其中每个六边形的一个顶点在正上方。
  • Hexagonal Flat Top Tilemap(平顶六边形 Tilemap) – 另一种六边形网格类型,其中六边形的一条边在正上方。
  • 最后两种类型,Isometric(等距) Isometric Z as Y(等距 Z 作为 Y 轴),是等距网格的两种不同实现。当模拟不同的 Tile 海拔高度时,例如当我们在等距视角中有一个升高的平台,它们两者的差异就会出现。
当您希望为不同海拔高度的 Tilemap 创建单独的 Tilemap Game Objects 时,最好使用常规的 Isometric(等距)Tilemap。这样能够简化实现体积碰撞。但是涉及到 Tile 之间高度变化的时候,灵活性会降低,因为一层 Tilemap 上的所有 Tile 都必须位于同一 “平面” 上。
对于 Isometric Z as Y Tilemap 的情况,每个 Tile 的 Z 位置值都与自定义 “透明轴排序” 设置结合使用,以使图块看起来像是堆叠在一起。在绘制 Isometric Z as Y Tilemap 时,我们会动态调整笔刷上的 Z 值在不同的高度之间切换。Isometric Z as Y Tilemap 需要在 “自定义透明度排序轴” 中加一个 Z 值才能正确渲染。



注意:此处显示的素材来自我们的 Isometric Starter Kit 项目中的 Temple 模板集。完全免费-完全免费-尽情享受创建自己的环境的乐趣!

Isometric Starter Kit 链接
可以将 Grid 网格视为存放 Tilemap Game Objects 的 “简易容器”,Tilemap 需要在 Grid 上面绘制 Tile。在 Tilemap 上绘画前,还需要一个画笔和一个调色板。Tile 调色板用来存放 Tile 素材,之后您可以使用笔刷工具将其选中并开始绘画。
要创建 Tile 调色板,请选择 “窗口” > “ 2D” > “拼贴面板”。在新打开的窗口中,在左上角的下拉菜单中选择 “创建新调色板”。确保设置与你使用的网格类型相同。在这个例子中,我将使用常规的 Isometric Tilemap;以及我们 Isometric Starter Kit 样例项目。将调色板单元格大小设置为 “手动”,才能够自定义 isometric Tile 的尺寸。在这种情况下,我知道我的图块的尺寸对应于 X 中为 1 且 Y 中为 0.5 的网格;但是,对于您的用例,它将取决于分辨率,在导入时选择的每单位像素值和素材的尺寸 – 简单来说,取决于 Tile 在 isometric 视角下的旋转角度,也就是等距角。


导入素材

你可能不确定适用于你的素材的正确导入设置和 tilemap 大小。根据您的初始素材,有一个通用规则可以遵循。首先,看看 tiles 的分辨率。通常,以 “块”  (block) 表示的 isometric tiles 的高度大于宽度(边长);“扁平” (flat) tiles(看起来像是平面而不是立方体)宽度大于高度。但是,它们的宽度都相同。因此,如果您希望图块恰好占据一个 Unity 单位,请在导入设置 每单位像素数 (PPU) 中的值等于其宽度(以像素为单位)。在某些情况下,您可能希望调整此值-通常是通过减小它(或增加素材的实际分辨率)来调整,如果您尝试产生一种某些 Tile 占据一个以上的网格单元并覆盖相邻的图块,这可能很有用。


为了确定 tiles 的 Y 网格值,请采用单个 tile 的底部(或顶盖)的高度,然后将其除以宽度。假设 X 为 1,这将为您提供一个相对于 X 的 Y 值。让我们看一些示例:


对于我们在此项目中使用的像素艺术,所有 Tile 的基本高度为 32 像素,宽度为 64 像素。因此,我们将使用的网格大小正好是 Y 的 0.5。
示例图片中的第二个 Tile 来自 Golden Skull Studios 的资产包–您可以在此处查看。示例图块已按比例缩小,但原始资源的宽度为128像素。瓦片的底部大约高66像素,这使我们的 Y 网格大小为 66/128 – 大约 0.515 个单位。
基本的 Tilemap 工作流程

确定正确的网格尺寸后,我们继续将 Tile 添加到我们的调色板中。只需抓住你的一个 Tile 精灵并将其拖动到 “Tile 调色板” 窗口中即可。这将创建一个 Tile 资源,它包含有关 Tile 本身的一些信息,例如它正在使用的精灵,色调颜色以及它将生成的碰撞器类型。如果要查看有关调色板上某个 Tile 的详细信息,请选择 “Tile 调色板” 窗口顶部的 “选择 (S)” 工具,然后单击该Tile,现在在检查器 (Inspector) 中,您应该能够看到它正在引用的 Tile 资源。
要将新的 Tile 绘制到 Tilemap 上,请选择 Brush (B) 工具,然后单击 Palette 中的 Tile。现在,你将能够在场景视图中使用选定的 Tile 进行绘制。其他一些绘画工具包括橡皮擦 (D),盒子填充 (U),洪水填充 (G) 和瓷砖拾取器 (I)。
有时,你可能还希望在调色板里编辑拼贴的布置。在工具栏下方,您将看到一个 “编辑” 按钮。如果单击它,将进入调色板编辑模式,在此模式下,工具将影响调色板本身。完成所需的更改后,不要忘记退出此模式。
Tilemap Renderer(渲染器)模式

在某些情况下,您可能会看到以下情况:尽管位于同一 Tilemap 上,但不同类型的 tile 仍无法正确排序,如下例所示:


这由 Tilemap Renderer 组件上的 “模式” 设置确定。默认情况下,模式设置为 “批量” (Chunk)。
Chunk模式可有效降低 Tilemap 的性能成本。不用单独渲染每个 Tile,而是一次大批量地渲染它们。但是,Chunk 模式有两个主要缺点。第一个是它不支持与场景中的其他 2D 对象进行动态排序。这意味着,如果你的 Tilemap 处于 Chunk 模式,它将无法在其他对象(例如角色)的前或者后动态排序–根据 “图层顺序” 设置,只能批量的在前或者在后。但是,当您要优化游戏性能时,它仍然非常有效,可用于批量渲染大面积的地面。
但是,这不能解决不同 Tile 彼此之间不排序的问题。为了批量渲染来自两个或多个不同 Sprite(即纹理)的 Tile,必须将 Sprite 统一在一个 Sprite Atlas 素材下。
要创建Sprite Atlas,请选择 “素材”(Assets) > “创建” > “Sprite Atlas”。在 Sprite Atlas 设置中,您将找到 Objects for Packing 列表。只需将希望批量渲染的所有图块拖动到此列表中,然后设置正确的导入设置,通常与各个子精灵 (Sprite) 上的设置相同。
完成此操作后,Tile 将正确排序;但是只有在 “播放” (Play) 模式或运行时,它们才会以这种方式排序可见。
因此,最好在编辑时将 Tilemap Renderer 模式设置为 "Individual"。它将分别对每个 Tile 进行排序;这意味着即使在 “播放” (Play) 模式之外也可以正确渲染它们,包括你在更改关卡时,此功能非常有用。一旦建立了关卡结构,就可以随时将 Tilemap Renderer Mode 设置回Chunk。


当您要添加对象(例如树木,道具和高架地面)时,希望使用角色或彼此进行动态排序,Individual 渲染模式也很有用。在此博客文章中,我们将坚持对所有 Tilemap 使用 Individual 模式。


使用多个 Tilemap

有时,您可能想在同一 Grid 上使用多个 Tilemap。对于等距视角和六边形 Tilemap,如果要将对象添加到也与网格对齐会很有用;或者如果您想添加看起来比第一层 Tilemap 更高的 Tilemap。
要将另一个 Tilemap 附加到 Grid 上,请右键单击 Grid Game Object,然后创建对应类型的新Tilemap。
为了切换到新的 Tilemap 上的绘画,请返回 Tile Palette 窗口,并更改主工具栏正下方的 Active Tilemap。
使用规则的等距图块图

对于普通的等距图块,只需在同一网格下创建一个新的图块即可。并为其指定更高的 “层顺序” 值。然后,您可以更改 “平铺锚点” 设置,以使新图层锚定到网格上的较高点。
我的 ground-level Tilemap 的 X 和 Y 分别为(0,0)的 Tile Anchor。我希望我的新 layer 可以再涂一个单元;因此我将新的 Tilemap 的 Anchor 更改为(1,1)。另外,将它的 Order in Lyaer 设置为 base level 高一个单位。
现在,我可以将 active Tilemap 更改为具有第二高的的 Tilemap 并进行绘制。


使用 Z as Y Isometric Tilemap

有时使用相同的 Tilemap 模拟不同的高度会很有用。在这种情况下,我们可以使用 Z as Y Isometric Tilemap 和 Grid。
使用 Z as Y Tilemap 时,每个 Tile 的 Z 值都会对 Tile 的渲染顺序产生影响。我们可以使用 “Tile 调色板” 底部的笔刷上的 “Z” 设置(也可以使用 “+” 和 “-” 热键进行更改)来调整在绘制 Tile 时所具有的 Z 值:


但是,为了使我们的 Z 值正确设置并且使 Tile 排序正确,我们需要返回到 “自定义轴排序” 值并添加 Z 的权重。我们在此处使用的数字直接与 Unity 将等轴测网格上的像元位置 (cell position) 转换为世界空间值 (world space) 的方式有关。
例如,XYZ 尺寸为(1, 0.5, 1)(等距的默认值)的网格的 Z 轴排序值为 -0.26。如果您对如何计算此数字感到好奇,或者你正在使用具有不同像元大小的网格,请继续阅读以了解如何为你的案例找到正确的 Z 值。
设置正确的“自定义轴排序”值后,就可以开始绘制具有不同Z值的图块。您还可以通过更改Grid 的 Z 尺寸(默认设置为1)来调整 Z 值上下移动高架 Tile 的增量。


计算 Z 值

可以使用一个通用公式来计算轴排序的 Z 值。首先,获取 Grid 的 Y 尺寸。如果尚未确定 Y 尺寸,请查看此博客文章顶部的有关导入素材的注释。将该值乘以 -0.5,然后再减去 0.01。
根据此公式,尺寸为 (1, 0.5, 1) 的网格将为我们提供 -0.26 的 Z 排序值。在此轴排序值下,任何 (1, 0.5, 1) 网格都将对其图块进行正确排序。
如果想了解更多有关该值和计算值的来源的信息,请查看此处的文档。它深入解释了 2D 渲染器的工作原理,以及将 isometric cells 转换为世界空间值 (world space) 时使用的方法。
添加碰撞

现在我们已经将一些 Tile 放置在比其他 Tile 高的位置,我们可以控制玩家可以进入这些区域并且发生碰撞。
增加碰撞的方法很多。但在我们的案例中,我们希望玩家使用坡道沿关卡上升和下降,因此,不确定哪些对象应该发生碰撞哪些不应该。因此我们可以使用附加的 Tilemap 手动定义碰撞。
在这个项目中,我们创建了一些精灵,它们对应于我们用来定义碰撞区域的不同形状。我们可以将这些形状绘制到我们不想让玩家越过的区域中的第三个 Tilemap 上。例如,我们希望玩家仅使用坡道就能爬上悬崖,而不是直接走到悬崖上。
我们还可以在 Tilemap Renderer 组件中添加自定义材质,以将 Tile 着色为不同于本关其余部分的其他颜色。
放置碰撞 Tile 后,可以将 Tilemap Collider 组件添加到碰撞 Tile 中。这将根据精灵的形状为每个单独的 Tile 自动生成碰撞器。
为了获得更好的性能,我们还可以添加一个 Composite Collider 2D 组件,并确保在 Tilemap Collider 上选中 "Used by Composite",这将使所有的 Tile 碰撞器合成一个大碰撞器。


添加道具

向关卡添加道具非常简单。您可以将道具精灵手动放置在场景中的任意位置,也可以通过将道具分成单独的 Tile 来将其附加到 Tilemap Grid。可以选择最适合的方式实现。
在此项目中,我们已在关卡周围手动放置了一些树木。树和角色在图层中具有相同的顺序,从而使我们的角色可以动态地在它们的后面和前面排序。
我们可以使用碰撞器来定义玩家可以越过树的点,有几种方法可以做到这一点。
第一个是子碰撞器附加到对象上,并根据需要更改其形状。
另一种方法是在 “精灵编辑器” 中为对象定义 “自定义物理形状 ”。
要打开 “精灵编辑器”,请选择对象的精灵,然后在检查器中找到 “精灵编辑器” 按钮。在左上角的下拉菜单中,切换到 “自定义物理形状” 编辑器。在这里,你可以创建多边形来自定义碰撞器的边界。
定义物理形状后,可以将 Polygon Collider 组件附加到对象上,并且该对象将与该形状相对应。
如果将道具用作 Tilemap 上的 Tile,则也可以使用 Grid Collider。选择与道具图块相对应的 Tile 素材(如果需要在何处重新学习,请查看 “基本 Tile 工作流程” 部分)。您将能够看到Collider Type 的下拉设置。默认情况下,它设置为 sprite,这意味着自动生成的碰撞器将使用我们之前提到的 Physics Shape。但是,如果将其设置为 grid,则它将始终与道具附加到的网格单元的形状完全匹配。它可能不是实现碰撞器的最准确方法,但对于特定类型的游戏可能很有用。
要将 Grid 碰撞器用于这些 Tile,请选择带有道具的 Tilemap 并添加 Tilemap Collider 组件。


使用规则 (Rule) Tiles

当涉及到自动完成 Tile 绘制工作流程时,Rule Tiles 非常有用。规则 Tile 充当普通图块,并带有附加的切片参数列表。使用这些参数(或规则),Tile 可以根据其相邻 Tile 自动选择应该绘制哪个精灵。
当要避免手动挑选旋转角度不同的图块时(例如,在创建悬崖或平台时),规则图块非常有用。它们还可以用于在同一 Tile 的不同变体之间随机化,以避免出现明显的图案,甚至创建动画 Tile。
可从 GitHub 上 Unity 的 2D Extras存储库 中获得 isometric 和六角规则 Tile。它们还包含您可能要探索的 Tilemap 功能的许多其他方便资源。
我们还在 Isometric Starter Kit 项目中为每个不同的图块集包含了预先配置的 Rule Tiles 。以下是项目中包含的 Tile 的一些示例,供您尝试:









本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

×
发表于 2023-2-22 21:52 | 显示全部楼层
这篇是机翻的吗?
“这意味着,如果你的 Tilemap 处于 Chunk 模式,它将无法在其他对象(例如字符)的前或者后动态排序“。
其他对象指“角色”,不是“字符“。
发表于 2023-2-22 22:00 | 显示全部楼层
感谢指正,一半是机翻
发表于 2023-2-22 22:09 | 显示全部楼层
等距游戏使用unity制作吗
发表于 2023-2-22 22:12 | 显示全部楼层
tilemap unity 学习了,学习了
懒得打字嘛,点击右侧快捷回复 【右侧内容,后台自定义】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Unity开发者联盟 ( 粤ICP备20003399号 )

GMT+8, 2024-6-18 01:17 , Processed in 0.096690 second(s), 26 queries .

Powered by Discuz! X3.5 Licensed

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表