使用 TileSet

前言

图块地图(Tilemap)是由图块(Tile)组成的栅格,用于创建游戏的布局。使用 TileMap 节点设计关卡有很多好处。首先,你可以通过在栅格中“画”图块来绘制布局,比一个个放置 Sprite2D 节点要快很多。其次,图块地图支持的关卡更大,因为针对绘制大量图块做了优化。最后,你还可以添加碰撞、遮挡、导航形状等更强大的功能。

要使用图块地图,你需要首先创建一个 TileSet。TileSet 是图块集,也就是能够放置到 TileMap 节点上的图块的合集。创建 TileSet 之后,你就可以使用 TileMap 编辑器放置图块。

要跟随这个指南进行操作,你需要一张包含若干图块的图片,每个图块的大小都应该相同(较大的对象可以拆成若干个图块)。这种图片叫做图块表(Tilesheet)。图块不一定必须是正方形的:可以是矩形图块、六边形图块、等轴图块(伪 3D 透视)。

新建 TileSet

使用图块表

这个演示使用的是从 Kenney 的“抽象平台跳跃”包中选取的图块。我们会使用该集合中的这个图块表

图块表示例,64×64 图块

64×64 图块的图块表。作者:Kenney

新建 TileMap 节点,选中,然后在检查器中新建 TileSet 资源:

在 TileMap 节点中新建 TileSet 资源

在 TileMap 节点中新建 TileSet 资源

创建 TileSet 资源后,在检查器中点击该值可以将其展开。默认图块形状是 Square(正方形),但是你也可以根据图块图像中的形状去选择 Isometric(等轴)、Half-Offset Square(半偏移正方形)、Hexagon(六边形)。如果使用了 Square 以外的图块形状,你可能还需要调整 Tile Layout(图块布局)和 Tile Offset Axis(图块偏移轴)等属性。最后,如果你想要让图块被图块坐标裁剪,还可以启用 Rendering > UV Clipping(渲染 > UV 裁剪)属性。这样就能够保证图块无法绘制到它们在图块表上分配的区域之外。

在检查器中将图块大小设置为 64×64,与示例图块表相匹配:

将图块大小设置为 64×64,与示例图块表相匹配

将图块大小设置为 64×64,与示例图块表相匹配

如果依赖于自动图块创建(就像我们即将要做的那样),你必须在创建 图集 之前 设置图块大小。图集将确定哪些图块可以添加到 TileMap 节点(因为并不是图像的每一个部分都是有效的图块)。

Open the TileSet panel at the bottom of the editor, then click and drag the tilesheet image onto the panel. You will be asked whether to create tiles automatically. Answer Yes:

根据图块表图像内容自动创建图块

根据图块表图像内容自动创建图块

这将根据你之前在 TileSet 资源中指定的图块尺寸自动创建图块。这将大大加快初始图块设置的速度。

备注

使用基于图像内容的自动图块生成功能时,图块表中 完全 透明的部分将不会生成图块。

如果不希望图集中出现图块表中的图块,请选择图块组预览顶部的橡皮擦工具,然后单击希望删除的图块:

使用橡皮擦工具删除 TileSet 地图集中不需要的图块

使用橡皮擦工具删除 TileSet 地图集中不需要的图块

你也可以右键单击图块,选择 删除 ,作为橡皮擦工具的替代。

小技巧

与 2D 和 TileMap 编辑器一样,你可以使用鼠标中键或右键平移整个 TileSet 面板,并使用鼠标滚轮或左上角的按钮进行缩放。

如果你想在一个 TileSet 中使用好几张 tilesheet 来选择图块,新建几个图块集,并为每个图块集配置纹理再继续。你也可以用这种方法把单张图片作为一个图块来使用。(但是用 tilesheet 会方便得多)。

你可以调整中间的列中图集的属性:

在专用检查器中调整 TileSet 图集属性(TileSet 面板的一部分)

在专用检查器中调整 TileSet 图集属性(TileSet 面板的一部分)

