render-textures

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 // 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. 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. 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: 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 a Stamp game object added to the Scene display list. Common Patterns Drawing Sprites and Game Objects const rt = this . add . renderTexture ( 0 , 0 , 800 , 600 ); // Single game object at an offset rt. draw (sprite, 100 , 100 ); // Array of objects rt. draw ([sprite1, sprite2, sprite3]); // Group or Container (only visible children are drawn) rt. draw (enemyGroup); rt. draw (myContainer, 50 , 50 ); // offset added to children positions // Entire Scene display list rt. draw ( this . children ); // Texture by string key rt. draw ( 'explosion' , 200 , 200 ); // Don't forget to flush rt. render (); 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). rt. stamp ( 'bullet' , null , 100 , 100 , { alpha : 0.8 , tint : 0xff0000 , angle : 45 , // degrees (takes precedence over rotation) scale : 2 , // uniform scale scaleX : 1.5 , // overrides scale for X scaleY : 0.5 , // overrides scale for Y originX : 0 , // top-left origin originY : 0 , blendMode : 0 }); rt. render (); Capture -- Drawing with Overrides (v4) The capture() method draws a game object with temporary property overrides, restoring originals afterward: rt. capture (player, { x : 64 , y : 64 , scale : 0.5 , alpha : 0.8 , rotation : Math . PI / 4 , transform : 'world' , // 'local', 'world', or a TransformMatrix camera : someCamera // optional camera override }); rt. render (); This is useful for drawing an object at a different position/scale without modifying the object itself. Filling and Clearing // Fill entire texture with color rt. fill ( 0xff0000 ); // solid red rt. fill ( 0x000000 , 0.5 ); // semi-transparent black // Fill a region rt. fill ( 0x00ff00 , 1 , 10 , 10 , 100 , 50 ); // green rect at (10,10) size 100x50 // Clear everything (transparent) rt. clear (); // Clear a region rt. clear ( 10 , 10 , 100 , 50 ); rt. render (); Erasing Erase uses ERASE blend mode to cut holes in the texture: rt. fill ( 0xffffff ); // white background rt. erase (circleSprite, 100 , 100 ); // punch a hole shaped like the sprite rt. render (); Repeating / Tiling a Texture // Fill the entire RenderTexture with a tiled pattern rt. repeat ( 'grass' , null ); // tile the whole surface rt. repeat ( 'brick' , null , 0 , 0 , 256 , 128 ); // tile a specific region rt. repeat ( 'tile' , 'frame2' , 0 , 0 , 512 , 512 , { tileScaleX : 2 , tileScaleY : 2 , tilePositionX : 16 , alpha : 0.8 }); rt. render (); Snapshots (Pixel Capture) Snapshots read pixel data from the framebuffer. They are expensive and blocking -- use sparingly. // Full texture snapshot -- callback receives an HTMLImageElement rt. snapshot ( function ( image ) { document . body . appendChild (image); // or use as texture source }); // Area snapshot rt. snapshotArea ( 0 , 0 , 128 , 128 , function ( image ) { // image is 128x128 region from top-left }, 'image/jpeg' , 0.8 ); // Single pixel -- callback receives a Phaser.Display.Color rt. snapshotPixel ( 64 , 64 , function ( color ) { console . log (color. r , color. g , color. b , color. a ); }); Using as a Texture Source for Other Objects const rt = this . add . renderTexture ( 0 , 0 , 256 , 256 ); rt. draw (complexScene); rt. render (); // Register in the Texture Manager under a key rt. saveTexture ( 'composited' ); // Now any game object can use it this . add . image ( 400 , 300 , 'composited' ); this . add . sprite ( 100 , 100 , 'composited' ); // Updates to the RenderTexture automatically reflect on all users For DynamicTexture, the key is set at creation time: const dt = this . textures . addDynamicTexture ( 'terrain' , 1024 , 1024 ); dt. repeat ( 'grass' , null ); dt. render (); this . add . image ( 512 , 512 , 'terrain' ); // already keyed Procedural Generation const dt = this . textures . addDynamicTexture ( 'starfield' , 800 , 600 ); dt. fill ( 0x000011 ); for ( let i = 0 ; i < 200 ; i++) { const x = Phaser . Math . Between ( 0 , 800 ); const y = Phaser . Math . Between ( 0 , 600 ); const brightness = Phaser . Math . FloatBetween ( 0.3 , 1 ); dt. stamp ( 'star' , null , x, y, { alpha : brightness, scale : Phaser . Math . FloatBetween ( 0.5 , 1.5 ) }); } dt. render (); this . add . image ( 400 , 300 , 'starfield' ); Minimap Pattern create ( ) { // Small RenderTexture as minimap this . minimap = this . add . renderTexture ( 700 , 50 , 150 , 100 ); this . minimap . setScrollFactor ( 0 ); // fixed to camera this . minimap . setRenderMode ( 'all' ); // auto-render every frame this . minimap . preserve ( true ); } // In update or a callback: this . minimap . clear (); this . minimap . fill ( 0x111111 ); // Draw scaled-down versions of world objects this . minimap . capture (player, { x : px * 0.1 , y : py * 0.1 , scale : 0.1 }); // render() is automatic in 'all' mode Callbacks in the Command Buffer Insert logic between draw commands that executes during render() : rt. clear (); rt. draw (background); rt. callback ( () => { // Runs during render, after background is drawn sprite. setTint ( 0xff0000 ); }); rt. draw (sprite); rt. callback ( () => { sprite. setTint ( 0xffffff ); // restore after drawing }); rt. render (); Resizing // Resize erases all content and recreates the framebuffer rt. resize ( 512 , 512 ); // Optional: disable force-even rounding rt. resize ( 513 , 513 , false ); 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. rt. camera . setScroll ( 100 , 50 ); rt. camera . setZoom ( 2 ); rt. draw (sprite); // sprite drawn with camera transform applied rt. render (); 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