Phaser.js中如何获取点击瓦片的图集编号？

核心思路 #

给瓦片层开启交互监听，将点击的屏幕坐标转换为瓦片坐标，进而获取对应瓦片的编号信息（包括全局ID和图集本地编号）。

具体实现步骤 #

1. 开启瓦片层交互
   在初始化瓦片层后，调用setInteractive()开启输入交互，同时绑定点击事件：

   // 假设你已经创建了worldLayer瓦片层
   this.worldLayer.setInteractive();
   this.input.on('pointerdown', this.handleTileClick, this);
   

2. 编写点击事件处理函数
   在回调函数中，通过Phaser提供的API获取点击位置的瓦片，再提取所需的编号：

   handleTileClick(pointer) {
     // 获取点击位置对应的瓦片对象
     const tile = this.worldLayer.getTileAtWorldPointer(pointer);
   
     if (tile) {
       // 全局瓦片ID（对应整个地图瓦片集的唯一编号，等于 tileset.firstgid + 图集本地编号）
       const globalTileId = tile.gid;
       // 图集本地编号（就是你放置瓦片时用的6这类编号，相对于当前tileset的偏移）
       const localTileId = tile.index;
   
       console.log('点击的瓦片全局ID:', globalTileId);
       console.log('点击的瓦片图集本地编号:', localTileId);
       // 这里可以根据需求做后续处理，比如显示编号、修改瓦片等
     }
   }
   

补充说明 #

• 如果点击到无瓦片的空白区域，tile会是null，所以必须加if (tile)判断避免报错。
• 如果你需要手动转换坐标，也可以用以下方式替代getTileAtWorldPointer：

  // 将世界坐标转为瓦片坐标
  const { x: tileX, y: tileY } = this.worldLayer.worldToTileXY(pointer.worldX, pointer.worldY);
  // 通过瓦片坐标获取瓦片
  const tile = this.worldLayer.getTileAt(tileX, tileY);
  

• 若使用了多个瓦片图集，tile.tileset可以获取当前瓦片所属的图集对象，方便进一步区分不同图集的瓦片。

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