在 Phaser 3 中使用 tilemap 时如何阻止我的 tiles 流血？

Question

在 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)

如何阻止这种情况发生？

Answer 1

解决方案

解决方案是将 tileset 中的 tile 拉伸 1px（或更多）像素。目前Phaser社区推荐的工具是：https://github.com/sporadic-labs/tile-extruder

工作流程

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

选项 1：拉伸源图像

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

选项 2：拉伸分布式图像

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

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

# 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"
  }
}

只需确保更新您的 tilemap 创建：

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

注意 仅在使用 WebGL 时才需要平铺挤压（而非 canvas）

图片来自https://github.com/sporadic-labs/tile-extruder