Using TileMaps

简介

图块地图是用于创建游戏布局的图块网格.使用 TileMap 节点设计关卡有很多好处.首先,它们可以通过将图块”绘制”到网格上来绘制布局,这比逐个放置单个 Sprite 节点快得多；其次,它们允许更大的关卡,因为它们针对绘制大量图块进行了优化.最后,您可以为图块添加碰撞,遮挡和导航形状,从而为图块地图添加其他功能.

../../_images/tileset_draw_atlas.png

项目设置

在这个Demo中,我们将使用Kenney的”Abstract Platformer”艺术包中的以下图块.您可以在 此处 找到完整的包,但是对于本演示,我们将仅使用这一小部分.

../../_images/tilesheet.png

创建一个新项目并将上面的图像放置在项目文件夹中.

使用图块集时,相邻的图块匹配很重要. Godot的默认设置是使用插值的”滤镜(Filter)”模式导入2D图像,这将导致图块之间的边界很丑.选择图像,然后单击”导入(Import)”选项卡.关闭 Filter ,然后单击”重新导入”.有关详细信息,请参见 导入图像 .

TileMap节点

在场景中添加一个新的 TileMap 节点.默认情况下,TileMap使用正方形的图块网格.您还可以使用基于透视图的”Isometric”模式或定义自己的自定义图块形状.

../../_images/tilemap_mode.png

在属性面板的”Cell”部分下,有许多属性可以调整, 自定义图块贴图的行为:

../../_images/tilemap_size.png

  • Cell Size

    这定义了网格的大小.这应与您的图块的像素大小匹配.默认值为 ``(64,64) `` .

  • YSort

    这将导致以 Y (竖直方向)位置的顺序绘制图块,这样的话”较低”图块的绘制覆盖在”较高”图块的上面.

  • Half Offset 和 Tile Origin

    这些属性影响图块相对于网格的位置.

  • Quadrant

    定义用于批处理绘图的块大小.这可能会对性能产生负面影响.除非你知道你在做什么,否则不要改变它.

  • Custom Transform

    用来改变图块的形状.如果您有非正方形的图块,请使用此选项.

在这个演示中,所有这些选项都可以保持默认值.

创建一个TileSet

一旦你配置好你的TileMap,是时候添加一个 TileSet 了.TileSet是一个 Resource ,它包含了图块的所有数据——纹理,碰撞形状(Collision Shape)和其他属性.当游戏运行时,TileMap 将独立的图块合并成一个对象.

若要添加新TileSet,请单击”Tile Set”属性并选择”新建 TileSet(New TileSet)”.

../../_images/tilemap_add_tileset.png

单击TileSet属性,”TileSet”面板将在编辑器窗口底部打开:

../../_images/tilemap_tool.png

首先,您需要添加用于砖块的纹理.点击”Add Texture(s) to TileSet(添加纹理到磁贴集)”按钮,选择 tilesheet.png 的图片.

接下来,点击”New Single Tile(新建图块)”,在图像中拖动来选择你想要的图块.单击”Enable Snap(启用吸附)”按钮可以更容易地选择整个砖块.一个黄色矩形会出现在选定的图块区域周围.

../../_images/tilemap_add_tile.png

单击场景树中的TileMap,你会看到新创建的图块现在出现在右侧.单击视窗,你就可以放置图块.右键单击以删除它们.

../../_images/tilemap_draw.png

很容易发生意外地选择和移动TileMap节点的情况.为了避免这种情况,使用节点的锁定按钮:

../../_images/tile_lock.png

碰撞形状

如果你在制作需要碰撞体积的地图——墙壁,地板,或其他障碍——你需要添加collision shape到任何你想被认为是”实心的”图块上.

点击编辑器窗口底部的 “TileSet”,返回到图块集工具.点击你之前定义的图块(黄色勾勒).选择 “碰撞 “选项卡,点击 “创建一个新的矩形” 按钮.确保你仍然启用了网格吸附,然后点击并拖入图块.一个正方形的碰撞形状将出现在浅蓝色当中:

