render-textures

Render Textures and Dynamic Textures

Drawing game objects to off-screen textures in Phaser 4 -- RenderTexture game object, DynamicTexture for shared textures, the Stamp helper, command-buffer rendering, snapshots, procedural generation, and minimap patterns.

Key source paths: src/gameobjects/rendertexture/, src/textures/DynamicTexture.js, src/gameobjects/stamp/, src/textures/typedefs/StampConfig.js, src/textures/typedefs/CaptureConfig.js Related skills: ../sprites-and-images/SKILL.md, ../loading-assets/SKILL.md, ../cameras/SKILL.md

Quick Start

// In a Scene's create() method:

// 1. RenderTexture -- a visible game object with its own DynamicTexture
const rt = this.add.renderTexture(400, 300, 256, 256);
rt.draw('player', 128, 128);          // draw a texture by key at center
rt.fill(0x222244, 0.5);               // semi-transparent fill
rt.render();                           // flush the command buffer

// 2. DynamicTexture -- a shared texture in the Texture Manager
const dt = this.textures.addDynamicTexture('composite', 512, 512);
dt.stamp('coin', null, 64, 64, { scale: 2, angle: 45 });
dt.render();
this.add.image(400, 300, 'composite'); // any game object can use it

// 3. Stamp game object -- lightweight Image that ignores camera scroll
const hud = this.add.stamp(10, 10, 'heart');

Core Concepts

RenderTexture vs DynamicTexture

Phaser 4 splits texture-drawing into two layers: