Render Scene to Texture

Captures a Container and its contents into a RenderTexture, saves it as a named texture, and displays it back on screen to create a recursive visual effect.

Render Scene to Texture, running
1280 × 720
GitHub
// Render a scene to a DynamicTexture.
class Example extends Phaser.Scene
{
    displayTexture;
    container;

    preload()
    {
        this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
        this.load.image('monitor', 'assets/pics/monitor.png');
    }

    create ()
    {
        const sceneRenderTexture = this.add.renderTexture(640, 360, 1280, 720);

        // Texture to copy the scene render, preventing feedback loops.
        const displayTexture = this.add.renderTexture(0, 0, 1280, 720)
            .setScale(0.7)
            .setTint(0xf0f8ff);
        this.displayTexture = displayTexture;

        const monitor = this.add.image(0, 0, 'monitor');

        const container = this.add.container(
            640, 360,
            [ displayTexture, monitor ]
        );
        this.container = container;

        sceneRenderTexture
            .draw(container)
            .preserve(true)
            .setRenderMode('redraw')
            .saveTexture('sceneTexture');

        displayTexture
            .draw('sceneTexture', sceneRenderTexture.x, sceneRenderTexture.y)
            .preserve(true)
            .setRenderMode('all');
    }

    update (time, delta)
    {
        this.displayTexture
            .setRotation(Math.sin(time / 1000) * 0.1)
            .setPosition(Math.sin(time / 1111) * 10, Math.cos(time / 987) * 10)
            .setScale(0.7 + Math.sin(time / 1234) * 0.1);

        this.container
            .setRotation(Math.sin(time / 1010) * 0.1);
    }
}

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

const game = new Phaser.Game(config);

More in Render Texture45 examples