../../_images/tileset_add_collision.png

你也可以以相同的方式向图块添加occlusion shapes(光线遮挡形状)和navigation shapes(导航形状).

Atlas Tiles(图块组)

你可以使用地图集(atlas)一次定义一组图块,而不必一次添加一个图块.这也允许你从组中随机生成图块.

点击 “新建合集”,然后拖动以选择整个图块.

../../_images/tileset_atlas.png

如果你还没有设置,请确保将Snap Options中的”Step”更改为 (64, 64) 或者别的适合你图块的大小.你可以在属性面板中找到它:

../../_images/tileset_snap.png

一旦你定义了图块组,你就可以像以前一样将碰撞形状(Collision Shape)添加到各个图块上.你也可以点击”Icon”来选择其中一个作为整个图块组的图标.

回到TileMap,你可以选择图块组,你会看到它所包含的所有图块:

../../_images/tileset_draw_atlas.png

除了节省定义图块的时间外,这可以帮助你在处理大量图块时将类似的图块分组在一起.

随机图块优先级

使用Atlas拼贴进行绘制时,启用”使用优先级”选项会导致随机选择拼贴. 默认情况下,图块集中的每个图块发生的可能性均等. 您可以通过为每个图块设置不同的优先级来更改可能性. 例如,优先级为2的图块被选择的可能性是优先级为1的图块的两倍,优先级为3的图块的选择可能性是优先级为2的图块.

自动图块

自动图块允许你定义一组图块,然后添加规则以根据相邻单元格的内容来控制使用哪个图块进行绘制.

单击”新建自动图块”,并拖动以选择要使用的图块. 以与合集图块相同的方式添加碰撞、遮挡、导航形状、图块优先级以及选择图标.

图块的选择是由位位掩码 (Bitmask) 来控制的.可以通过点击”Bitmask”来新增位掩码,然后点击图块中要新增或移除位位掩码的部分.左键点击图块中的区域来新增位元,右键点击则可移除”关闭 (Off)”,Shift + 左键点击则可设定”忽略 (Ignore)”位元.

当 Godot 使用自动图块来更新其中一格图块格 (Cell) 时,Godot 会先依据周边已经设定好的图块格来建立图块样式.接著再使用建立好的样式来以与其位位掩码相符的单一图块来建立自动图块.若没有找到相符的位位掩码,则会改用”icon”图块.若有找到多个相符的位位掩码,则会依照图块优先度随机选择一个.

位掩码与图集的匹配规则取决于图集的自动位掩码模式.可以在”属性面板”分页中的”Selected Tile”底下设定该规则.可设定的值有”2x2”、”3x3 (minimal)”与”3x3”.

位掩码必须满足所有”on”和”off’位才能匹配,但”ignore”位会被忽略.

2x2

在2x2模式下,每个比特掩码包含4个位,对应4个角.

对于设为”on”的位元,所有连结到该角落的图块格都必须以相同的自动图块来填满以符合位位掩码.举例来说,若有设定左上角的位元,则正上方、正左方、与斜左上方的图块格都必须要被填满.

对于设为”off”的位元,则至少有一个连接到该角落的图块格不能使用相同的自动图块来设定.

要使用的图块都必须要设定至少一个位元.因此,对每个要测试该模式的图块排列,都必须要设定总共 15 格图块来提供刚好一个的图块.

2x2 模式只能对应到 2 乘 2 区块中的图块格 —— 也就是周围没有其他图块格的图块格,且不支持边长只有 1 的图块格.

Template - Generic[通用模版]:

此模版可用于侧视角或完全的俯视角.每一个TileMap 图块格的尺寸是64x64.

Key:

  • 红色:”on”

  • 白色:”off”

../../_images/autotile_template_2x2.png

3x3 (最小)

3x3 (minimal) 模式中,每个位掩码都包含了 9 个位元 (4 个角落、4 个边缘、1 个中央).4 个角落的位元的运作方式与 2x2 模式相同.

