Texture rendering

--- name: render-textures description: "Use this skill when using RenderTexture or DynamicTexture in Phaser 4. Covers drawing game objects to textures, dynamic texture creation, snapshot/screenshot, stamps, and off-screen rendering. Triggers on: RenderTexture, DynamicTexture, snapshot, draw to texture, stamp." --- # 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 ``js // 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: | | RenderTexture | DynamicTexture | |---|---|---| | What it is | Image game object + auto-created DynamicTexture | Texture in the Texture Manager | | Created via | this.add.renderTexture(x, y, w, h) | this.textures.addDynamicTexture(key, w, h) | | Visible on its own | Yes (it extends Image) | No (must be assigned to a game object) | | Shared across objects | Possible via saveTexture(key) | Yes, by key | | Cross-scene use | No (belongs to one Scene) | Yes (textures are global) | | Has position/scale/alpha | Yes (all Image components) | No (it is a Texture, not a GameObject) | **When to use which:** - Use **RenderTexture** when you need a single visible surface you draw onto (paint canvas, trail effect, composite sprite). - Use **DynamicTexture** when many game objects share the same generated texture, or you need a texture for masks/shaders, or you need cross-scene access. RenderTexture is a thin proxy. Methods like draw(), stamp(), fill(), clear(), erase(), snapshot() all delegate to its underlying this.texture (a DynamicTexture). **Origin note:** RenderTexture extends Image, so its origin defaults to (0.5, 0.5). If you want top-left positioning (common for full-screen or minimap RTs), call rt.setOrigin(0, 0). ### The Command Buffer (v4 Architecture) In Phaser 4, drawing calls (draw, stamp, fill, clear, erase, repeat, capture) do **not** execute immediately. They push commands into a commandBuffer array. You must call .render() to flush and execute the buffer. `js rt.clear(); rt.fill(0x000000); rt.draw(sprite, 128, 128); rt.render(); // REQUIRED -- nothing appears without this ` For RenderTexture game objects, the renderMode property controls automatic rendering: | Mode | Behavior | |---|---| | 'render' (default) | Draws the texture contents to the frame each tick. You call render() manually when content changes. | | 'redraw' | Calls render() automatically every frame but does NOT display itself. Useful for textures reused by other objects. | | 'all' | Calls render() every frame AND draws itself to the frame. | `js rt.setRenderMode('all'); // auto-render + display every frame rt.setRenderMode('all', true); // same, plus preserve the command buffer ` ### Preserve Mode By default the command buffer clears after render(). Call preserve(true) to keep commands between renders, so the same drawing replays each frame: `js rt.preserve(true); rt.clear(); rt.draw(sprite); // On every subsequent render(), clear + draw will repeat ` ### Stamp Game Object Stamp (this.add.stamp(x, y, texture, frame)) is a lightweight Image subclass that ignores camera scroll and transform during rendering. It is used internally by DynamicTexture for drawing operations and is also useful for HUD elements. It extends Image with custom render nodes (DefaultStampNodes). ### The stamp() Method vs the Stamp Game Object These are different things: - **rt.stamp(key, frame, x, y, config)** -- a method on RenderTexture/DynamicTexture that draws a texture frame to the surface with transform options (alpha, tint, angle, scale, origin, blendMode). - **this.add.stamp(x, y, texture, frame)`** -- a factory that creates