Loading a Base64 Image

Demonstrates how to load and display an image by passing a Base64 encoded string directly to the Phaser Loader instead of a file URL.

800 × 600

GitHub

// #module
import { blockPNG } from '../../../assets/base64/block-image.js';

class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
        this.load.image('block', blockPNG);
    }

    create ()
    {
        this.add.image(400, 300, 'block');
    }
}

const config = {
    scale: { mode: Phaser.Scale.FIT },
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    parent: 'game-container',
    scene: Example
};

const game = new Phaser.Game(config);

More in Base644 examples

Loading a Base64 Texture AtlasDemonstrates how to load a texture atlas by passing Base64 encoded strings for both the image and the JSON data, instead of loading external files.

Base64 Bitmap FontThis example demonstrates how to load a bitmap font by providing Base64 encoded strings for both the image texture and the XML font data, instead of using external file paths.

Load Bitmap Text from Base64Demonstrates how to manually parse and cache a Bitmap Font using base64 encoded PNG and XML data instead of external files.