使用图块地图(Tile Maps)

简介

A tilemap is a grid of tiles used to create a game’s layout. There are several benefits to using TileMap nodes to design your levels. First, they make it possible to draw the layout by “painting” the tiles onto a grid, which is much faster than placing individual Sprite nodes one by one. Second, they allow for much larger levels because they are optimized for drawing large numbers of tiles. Finally, you can add collision, occlusion, and navigation shapes to tiles, adding additional functionality to the TileMap.

项目设置

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

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

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

TileMap节点

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

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

• 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)”。

Click on the TileSet property, and the “TileSet” panel will open at the bottom of the editor window:

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

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

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

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

碰撞形状

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

单击编辑器窗口底部的“瓦片集”返回到瓦片集工具。单击之前定义的砖块(用黄色表示)。选择“Collision”标签并点击“新建一个四边形”按钮。确保你网格对齐还开着，然后单击并拖动砖块。会出现淡蓝色的矩形碰撞框：

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

Atlas Tiles(图块组)

Rather than adding individual tiles one at a time, you can define a group of tiles all at once using an atlas. This also allows you to randomly generate tiles from the group.

Click “New Atlas” and drag to select the entire tile sheet.

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

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

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

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

Random tile priorities

When drawing with atlas tiles, enabling the “Use priority” option causes tiles to be selected at random. By default, each tile in the tileset has an equal likelihood of occurring. You can change the likelihood by setting different priorities for each tile. For example, a tile with priority 2 is twice as likely to be selected as a tile with priority 1, and a tile with priority 3 is 50% more likely to be selected than a tile with priority 2.

Autotiles

Autotiles allow you to define a group of tiles, then add rules to control which tile gets used for drawing based on the content of adjacent cells.

Click “New Autotile” and drag to select the tiles you wish to use. You can add collisions, occlusion, navigation shapes, tile priorties, and select an icon tile in the same manner as for atlas tiles.

Tile selection is controlled by bitmasks. Bitmasks can be added by clicking “Bitmask”, then clicking parts of the tiles to add or remove bits in the mask. Left-clicking an area of the tile adds a bit, right-click removes “off”, and shift-left-click sets an “ignore” bit.

Whenever Godot updates a cell using an autotile, it first creates a pattern based on which adjacent cells are already set. Then, it searches the autotile for a single tile with a bitmask matching the created pattern. If no matching bitmask is found, the “icon” tile will be used instead. If more than one matching bitmask is found, one of them will be selected randomly, using the tile priorities.

The rules for matching a bitmask to a pattern depend on the tileset’s autotile bitmask mode. This can be set in the “Inspector” tab, under the “Selected Tile” heading. Allowed values are “2x2”, “3x3 (minimal)”, and “3x3”.

All “on” and “off” bits must be satisfied for a bitmask to match, but “ignore” bits are ignored.

2x2

In 2x2 mode, each bitmask contains four bits, one for each corner.

Where a bit is “on”, all cells connected to that corner must be filled using the same autotile, in order for the bitmask to match. For example, if the top-left bit is set, the cell directly above, directly left, and diagonally above-left must be filled.

Where a bit is “off”, at least one cell connected to that corner must not be set using the same autotile.

At least one bit must be set for the tile to be used, so a total of 15 tiles would be needed to provide exactly one tile for each arrangement that this mode can test for.

2x2 mode can only match cells that are part of a 2-by-2 block - cells with no neighbors and lines only one cell wide are not supported.

Template - Generic:

This template can be used for sideways or fully top-down perspectives. It’s designed for a TileMap cell size of 64x64.

Key:

• Red: “on”
• White: “off”

3x3 (最小)

In 3x3 (minimal) mode, each bitmask contains 9 bits (4 corners, 4 edges, 1 center). The 4 corner bits work the same as in 2x2 mode.

When an edge bit is “on”, the cell which shares that edge must be filled. When an edge bit is “off”, the cell which shares that edge must be empty.

The center bit should be “on” for any tile you wish to use. Note that in this mode, it makes no sense for a corner bit to be “on” when either edge bit adjacent to it is not “on”.

A total of 47 tiles would be needed to provide exactly one bitmask for each arrangement that this mode can test for.

注解

Right-click an image and choose Save image as… to save it.

Template - Generic:

This template can be used for sideways or fully top-down perspectives. All templates below are designed for a TileMap cell size of 64x64, but you may have to use different subtile sizes for top-down templates as described below.

Key:

• Red: “on”
• White: “off”

Template - Top-down floor in 3/4 perspective:

Key (applies to the four templates below):

• Green: floor
• Cyan: wall
• Yellow: top of wall
• Transparent: air

Template - Top-down wall in 3/4 perspective:

Template - Top-down wall in 3/4 perspective (thick walls):

When using this template, set the TileSet subtile size to Vector2(64, 88).

Template - Top-down wall in 3/4 perspective (tall walls):

When using this template, set the “Snap Options” Step to Vector2(64, 184) and the “Selected Tile” Texture offset to height minus the cell size. This means the texture offset should be Vector2(0, -120):

3x3

In 3x3 mode, each bitmaks contains 9 bits (4 corners, 4 edges, 1 center)

Each bit checks a single adjacent cell. Corner bits only check diagonally adjacent cells. The center bit should be “on” for any tile you wish to use.

A total of 256 tiles would be needed to provide exactly one bitmask for each arrangement that this mode can test for.

Disabling autotile

When using an autotile, it is possible to turn of the autotile behaviour and select tiles manually, by clicking “Disable Autotile” at the top of the tile selection window.

Autotile binding

By default, autotile only checks for adjacent cells filled using the same autotile. This behaviour can be overridden in order to have autotiles bind to each other, or even bind to empty cells. At present, this can only be done through scripting. You will need to add a script to your tileset, and define a function named “_is_tile_bound(drawn_id, neighbor_id)”. This function will be called for each adjacent cell that does not contain the same autotile, and should return true if you want the drawn cell to “bind” to the neighbor cell. You can find the id of an autotile using “find_tile_by_name(name)”, empty cells are given an id of -1.

Note that to use this in the editor, the script should start with a “tool” declaration, and you may need to close and reload the scene for these changes to take effect.

提示和技巧

• 如果你使用 Camera2D 来滚动显示你的关卡，则可能会注意到在图块之间出现了一些线条。要解决此问题，请打开“项目设置”，然后在“Rendering/Quality(渲染/质量)”部分中启用“Use Pixel Snap”。
• 您可以使用编辑器右上方的图标来翻转和旋转图块。
• To draw straight lines, hold Shift while clicking and dragging a tile.
• 可以在右上角的“ TileMap”菜单中找到诸如复制，粘贴和油漆桶填充之类的工具。