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 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. 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. 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: 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 a Stamp game object added to the Scene display list. Common Patterns Drawing Sprites and Game Objects The draw() method accepts: renderable game objects, Groups, Containers, Display Lists, other RenderTextures/DynamicTextures, Texture Frames, texture key strings, or arrays of any of these. Note: alpha and tint parameters on draw() only apply to Texture Frames/strings. Game objects use their own alpha and tint when drawn. Stamping Textures with Config The stamp() method draws a texture frame with full transform control. The frame is centered on the x/y position by default (origin 0.5). Capture Drawing with Overrides (v4) The capture() method draws a game object with temporary property overrides, restoring originals afterward: This is useful for drawing an object at a different position/scale without modifying the object itself. Filling and Clearing Erasing Erase uses ERASE blend mode to cut holes in the texture: Repeating / Tiling a Texture Snapshots (Pixel Capture) Snapshots read pixel data from the framebuffer. They are expensive and blocking use sparingly. Using as a Texture Source for Other Objects For DynamicTexture, the key is set at creation time: Procedural Generation Minimap Pattern Callbacks in the Command Buffer Insert logic between draw commands that executes during render() : Resizing Internal Camera Both RenderTexture and DynamicTexture have a .camera property that controls how game objects are positioned when drawn. Scroll, zoom, and rotate this camera to transform drawn content. Note: stamp() ignores the camera; only draw() and game object rendering respect it. API Quick Reference RenderTexture (extends Image) Method Signature Description draw (entries, x?, y?, alpha?, tint?) Draw game objects, textures, groups, etc. capture (entry, config) Draw with temporary property overrides stamp (key, frame?, x?, y?, config?) Stamp a texture frame with transform erase (entries, x?, y?) Draw using ERASE blend mode fill (rgb, alpha?, x?, y?, w?, h?) Fill with color clear (x?, y?, w?, h?) Clear to transparent repeat (key, frame?, x?, y?, w?, h?, config?) Tile a texture as fill pattern render () Flush the command buffer preserve (bool) Keep command buffer between renders callback (fn) Insert callback into command buffer resize (w, h?, forceEven?) Resize (erases content) saveTexture (key) Register in Texture Manager setRenderMode (mode, preserve?) Set 'render', 'redraw', or 'all' snapshot (callback, type?, quality?) Full snapshot to Image snapshotArea (x, y, w, h, callback, type?, quality?) Area snapshot snapshotPixel (x, y, callback) Single pixel to Color DynamicTexture (extends Texture) Same drawing methods as RenderTexture ( draw , stamp , erase , fill , clear , repeat , capture , render , preserve , callback , snapshot , snapshotArea , snapshotPixel ), plus: Method/Property Description setSize(w, h?, forceEven?) Resize the texture camera Internal Camera for draw positioning commandBuffer Array of pending draw commands drawingContext WebGL DrawingContext with framebuffer getWebGLTexture() Returns the underlying WebGLTextureWrapper StampConfig (for stamp() config parameter) Property Default Description alpha 1 Alpha value tint 0xffffff Tint color (WebGL only) angle 0 Degrees (overrides rotation if non zero) rotation 0 Radians scale 1 Uniform scale scaleX / scaleY 1 Per axis scale (overrides scale ) originX / originY 0.5 Origin point blendMode 0 Blend mode CaptureConfig (for capture() config parameter) Property Description transform 'local' , 'world' , or a TransformMatrix camera Camera override for rendering x , y , alpha , tint , angle , rotation Override game object properties temporarily scale , scaleX , scaleY Scale overrides originX , originY , blendMode Additional overrides Factory Methods Gotchas 1. Must call render() . In Phaser 4, drawing methods buffer commands. Nothing appears until render() is called (unless using renderMode: 'all' or 'redraw' ). 2. Cannot draw to itself. A DynamicTexture/RenderTexture silently skips entries that reference itself. 3. Command buffer clears after render. Call preserve(true) before drawing if you need the same commands to replay each frame. 4. stamp() ignores the internal camera. Only game objects drawn via draw() or capture() respect the .camera property. Texture stamps are positioned absolutely. 5. Default sizes differ. RenderTexture defaults to 32x32. DynamicTexture defaults to 256x256. 6. forceEven rounds dimensions up. By default, width/height are rounded to even numbers for rendering quality. Pass false as the last argument if you need exact odd dimensions. 7. Snapshots are expensive. They use readPixels (WebGL) which blocks the GPU pipeline. Avoid per frame snapshots. snapshotPixel is cheaper than full snapshot . 8. WebGL1 has no anti aliasing on framebuffers. Shapes and Graphics drawn to a RenderTexture may have jagged edges. Use pre rendered sprite textures instead. 9. resize() erases content. Resizing destroys and recreates the framebuffer. 10. saveTexture renames, does not copy. Calling saveTexture(key) assigns the DynamicTexture to the Texture Manager under that key. Calling it again with a different key renames it. Destroying the RenderTexture without saving first destroys the texture. 11. draw() alpha/tint params only affect Texture Frames. When drawing game objects, they use their own alpha and tint values. The alpha and tint parameters on draw() only apply when drawing texture strings or Frame instances. 12. WebGL context loss. DynamicTexture contents are lost on context loss. Listen for the restorewebgl event to redraw. 13. Groups/Containers: x, y offset is additive. When drawing a Group or Container with rt.draw(group, x, y) , the x/y offset is added to each child's position. Children at (100, 50) drawn with offset (10, 10) appear at (110, 60) in the texture. Source File Map File Description src/gameobjects/rendertexture/RenderTexture.js RenderTexture game object (extends Image, proxies to DynamicTexture) src/gameobjects/rendertexture/RenderTextureFactory.js this.add.renderTexture() factory registration src/gameobjects/rendertexture/RenderTextureRender.js WebGL/Canvas render functions for RenderTexture src/gameobjects/rendertexture/RenderTextureRenderModes.js Enum: RENDER , REDRAW , ALL src/textures/DynamicTexture.js Core DynamicTexture class (command buffer, drawing, snapshots) src/textures/DynamicTextureCommands.js Command constants (CLEAR, FILL, STAMP, DRAW, ERASE, etc.) src/textures/typedefs/StampConfig.js StampConfig typedef for stamp() src/textures/typedefs/CaptureConfig.js CaptureConfig typedef for capture() src/gameobjects/stamp/Stamp.js Stamp game object (light Image, ignores camera scroll) src/gameobjects/stamp/StampFactory.js this.add.stamp() factory registration

render-textures