Bloom Camera Effect

Demonstrates how to apply a bloom shader effect to a camera using the AddEffectBloom action and animate the effect intensity with a tween.

Bloom Camera Effect, running
1280 × 720
GitHub
class Example extends Phaser.Scene
{
    image;

    preload ()
    {
        this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
        this.load.image('pic', 'assets/pics/the-end-by-iloe-and-made.jpg');
        this.load.image('phaser-logo', 'assets/sprites/phaser.png');
    }

    create ()
    {
        const image = this.add.image(640, 360, 'pic')
        .setScale(2);

        const text = this.add.text(160, 650, 'AddEffectBloom', { font: '32px Arial', fill: '#88ffff' })
        .setOrigin(0.5)
        .setScrollFactor(0);

        const phaserLogo = this.add.image(1120, 650, 'phaser-logo')
        .setScrollFactor(0);

        const { parallelFilters } = Phaser.Actions.AddEffectBloom(
            this.cameras.main,
            { blendAmount: 2 }
        )[0];

        this.tweens.add({
            targets: parallelFilters.blend,
            amount: 0,
            duration: 1000,
            yoyo: true,
            repeat: -1,
            ease: 'Sine.easeInOut'
        });
    }

    update (time, _delta)
    {
        this.cameras.main.setScroll(
            512 * Math.cos(time / 5000),
            512 * Math.sin(time / 5000)
        );
    }
}

const config = {
    scale: { mode: Phaser.Scale.FIT },
    type: Phaser.WEBGL,
    width: 1280,
    height: 720,
    parent: 'game-container',
    scene: Example
};

const game = new Phaser.Game(config);

More in Actions49 examples