在 Phaser 3 中使用图块地图时，如何阻止图块渗色？

在 Phaser 3 中添加图块地图时，图块之间存在明显的出血（或间隙）。这有时被描述为瓷砖的“闪烁”或“闪烁”。

这在平移时通常更为突出。

const map = this.make.tilemap({ key: 'some-map' })
const tiles = map.addTilesetImage('some-tileset', 'some-key')
const baseLayer = map.createStaticLayer('base', tiles, x, y)

我该如何阻止这种情况发生？

Solution

解决方案是将图块集中的图块挤出 1 像素（或更多）像素。目前，Phaser社区推荐的工具是：https://github.com/sporadic-labs/tile-extruder https://github.com/sporadic-labs/tile-extruder

Workflow

您可以一次性对“源”图像执行挤压，也可以在构建步骤中对分布式图像执行挤压。

选项 1：挤出源图像

如果您选择挤出源图像，则需要在平铺中进行适当的调整。您还需要确保在编辑图像时保持间隙。

选项2：挤出分布的图像

这（主观上）更简单，因为它允许您在处理 Tiled 和图像时保持“原样”，而不需要在 Tiled 中进行任何更改。

在构建步骤中，引入一个命令（例如npm run process-assets），这将挤出图块集图像并将它们复制到您的构建文件夹中。

# package.json
{
  "scripts": {
    "process-assets": "tile-extruder --tileWidth 32 --tileHeight 32 --margin 1 --spacing 2 --input ./src/tilesets/tileset.png --output ./dist/tilesets/tileset.png"
  }
}

只需确保更新您的图块地图创建即可：

const tiles = map.addTilesetImage('some-tileset', 'some-key', 32, 32, 1, 2)

Note仅当使用 WebGL（而不是画布）时才需要平铺挤出

Image from https://github.com/sporadic-labs/tile-extruder https://github.com/sporadic-labs/tile-extruder