Shader Transforms

Learn how to manipulate a Shader Game Object using standard properties such as scale, rotation, and position, including how to apply tweens to them.

800 × 600

GitHub

class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
        this.load.glsl('marble', 'assets/shaders/marble.frag');
        this.load.image('bird', 'assets/pics/birdy.png');
    }

    create ()
    {
        this.add.image(400, 600, 'bird').setOrigin(0.5, 1);

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


        this.input.once('pointerdown', function ()
        {

            this.tweens.add({
                targets: shader,
                props: {
                    scaleX: { value: 0.2, duration: 4000 },
                    scaleY: { value: 0.2, duration: 4000 },
                    angle: { value: 360, duration: 2000 },
                    y: { value: 100, duration: 1000 }
                },
                ease: 'Sine.easeInOut',
                yoyo: true,
                repeat: -1
            });

        }, this);
    }
}

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

const game = new Phaser.Game(config);

More in Shaders15 examples

Shader Using an Updating Dynamic TextureThis example demonstrates how to use a Dynamic Texture as a sampler input for a fragment shader, allowing you to feed live-rendered graphics directly into a shader effect.

Shader with Dynamic Texture InputThis example demonstrates how to create a Dynamic Texture, draw images onto it, and then use that texture as a sampler input for a fragment shader.

Using a Shader as a BufferDemonstrates how to render a shader's output directly to a texture and use that texture as a sampler input for another shader.

Basic Texture ShaderDemonstrates how to create a custom shader that accepts an image texture as a uniform and applies it using texture coordinates.