在 Phaser 3 中使用瓷砖贴图时，如何阻止瓷砖流血？

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

解决方案

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

工作流程

您可以一次性在“源”图像上执行挤压，也可以作为构建步骤的一部分在分布式图像上执行挤压。

选项 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"
  }
}

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

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

注意仅在使用 WebGL（而不是画布）时才需要平铺挤出

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