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

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

解決方案

解決方案是將您的瓦片集中的瓦片擠出 1 像素（或更多）像素。 目前Phaser社區推薦的工具是： https://github.com/sporadic-labs/tile-extruder

工作流程

您可以一次性對“源”圖像執行擠壓，也可以在構建步驟中對分布式圖像執行擠壓。

選項 1：拉伸源圖像

如果您選擇拉伸源圖像，則需要在 Tiled 中進行適當的調整。 您還需要確保在編輯圖像時保持間隙。

選項 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/sporadic-labs/tile-extruder