可以在图集上调整以下属性:

  • ID: 标识符(在该 TileSet中每个图块集的标识符是唯一的),用于排序。

  • 名称: 图集的人类可读名称。在此处使用描述性的名称来方便管理(例如“地形”,“装饰”等)。

  • 边距: 图像边缘上的边距不应选择为图块(以像素为单位)。当你下载的图块表图像的边缘有边距(例如,用于表明归属),则增加这个值可能会很有用。

  • 间距: 以像素为单位的地图集上的每个图块之间的间距。如果你使用的图块表图像包含辅助线(例如每个图块之间的轮廓),则增加间距可能会很有用。

  • 纹理区域大小: 以像素为单位的图集上的每个图块的大小。在大多数情况下,这应该与 TileMap 属性中定义的图块大小相匹配(尽管并不是必需的)。

  • 使用纹理内边距: 如果选用,则在每个图块周围添加一个1像素的透明的边缘,以防止启用过滤时纹理渗出(bleeding)。建议默认将其启用,除非你由于纹理内边距而遇到渲染问题。

请注意,更改纹理边距,间距和区域大小都有可能会导致图块丢失(其中一些将位于图集图片的坐标之外)。如要自动从图块表中再生图块,请使用图块集编辑器顶部的三个垂直点菜单按钮,然后选择 在不透明纹理区域创建图块

在修改图集属性后自动重新创建图块

在修改图集属性后自动重新创建图块

使用场景合集

自 Godot 4.0 以来,你可以将实际的 场景 放置为图块。这允许你将任何节点集合用作图块。比如说,你可以使用场景图块来放置游戏元素,例如玩家可以与之互动的商店。还可以使用场景图块来放置 AudioStreamPlayer2D (用于环境声音)、粒子效果等。

警告

与图集相比,场景图块具有更大的性能开销,因为每个场景都是为每个放置的图块单独实例化的。

建议仅在必要时使用场景图块。要在没有任何高级操作的图块中绘制精灵,请使用图集代替

对于本例,我们将创建一个包含 CPUParticles2D 根节点的场景。将此场景保存到场景文件(与包含 TileMap 的场景分离),然后切换到包含 TileMap 节点的场景。打开 TileSet 编辑器,在左列中创建一个新的 场景集合

在 TileSet 编辑器中创建场景合集

在 TileSet 编辑器中创建场景合集

创建场景合集之后,你就可以根据自己的需要在中间栏内为场景合集输入描述名称。选中这个场景合集,然后创建一个新的场景槽:

在 TileSet 编辑器中选中场景合集,然后创建场景图块

在 TileSet 编辑器中选中场景合集,然后创建场景图块

在右栏中选中这个场景槽,然后使用快速加载(或加载)来加载包含粒子的场景文件:

在 TileSet 编辑器中创建场景槽,然后为其加载场景文件

在 TileSet 编辑器中创建场景槽,然后为其加载场景文件

现在你的 TileSet 中就有了一个场景图块。切换到 TileMap 编辑器之后,你就可以在场景合集中选择则个场景图块,然后和其他图块一样进行绘制。

将若干图集合并为单个图集

在单个 TileSet 资源中使用多个图集有时可能很有用,但在某些情况下可能会变得繁琐(特别是如果你每个图块使用一个图像)。Godot 允许你将多个图集合并成一个单独的图集,以便更轻松地组织。

如果要这样做,你必须在TileSet资源处创建了不止一个atlas。在atlas列表下找到“三个垂直排列的点”的菜单按钮,然后选择**打开图集合并工具**:

在创建多个图集后,打开图集合并工具

在创建多个图集后,打开图集合并工具

这将打开一个对话框,在该对话框中,你可以通过按住 Shift 或 Ctrl 键并同时点击多个元素来选择多个图集:

使用图集合并工具对话框

使用图集合并工具对话框

选择 合并 将以选择的图集合并成一个图集图片(在 TileSet 的单个图集)。没有合并的图集将会在 TileSet 被移除,但是 原来的 tilesheet 图片会被保留在文件系统里 。如果你想在TileSet 资源保留没有合并的图集,选择 合并(保留原来的图集)

小技巧

TileSet 具有一个 图块代理 系统。图块代理是一张映射表,它允许通知使用了给定 TileSet 的 TileMap,以便将一组给定的图块标识符替换为另一组图块标识符。

合并不同图集时会自动设置图块代理,但也可以通过 管理图块代理 对话框手动设置,你可以使用上面提到的“三个竖点”菜单访问该对话框。

当你更改了图集 ID 或想用另一个图集的图块替换一个图集的所有图块时,手动创建图块代理可能会很有用。请注意,编辑 TileMap 时,你可以用相应的映射值替换所有网格。

