Capture Frame as Texture

Demonstrates how to snapshot the current render stage into a texture using captureFrame, then display that texture in other Game Objects with applied filters and transformations.

800 × 600
GitHub
class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
        this.load.image('gradient24', "assets/skies/gradient24.png");
        this.load.image('phaser2', 'assets/sprites/phaser2.png');
    }

    create ()
    {
        this.add.image(400, 300, "gradient24");

        this.sprite = this.add.image(400, 400, "phaser2");
        this.sprite.enableFilters();
        this.glow = this.sprite.filters.internal.addGlow();
        this.glow.setPaddingOverride(null); // Add auto-padding.

        this.add.text(400, 100, "Read me in the cameras", {
            fontSize: 64,
            fontFamily: "Sans-serif",
            color: "#7f00ff",
        }).setOrigin(0.5, 0.5);

        // Capture the current render stage.
        this.cameras.main.setForceComposite(true);
        this.add.captureFrame("capture");
        console.log(this);

        // Display the captured scene.
        // Note, the texture will be the same size as the game,
        // so the "screens" are scaled down here.
        // To capture a different size, you can use the renderTexture method.
        this.camera1 = this.add.image(120, 120, "capture").setScale(0.25).setRotation(-0.1);
        this.camera2 = this.add.image(400, 100, "capture").setScale(0.25);
        this.camera3 = this.add.image(680, 120, "capture").setScale(0.25).setRotation(0.1);

        this.camera1.enableFilters().filters.external.addBlocky(16);
        this.camera2.enableFilters().filters.external.addGlow();
        this.camera3.enableFilters().filters.external.addShadow();
    }

    update (time)
    {
        this.sprite.rotation = Math.sin(time / 1000) * 0.1;
        this.glow.scale = 2 + 2 * Math.sin(time / 123);
        this.camera1.rotation = -0.1 + Math.sin(time / 917) * 0.05;
        this.camera3.scale = 0.25 + Math.sin(time / 1111) * 0.1;
    }
}

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

const game = new Phaser.Game(config);

More in Capture Frame2 examples