Dynamic Bitmap Text Tinting

Demonstrates how to use a display callback to apply dynamic, per-character tinting effects to a Dynamic Bitmap Text object using an HSV color wheel.

Dynamic Bitmap Text Tinting, running
1024 × 768
GitHub
let i = 0;
let hsv = [];

class Example extends Phaser.Scene
{
    constructor ()
    {
        super();
    }

    preload ()
    {
        this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
        this.load.bitmapFont('ice', 'assets/fonts/bitmap/iceicebaby.png', 'assets/fonts/bitmap/iceicebaby.xml');
    }

    create ()
    {
        hsv = Phaser.Display.Color.HSVColorWheel();

        const tintedText = this.add.dynamicBitmapText(32, 64, 'ice', '- Phaser III -', 128);
        tintedText.setDisplayCallback(this.textCallback);
    }

    textCallback (data)
    {
        data.tint.topLeft = hsv[Math.floor(i)].color;
        data.tint.topRight = hsv[359 - Math.floor(i)].color;
        data.tint.bottomLeft = hsv[359 - Math.floor(i)].color;
        data.tint.bottomRight = hsv[Math.floor(i)].color;

        i += 0.05;

        if (i >= hsv.length)
        {
            i = 0;
        }

        return data;
    }
}

const config = {
    scale: { mode: Phaser.Scale.FIT },
    type: Phaser.WEBGL,
    parent: 'game-container',
    backgroundColor: '#2d2d2d',
    scene: Example
};

const game = new Phaser.Game(config);

More in Dynamic8 examples