向 TileSet 添加碰撞、导航和遮挡

现在我们已经成功创建了一个基本的 TileSet。我们现在可以开始使用 TileMap 节点,但它目前缺乏任何形式的碰撞检测。这意味着玩家和其他物体可以直接穿过地板或墙壁。

如果使用 2D 导航,还需要为图块定义导航多边形,以生成导航网格,供代理用于寻路。

最后,如果你使用 2D 灯光和阴影 或 GPUParticles2D,你可能还希望 TileSet 能够投射阴影并与粒子碰撞。这就需要为 TileSet 上的 “实体” 图块定义遮挡多边形。

要为每个图块定义碰撞、导航和遮罩形状,首先需要为 TileSet 资源创建物理层、导航层或遮挡层。为此,请选择 TileMap 节点,单击检查器中的 TileSet 属性值进行编辑,然后展开 物理层 并选择 添加元素

在 TileSet 资源检查器(TileMap 节点内)中创建物理层

在 TileSet 资源检查器(TileMap 节点内)中创建物理层

如果你还需要导航辅助,可以创建导航层:

在 TileSet 资源检查器(TileMap 节点内)中创建导航层

在 TileSet 资源检查器(TileMap 节点内)中创建导航层

如果你需要支持光照多边形遮挡器,可以创建遮挡层:

在 TileSet 资源检查器(TileMap 节点内)中创建遮挡层

在 TileSet 资源检查器(TileMap 节点内)中创建遮挡层

备注

本教程的后续步骤专门用于创建碰撞多边形,但导航和遮挡的步骤非常相似。它们各自的多边形编辑器行为方式相同,因此为简洁起见不再重复这些步骤。

唯一需要注意的是,图块的遮挡多边形属性是图集检查器中 渲染 分节的一部分。请确保展开该部分,以便编辑多边形。

创建物理层后,你可以访问 TileSet 图集检查器中的 物理层 部分:

在选择模式下打开碰撞编辑器

在选择模式下打开碰撞编辑器

你可以在聚焦 TileSet 编辑器时按 F 快速创建矩形碰撞形状。如果键盘快捷键不起作用,请尝试单击多边形编辑器周围的空白区域使其聚焦:

按 :kbd:`F` 键使用默认矩形碰撞形状

F 键使用默认矩形碰撞形状

在这个图块碰撞编辑器中,你可以使用所有二维多边形编辑工具:

  • 使用多边形上方的工具栏可在创建新多边形、编辑现有多边形和删除多边形上的点之间切换。“三个竖点”菜单按钮提供了其他选项,例如旋转和翻转多边形。

  • 通过单击并拖动两点之间的直线来创建新点。

  • 右键单击一个点(或使用上述移除工具并左键单击)将其移除。

  • 通过中键或右键在编辑器中平移。(右键平移只能用于附近没有点的区域)

你可以使用默认的矩形形状,通过移除其中一个点来快速创建三角形碰撞形状:

通过右键单击其中一个角将其移除来创建三角形碰撞形状

通过右键单击其中一个角将其移除来创建三角形碰撞形状

你还可以通过添加更多点,将矩形用作更复杂形状的基础:

为复杂图块形状绘制自定义碰撞

为复杂图块形状绘制自定义碰撞

小技巧

如果你有一个大的图块集,为每个图块单独指定碰撞可能会花费很多时间。尤其是在 TileMaps 中往往有许多具有常见碰撞模式(如实心块或 45 度斜坡)的图块。要快速将类似的碰撞形状应用到多个图块,请使用一次为多个图块指定属性的功能。

为 TileSet 的图块分配自定义元数据

你可以使用自定义数据层来为各个图块分配自定义数据。可以用来存储游戏过程中所需的特定信息,例如玩家接触该图块时应该受到的伤害,以及是否能够使用物理将图块摧毁。

数据是在 TileSet 中与图块进行关联的:放置的所有图块使用的都是相同的自定义数据。如果你需要创建拥有不同自定义数据的变体图块,可以通过创建备选图块并为该备选图块更改自定义数据来实现。

在(TileMap 节点的)TileSet 资源检查器中创建自定义数据层

在(TileMap 节点的)TileSet 资源检查器中创建自定义数据层

针对游戏中的特定属性配置自定义数据层的示例

针对游戏中的特定属性配置自定义数据层的示例

