Base64 Bitmap Font

This 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.

800 × 600

GitHub

// #module
import { carrierCommandFont, carrierCommandXML } from '../../../assets/base64/carrier-command-font.js';

class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
        this.load.bitmapFont('carrier', carrierCommandFont, carrierCommandXML);
    }

    create ()
    {
        this.add.bitmapText(64, 200, 'carrier', 'Bitmap Fonts\nloading via base64\nin Phaser 3');
    }
}

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

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.

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

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.