如何在 phaser3 中使用 base64 加载图集？

问题描述

我正在制作一个可播放的 phaser3 广告，并且需要将图像和其他资产放入单个 HTML 文件中。我可以使用 textures.addBase64 加载图像，但如何使用 base64 加载图集。 另外，如果您能告诉我如何将 JSON 放入 HTML 文件中，以便我可以在加载图集时参考它。 谢谢?

解决方法

未经个人测试，但请查看this solution

 private loadBase64Atlas(key: string,data: string,json: object): void {
    const imageElement = new Image();
    imageElement.onload = () => {
        this.scene.textures.addAtlas(key,imageElement,json);
        this.onAssetLoaded();
    };

    const spriteBlob = this.base64ToBlob(data.split(',')[1],'image/png');
    imageElement.src = URL.createObjectURL(spriteBlob);
}

如果您不使用 TypeScript，请根据需要进行调整。这是base64ToBlog implementation

如果您还需要将 JSON 对象嵌入 base64，则可以在 base64 和 base64 之间来回切换：

// get the base64 string to embed in the ad and physically store it
const atlasJSON64 = btoa(JSON.stringify(atlasJSON)); 
[...]
const objectatlasJSON64 = JSON.parse(atob(atlasJSON64));