Phaser 3如何导入Tiled中的Image Collection图层？

Phaser目前没有直接加载Tiled Image Collection类型图层的内置方法，但可以通过解析tilemap的JSON数据手动实现，步骤如下：

1. 提前加载所需资源 #

首先加载你的tilemap文件，以及Image Collection中用到的所有图片资源，注意图片的key要和Tiled里的图片文件名对应（或者你可以自己维护一个映射关系）：

function preload() {
  // 加载Tiled导出的JSON地图
  this.load.tilemapTiledJSON('gameMap', 'assets/your-map.json');
  // 加载Image Collection中的所有图片
  this.load.image('cabin', 'assets/cabin.png');
  this.load.image('sign', 'assets/sign.png');
  this.load.image('flower', 'assets/flower.png');
}

2. 解析并渲染Image Collection图层 #

在create函数中，先处理你已经熟悉的普通图块集图层，然后提取Image Collection图层的数据，遍历每个单元格创建对应精灵：

function create() {
  // 创建tilemap实例
  const map = this.make.tilemap({ key: 'gameMap' });

  // 处理普通图块集图层（你的原有代码）
  const regularTileset = map.addTilesetImage('普通图块集名称', '普通图块集图片key');
  map.createLayer('普通图层名称', regularTileset, 0, 0);

  // 获取Image Collection图层
  const imageLayer = map.getLayer('你的Image Collection图层名');
  if (!imageLayer) return;

  // 遍历图层的每个单元格
  imageLayer.data.forEach(row => {
    row.forEach(cell => {
      // 跳过没有图片的空单元格
      if (!cell.tile?.image) return;

      // 从tile的image路径中提取图片key（假设你加载时用的是文件名作为key）
      const imageKey = cell.tile.image.split('/').pop().split('.')[0];
      
      // 创建精灵并设置位置（对齐单元格中心，和Tiled中的位置一致）
      const sprite = this.add.sprite(cell.getCenterX(), cell.getCenterY(), imageKey);
      sprite.setOrigin(0.5);

      // 如果图片在Tiled中有旋转、翻转，同步这些属性
      if (cell.tile.rotation) sprite.setRotation(cell.tile.rotation);
      sprite.setFlip(cell.tile.flipX, cell.tile.flipY);
    });
  });
}

注意事项 #

• 如果Tiled导出的JSON中image字段是完整路径，需要根据你的资源加载路径调整key的提取逻辑，或者直接维护一个{ 图片路径: 加载key }的映射表
• 若Image Collection中的图片有自定义缩放，可通过cell.tile.scaleX/scaleY设置精灵的缩放比例

内容的提问来源于stack exchange，提问作者domi