88x31-haylin.js

async function main(canvas) {
    const ee31 = new EightyEightByThirtyOne(canvas, 32, 125);
    const ctx = ee31.ctx;

    const font = await Font.create(ctx, "./assets/spleen-8x16.png", 8, 16, 95, 1, " !\"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~");
    const magic = await Sprite.create(ctx, "./assets/magic.png", 27, 24, 4, 4);

    await magic.mapColors(([r, g, b, a]) => {
        if (r > 0) {
            return [91, 206, 250, 255];
        }
        return [0, 0, 0, 0]
    });

    await font.mapColors(([r, g, b, a]) => {
        if (r > 0) {
            return [245, 169, 184, 255];
        }
        return [0, 0, 0, 0]
    });

    ee31.attachLayerFunction('border', (ee31, frame) => {
        ctx.fillStyle = "rgb(255, 255, 255)";
        ctx.fillRect(0, 0, 88, 31);
        ctx.fillStyle = "rgb(0, 0, 0)";
        ctx.fillRect(2, 2, 88 - 4, 31 - 4);
    })

    ee31.attachLayerFunction('magic', (ee31, frame) => {
        const ctx = ee31.ctx;

        magic.render(frame % 16);

    }, (ee31) => {
        magic.to(60, 2);
    });

    ee31.attachLayerFunction('text', (ee31, frame) => {
        font.to(5, 8);

        let text = [
            "HAMPTON",
            "HAMPT|N",
            "HAMP|N",
            "HAM|N",
            "HA|N",
            "HAY|N",
            "HAYL|N",
            "HAYLI|N",
            "HAYLIN|",
            "HAYLIN!",
        ][Math.floor(frame / 2)];

        if (text == undefined) {
            text = "HAYLIN!";
        }
        font.renderText(text);
    });

    return ee31.renderGif();
}