如何在Phaser.js中导出动态编辑的Tilemap为文件？

Phaser.js本身没有提供直接将Tilemap导出为文件的内置方法，但你可以通过手动提取Tilemap数据、转换为标准格式（如JSON或CSV），再生成下载文件的方式实现需求，以下是具体步骤和代码示例：

1. 提取Tilemap数据 #

首先获取你的Tilemap实例，然后遍历所有图层，提取每个图层的瓦片数据、尺寸、瓦片集信息等关键内容。以JSON格式为例，构建符合Phaser Tilemap JSON规范的结构：

function exportTilemap(tilemap) {
    // 构建基础JSON结构
    const exportData = {
        "compressionlevel": -1,
        "height": tilemap.height,
        "infinite": false,
        "layers": [],
        "nextobjectid": 1,
        "orientation": "orthogonal",
        "renderorder": "right-down",
        "tiledversion": "1.9.1",
        "tileheight": tilemap.tileHeight,
        "tilesets": [],
        "tilewidth": tilemap.tileWidth,
        "type": "map",
        "version": "1.9",
        "width": tilemap.width
    };

    // 添加瓦片集信息（多瓦片集可遍历tilemap.tilesets数组）
    const tileset = tilemap.tilesets[0];
    exportData.tilesets.push({
        "firstgid": tileset.firstgid,
        "image": tileset.image.key,
        "imageheight": tileset.image.height,
        "imagewidth": tileset.image.width,
        "margin": tileset.margin,
        "name": tileset.name,
        "spacing": tileset.spacing,
        "tilecount": tileset.total,
        "tileheight": tileset.tileHeight,
        "tilewidth": tileset.tileWidth
    });

    // 遍历每个图层，提取瓦片数据
    tilemap.layers.forEach(layer => {
        const layerData = [];
        for (let y = 0; y < layer.height; y++) {
            for (let x = 0; x < layer.width; x++) {
                const tile = layer.data[y][x];
                layerData.push(tile.index || 0);
            }
        }

        exportData.layers.push({
            "data": layerData,
            "height": layer.height,
            "id": layer.index,
            "name": layer.name,
            "opacity": layer.opacity,
            "type": "tilelayer",
            "visible": layer.visible,
            "width": layer.width,
            "x": layer.x,
            "y": layer.y
        });
    });

    return exportData;
}

2. 生成并下载文件 #

将提取到的JSON数据转换为Blob，创建隐藏下载链接触发浏览器下载：

function downloadTilemap(tilemap, filename = "custom-tilemap.json") {
    const exportData = exportTilemap(tilemap);
    const jsonString = JSON.stringify(exportData, null, 2);
    const blob = new Blob([jsonString], { type: "application/json" });
    const url = URL.createObjectURL(blob);
    
    const a = document.createElement("a");
    a.href = url;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    
    // 清理资源
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
}

3. 使用方法 #

在你的编辑逻辑中调用上述函数即可导出：

// 假设你的Tilemap实例是this.myTilemap
downloadTilemap(this.myTilemap, "my-edited-map.json");

注意事项 #

• 若使用多瓦片集，需修改exportTilemap函数遍历tilemap.tilesets添加所有瓦片集信息。
• 导出的JSON文件可直接通过Phaser的load.tilemapTiledJSON方法加载使用。
• 如需导出CSV格式，可简化逻辑，将每个图层的瓦片索引按行拼接为逗号分隔字符串。

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