Phaser 3 搭配 Matter JS 开发时如何正确销毁 Tilemap 瓦片图层

失效原因 #

你当前的代码仅调用了Matter世界的移除方法处理图层根引用，遗漏了两类核心资源的清理：

1. 调用convertTilemapLayer后，每个带碰撞属性的瓦片都会生成独立的Matter物理体，没有被批量清理
2. Phaser本身的TilemapLayer渲染实例没有被销毁，导致画面上的瓦片仍然可见

可行解决方案 #

按物理体清理→图层实例销毁→缓存引用清除的顺序执行即可，完整实现代码如下：

Object.keys(this._layers).forEach(key => {
    const layer = this._layers[key];
    // 清理该图层所有碰撞瓦片对应的Matter物理体
    layer.getTilesWithin().forEach(tile => {
        if (tile.physics?.matterBody) {
            this.scene.matter.world.remove(tile.physics.matterBody.body, true);
        }
    });
    // 移除图层在Matter世界的根挂载对象
    this.scene.matter.world.remove(layer, true);
    // 销毁Phaser TilemapLayer渲染实例，清理画面显示资源
    layer.destroy();
    // 清除自定义缓存中的图层引用
    delete this._layers[key];
});

// 若后续不需要复用当前Tilemap实例，可额外执行销毁释放地图资源
// this.map.destroy();

注意事项 #

• 如果仅需要移除物理碰撞、保留瓦片显示，跳过layer.destroy()调用即可
• 不需要复用地图的场景下销毁Tilemap实例可以进一步释放内存，避免泄漏

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