Quantize Gradient Filter

Demonstrates applying the Quantize filter to a gradient object to create color banding effects, showcasing both standard quantization and the effect of dithering in HSVA mode.

Quantize Gradient Filter, running
1280 × 720
GitHub
class Example extends Phaser.Scene
{
    create ()
    {
        this.add.text(640, 50, 'Original gradient').setOrigin(0.5);
        const gradient1 = this.add.gradient({
            bands: {
                colorStart: 0xff0000,
                colorEnd: 0xff0001,
                colorSpace: 2
            }
        }, 640, 150, 1280, 128);

        this.add.text(640, 250, 'Quantized gradient').setOrigin(0.5);
        const gradient2 = this.add.gradient({
            bands: {
                colorStart: 0xff0000,
                colorEnd: 0xff0001,
                colorSpace: 2
            }
        }, 640, 350, 1280, 128);
        gradient2.enableFilters().filters.internal.addQuantize({
            steps: [ 8, 2, 2, 2 ],
            mode: 1 // HSVA
        });

        this.add.text(640, 450, 'Quantized gradient with dither').setOrigin(0.5);
        const gradient3 = this.add.gradient({
            bands: {
                colorStart: 0xff0000,
                colorEnd: 0xff0001,
                colorSpace: 2
            }
        }, 640, 550, 1280, 128);
        gradient3.enableFilters().filters.internal.addQuantize({
            steps: [ 8, 2, 2, 2 ],
            mode: 1, // HSVA
            dither: true
        });
    }
}

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

let game = new Phaser.Game(config);

More in Quantize2 examples