Swirl Filter

Apply a swirl distortion effect to a Game Object and animate the effect's strength using the Tween Manager.

Swirl Filter, running
800 × 600
GitHub
// #module

import FilterSwirl from '../assets/rendernodes/FilterSwirl.js';

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

    preload ()
    {
        this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
        this.load.image('logo', 'assets/sprites/phaser3-logo.png');
        this.load.image('bg', 'assets/skies/pixelback1.jpg');
    }

    create ()
    {
        this.add.image(400, 300, 'bg');

        const swirlController = new FilterSwirl.Controller(this.cameras.main);
        console.log(swirlController);
        swirlController.strength = 0.75;
        swirlController.coords = [0.5, 0.5];
        swirlController.radius = 0.25;
        swirlController.resolution = [this.sys.game.config.width, this.sys.game.config.height];

        const logo = this.add.image(400, 300, 'logo');
        logo.enableFilters();
        logo.filters.external.add(swirlController);

        // Animate the swirl angle (x property)
        this.tweens.add({
            targets: swirlController,
            strength: 1,
            repeat: -1,
            duration: 5000,
            ease: 'Sine.inOut',
            yoyo: true
        });
    }
}

const config = {
    scale: { mode: Phaser.Scale.FIT },
    type: Phaser.WEBGL,
    width: 800,
    height: 600,
    backgroundColor: '#0a0067',
    parent: 'game-container',
    scene: Example,
    renderNodes: {
        FilterSwirl: FilterSwirl.Filter
    }
};

let game = new Phaser.Game(config);

More in Renderer14 examples