how to load atlas using base64 in phaser3?

Question

I am making a phaser3 playable ad and require to put images and other assets in a single HTML file. I can load the images using textures.addBase64 but how can I load atlas using base64. Also if you could tell me how to put JSON in the HTML file so that I can refer to it while loading the atlas. Thank you

Answer 1

Untested personally but take a look at 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);
}

Adapt as needed if you're not using TypeScript. Here's the base64ToBlog implementation

The JSON object can be just bounced back and forth from and to base64 if you had the need to embed it in base64 aswell:

// 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));