改变自定义数据的顺序不会损坏现有的元数据:TileSet 编辑器会在自定义数据属性的顺序发生改变后自动进行更新。

请注意,属性的名称不会出现在编辑器中(只会显示索引号,与定义顺序一致)。例如,假设存在上面例子中的自定义数据层,那么将图块的 damage_per_second 元数据设置为 25、将 destructible 元数据设置为 false 就是这样的:

TileSet 编辑器的“选择”模式下编辑自定义数据

TileSet 编辑器的“选择”模式下编辑自定义数据

自定义数据也可以进行图块属性的绘制

在 TileSet 编辑器中使用图块属性绘制来分配自定义数据

在 TileSet 编辑器中使用图块属性绘制来分配自定义数据

创建地形集(自动图块)

备注

这个功能和 Godot 3.x 中的自动图块使用了不同的实现方式。地形系统能够完全替代自动图块,功能也更强大。与自动图块不同,地形系统支持不同地形之间的过渡,这样就可以为同一个图定义多个地形。

与以前不同的是,自动图块是一种特定类型的图块,而地形只是分配给图集图块的一组属性。使用专门的 TileMap 绘制模式时就会用到这些属性,该模式能够对带有地形数据的图块进行智能选择。这意味着地形图块既可以作为地形绘制,也可以像其他图块一样作为单个图块绘制。

“完善”的图块集中通常会包含很多变体图块,适用于平台、地板等位置的角落和边缘。这种图块虽然可以手动放置,但是很快就会感觉非常麻烦。在程序式生成的关卡中如果要处理这种情况也很困难,需要编写大量的代码。

Godot 提供的地形系统就能够自动进行图块的连接。这样就可以自动使用“正确”的图块变体。

地形按照地形集分组。地形集有固定的模式,包括 Match Corners and SidesMatch CornersMatch sides(匹配角落和边缘、匹配角落、匹配边缘)。模式决定了地形集中的地形如何相互匹配。

备注

上述模式在 Godot 3.x 中对应的自动图块位掩码模式为 2×2、3×3、3×3 Minimal。也和 Tiled 编辑器中使用的模式类似。

选中 TileMap 节点,在检查器的 TileSet 资源中创建一个新的地形集:

在(TileMap 节点的)TileSet 资源检查器中创建地形集

在(TileMap 节点的)TileSet 资源检查器中创建地形集

创建地形集后,你必须在地形集再创建若干地形:

在地形集中创建地形

在地形集中创建地形

在 TileSet 编辑器中,切换到“选择”模式并单击图块。在中间一栏展开地形部分,为图块分配地形集 ID 和地形 ID。-1 表示“没有地形集”和“没有地形”,因此你必须先将地形集设置为大于等于 0 的值,然后才能将地形设置为大于 0 的值。

备注

地形集 ID 和地形 ID 互相独立。从 0 开始,不从 1 开始。

在 TileSet 编辑器的“选择”模式中配置单个图块的地形

在 TileSet 编辑器的“选择”模式中配置单个图块的地形

完成此操作后,你现在可以配置 地形对等位 部分,该部分在中间一列中可见。对等位决定了根据相邻图块的情况放置哪个图块。“-1”是一个特殊值,指的是空位。

例如,如果一个地砖的所有位都设置为 0 或更大,那么只有在 所有 8个相邻图块都使用具有相同地形 ID 的图块时,它才会出现。如果图块的位设置为“0”或更大,但左上、上和右上的位设置为“-1”,则只有在其顶部(包括对角线)有空位时才会出现。

在图块集编辑器的选择模式下配置单个图块上的地形对等位

在图块集编辑器的选择模式下配置单个图块上的地形对等位

完整图块表的配置示例如下:

横向卷轴游戏的完整图块表示例

横向卷轴游戏的完整图块表示例

一个横向卷轴的完整图块表示例,带可见地形对等位

一个横向卷轴的完整图块表示例,带可见地形对等位

一次为多个图块指定属性

有两种方法可以同时为多个图块分配属性。根据你的使用情况,一种方法可能比另一种方法更快:

使用多个图块选择

如果希望一次配置多种属性,请选择 TileSet 编辑器顶部的 选择 模式:

完成此操作后,你可以按住 Shift 键,然后单击图块,在右侧栏中选择多个图块。你还可以按住鼠标左键然后拖动鼠标来执行矩形选择。最后,你可以按住 Shift 然后单击选定的图块,取消选择已选中的图块(不会影响选择的其他部分)。

