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

Question

在 Phaser 3 中添加图 block map 时，图 block 之间会出现明显的渗色(或间隙)。这有时被描述为瓷砖的“闪烁”或“闪烁”。

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

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 拉伸(stretch) 1px(或更多)像素。目前，Phaser 社区推荐的工具是:https://github.com/sporadic-labs/tile-extruder

工作流程

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

选项 1:拉伸(stretch)源图像

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

选项 2:拉伸(stretch)分布式图像

这(主观上)更简单，因为它允许您在处理 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