Loading and Manipulating Shaders

Demonstrates how to load GLSL fragment shaders, pass uniforms from the game loop, and treat shader objects as GameObjects that can be tweened, scaled, and moved via input.

800 × 600

GitHub

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

    preload ()
    {
        this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
        this.load.glsl('hannae', 'assets/shaders/love-u-hanne-e.frag');
        this.load.glsl('yinyang', 'assets/shaders/yin-yang.frag');
        this.load.image('block', 'assets/sprites/block.png');
    }

    create ()
    {
        const shader = this.add.shader({
            name: 'hannae',
            fragmentKey: 'hannae',
            setupUniforms: (setUniform, drawingContext) => {
                setUniform('time', this.game.loop.getDuration());
            },
        }, 400, 300, 800, 800);

        this.add.image(200, 300, 'block');

        const shader2 = this.add.shader({
            name: 'yinyang',
            fragmentKey: 'yinyang',
            setupUniforms: (setUniform, drawingContext) => {
                setUniform('time', this.game.loop.getDuration());
            },
        }, 400, 300, 256, 256);

        this.add.image(400, 300, 'block');

        this.add.image(600, 300, 'block');

        this.tweens.add({
            targets: shader2,
            scaleX: 4,
            scaleY: 4,
            repeat: -1,
            yoyo: true,
            duration: 2000
        });

        this.input.on('pointermove', function (pointer)
        {

            shader2.setPosition(pointer.x, pointer.y);
        });
    }
}

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

const game = new Phaser.Game(config);

More in Shaders5 examples

Shader and Camera MaskingDemonstrates applying different masks to both the main camera and an individual shader object simultaneously, while passing time uniforms to the fragment shader.

Shader Uniforms and AnimationDemonstrates how to load a custom fragment shader and pass dynamic data, such as time, to it using the setupUniforms callback.

Shader with Bitmap MaskDemonstrates applying an image-based bitmap mask to a shader. The example features a dynamic fragment shader that follows the mouse pointer while being constrained to the shape of a mask.

GLSL Shader with Camera MaskDemonstrates applying a GLSL fragment shader to the background with real-time uniform updates while using internal camera filters to add a grunge mask effect.