Barrel Distortion Filter on Sprites

Demonstrates applying barrel distortion filters to individual sprites with varying intensity and using focus overrides to prevent edge clipping.

Barrel Distortion Filter on Sprites, running
800 × 600
GitHub
class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
        this.load.image('block', 'assets/pics/lance-overdose-loader-eye.png');
    }

    create ()
    {
        let amount = 0.5;

        for (let y = 0; y < 2; y++)
        {
            for (let x = 0; x < 3; x++)
            {
                const sprite = this.add.sprite(128 + x * 256, 128 + y * 256, 'block');

                sprite.enableFilters();

                // Enlarge filter view.
                sprite.focusFiltersOverride(undefined, undefined, sprite.width + 64, sprite.height + 64);

                sprite.filters.internal.addBarrel(amount);

                this.add.text(128 + x * 256, 128 + y * 256 + 96, amount).setOrigin(0.5, 0).setResolution(window.devicePixelRatio);

                amount += 0.25;
            }
        }
    }
}

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

const game = new Phaser.Game(config);

More in Barrel4 examples