JSFiddle - React, Tailwind, and code Playground

by Artur Vardanyan

HTML

var config = {
    type: Phaser.WEBGL,
    parent: 'phaser-example',
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

var text;

var game = new Phaser.Game(config);

function preload() 
{
    this.load.atlas('Sprites', 'assets/atlas/bitmap-fonts-debug.png', 'assets/atlas/bitmap-fonts.json');
    this.load.xml('FontXML', 'assets/fonts/bitmap/topaz-fill.xml');
}

function create() 
{
    Phaser.GameObjects.BitmapText.ParseFromAtlas(this, 'Font', 'Sprites', 'topaz-fill', 'FontXML');
    addSpriteIntoFont(this.sys.game, "Font", "topaz-fill", 0xBC);
    this.add.bitmapText(200, 200, "Font", "There is \u00BC");
}

const FontUtils = {
    ALIGN_TOP: 0,
    ALIGN_CENTER: 1,
    ALIGN_BOTTOM: 2,
}

function addSpriteIntoFont(game, fontName, frame, newCharCode, referenceChar = "0", align= FontUtils.ALIGN_CENTER, originY = 0.5) {

    // if reference char is string, convert it to number
    if (typeof referenceChar === "string") {
        referenceChar = referenceChar.charCodeAt(0);
    }

    // get font characters and reference character
    let font = game.cache.bitmapFont.get(fontName);
    let fontChars = (font.data).chars;
    let refChar = fontChars[referenceChar];

    if (refChar == null) {
        throw new Error(`Reference character ${String.fromCharCode(referenceChar)} with code ${referenceChar} is mssing in font. Try another.`);
    }

    // get frame of new sprite character
    let f = game.textures.getFrame(font["texture"], frame);
    let fWidth = f.customData["sourceSize"]["w"];
    let fHeight = f.customData["sourceSize"]["h"];

    // calculate y offset of sprite chracter
    let refY = refChar.yOffset +
        (align === FontUtils.ALIGN_CENTER ? refChar.height / 2 :
            align === FontUtils.ALIGN_BOTTOM ? refChar.height : 0);
    let yOffset = Math.round(refY - fHeight * originY);

    // add new sprite character
    fontChars[newCharCode] = {
        x: f.cutX,
        y: f.cutY,
        width:...