当边缘位为”on”时,必须填充共享该边缘的单元.当边沿位为”off”时,共享该边沿的单元格必须为空.

对于任何你想要使用的图块,中心位应该是”打开”的.注意,在这种模式下,当相邻的任何一个边位都不是”开”时,让一个角位”开”是没有意义的.

总共需要47个图块,才能为该模式可以测试的每种设置提供一个精确的位掩码.

注解

右键单击图像并选择 保存图像为… 来保存它.

Template - Generic[通用模版]:

该模板可用于横向或上帝视角.下面的所有模板都是专为64x64的TileMap单元格尺寸设计的,但对于上帝视角的模板,您可能需要使用不同的子图块尺寸.

Key:

  • 红色:”on”

  • 白色:”off”

../../_images/autotile_template_3x3_minimal.png

模板 - 16图块通用:

该模板可用于仅包含16个图块的图块集-在更简单的艺术风格下,缺失的图块并不明显.

Key:

  • 红色:”on”

  • 白色:”off”

  • 蓝白格:”忽略”

../../_images/autotile_template_3x3_minimal_16.png

模版 - 上帝视角的地面 3/4 透视:

Key(适用于以下四个模板):

  • 绿色:地面

  • 青色:墙

  • 黄色:墙顶

  • Grey: hidden due to overlap

  • 透明:空气

../../_images/autotile_template_3x3_minimal_topdown_floor.png

模版- 上帝视角的墙 3/4 透视:

../../_images/autotile_template_3x3_minimal_topdown_walls.png

模版 - 上帝视角的墙 3/4 透视 (厚墙):

使用此模板时,将图块集子图块大小设置为 Vector2(64, 88) .

../../_images/autotile_template_3x3_minimal_topdown_walls_thick.png

模版 - 上帝视角的墙 3/4 透视 (高墙):

使用该模板时,将 “吸附选项”步长设置为 Vector2(64, 184) ,”选定图块”纹理偏移为高度减去单元格大小,这意味着纹理偏移应该是 Vector2(0, -120) :

../../_images/autotile_template_3x3_minimal_topdown_walls_tall.png

3x3

在3x3模式下,每个位掩码包含9位(4个角,4个边缘,1个中心)

每个位都会检查一个相邻的单元格.角位只检查对角线相邻的单元格.对于您想使用的任何图块,中心位应该是 “开启”.

总共需要256个图块,才能为该模式可以测试的每种排列提供准确的一个位掩码.

禁用自动图块

当使用自动图块时,可以通过单击图块选择窗口顶部的”禁用自动图块”来关闭自动图块行为,并手动选择图块.

自动图块绑定

默认情况下,自动图块只检查使用相同自动图块填充的相邻单元格.这种行为可以被重写,以便让自动图块相互绑定,甚至绑定到空单元格.目前,这只能通过脚本来实现.你需要添加一个脚本到你的图块集,并定义一个名为”_is_tile_bound(drawing_id, neighbor_id) “的函数.此函数将适用于每个不包含相同自动图块的相邻单元格,如果你想让绘制的单元格 “绑定 “到相邻的单元格,那么这个函数应该返回true.你可以使用 “find_tile_by_name(name) “查找自动图块的id,空单元格的id为-1.

注意,要在编辑器中使用它,脚本应该以”tool”声明开始,并且您可能需要关闭并重新加载场景,以便这些更改生效.

提示和技巧

  • 如果你使用 Camera2D 来滚动显示你的关卡,则可能会注意到在图块之间出现了一些线条.要解决此问题,请打开”项目设置”,然后在”Rendering/Quality(渲染/质量)”部分中启用”Use Pixel Snap”.

  • 您可以使用编辑器右上方的图标来翻转和旋转图块.

  • 要绘制直线,请在点击并拖动图块时按住 Shift .

  • 可以在右上角的” TileMap”菜单中找到诸如复制,粘贴和油漆桶填充之类的工具.

../../_images/tilemap_menu.png