然后,你可以使用 TileSet 编辑器中间一列的检查器分配属性。只有在此更改的属性才会应用到所有选定的图块。与编辑器的检查器一样,在你编辑之前,所选图块上的不同属性将保持不同。

对于数值和颜色属性,编辑完成后还能在图集中的所有图块上看到属性值的预览:

使用选择模式选择多个图块,然后应用属性

使用选择模式选择多个图块,然后应用属性

使用图块属性绘制

如果要一次将单个属性应用于多个图块,则可以使用*属性绘制*模式来实现此目的。

在中间一列配置要绘制的属性,然后点击右列中的图块(或按住鼠标左键)以将属性“绘制”到图块上。

在文本编辑器中编辑文本

在文本编辑器中编辑文本

对于手动设置耗时的属性(例如碰撞形状),图块属性绘制特别有用:

绘制碰撞多边形,然后左键单击图块以应用它

绘制碰撞多边形,然后左键单击图块以应用它

创建备选图块

有时,你想使用单一的图块图像(在图集中只能找到一次),但要以不同的方式进行配置。例如,你可能想使用相同的图块图像,但对它进行旋转、翻转或调制成不同的颜色。这就可以使用 备选图块 来实现。

小技巧

从 Godot 4.2 开始,你将不再必须通过创建替代图块来旋转或翻转图块。你可以使用 TileMap 编辑器工具栏中的旋转/翻转按钮,在任何图块放置进 TileMap 编辑器中时旋转它。

要创建备选图块,请右键单击 TileSet 编辑器显示的图集中的基本图块,然后选择 创建备选图块

在 TileSet 编辑器中右键单击基础图块创建备选图块

在 TileSet 编辑器中右键单击基础图块创建备选图块

如果当前处于“选择”模式,则可编辑已选中的备选图块。如果当前不在“选择”模式下,你仍然可以创建备选图块,但需要切换到“选择”模式并选择备选图块进行编辑。

如果看不到备选图块,请平移到图集图像的右侧,因为在 TileSet 编辑器中,备选图块总是出现在给定图集基础图块的右侧:

在 TileSet 编辑器中单击备选图块后配置它

在 TileSet 编辑器中单击备选图块后配置它

选择备选图块后,你可以使用中间一列更改任何属性,就像在基础图块上一样。但暴露的属性列表与基础图块不同:

  • 备用 ID: 此可选图块的唯一数字标识符。更改它会破坏现有的瓦片地图,所以要小心!此 ID 还控制在编辑器中显示的可选图块列表中的排序。

  • 渲染 > 水平翻转: 如果 启用 ,则图块水平翻转。

  • 渲染 > 垂直翻转: 如果 启用 ,则图块垂直翻转。

  • 渲染 > 转置: 如果 启用 ,则图块将 逆时针 旋转 90 度,然后再垂直翻转。实际上,这意味着要将图块顺时针旋转 90 度而不翻转它,你应该启用 水平翻转转置 。要将图块顺时针旋转 180 度,请启用 水平翻转垂直翻转 。要将图块顺时针旋转 270 度,请启用 垂直翻转转置

  • 渲染 > 纹理原点:绘制图块时使用的原点。可以用来将图块进行相对于基础图块的视觉偏移。

  • 渲染 > 调制:渲染图块时的颜色乘数。

  • 渲染 > 材质: 当前图块使用的材质。可以使用此选项为单个图块应用不同的混合模式或自定义着色器。

  • Z 索引: 当前图块的排序。数值大的图块会渲染在同一层中的其他图块之上。

  • Y 排序原点:(Y Sort Origin)基于其 Y 坐标(以像素为单位)进行图块排序时要使用的垂直偏移量。这使得可以将图层视为在不同高度上用于俯视角的游戏。调整此值可以帮助缓解某些图块排序的问题。仅当放置图块的 TileMap 图层的 Y Sort Enabled启用 时才有效。

你可以通过点击在备选图块旁的 “+” 图标来创建一个基于该图块的新的备选图块。该操作与在选择基本图块后并右键选择 “创建备选图块” 等价。

备注

当创建一个备选图块时,其基本图块的任何属性将不会被继承下来。如果你希望备选图块与基本图块的属性相同,那么你需要在备选图块中重新设置这些属性。