Use this skill when learning about new features, game objects, components, and rendering capabilities added in Phaser 4. Covers Filters, RenderNodes, CaptureFrame, Gradient, Noise, SpriteGPULayer, TilemapGPULayer, Lighting component, RenderSteps, and new tint modes. Triggers on: new in v4, Phaser 4

Phaser 4 New Features New features and capabilities in Phaser 4: Filters (replacing FX/BitmapMask), RenderNodes (replacing Pipelines), CaptureFrame, Gradient, Noise game objects, SpriteGPULayer, TilemapGPULayer, Lighting component, RenderSteps, and new tint modes. Related skills: ../v3 to v4 migration/SKILL.md, ../filters and postfx/SKILL.md, ../game object components/SKILL.md, ../tilemaps/SKILL.md Migrating from v3? See the [v3 to v4 Migration Guide](../v3 to v4 migration/SKILL.md) for step by step code changes, removed APIs, and a migration checklist. Overview: What Changed in v4 Phaser 4 is a complete overhaul of the WebGL rendering engine. The v3 renderer let each subsystem manage WebGL state independently, causing conflicts (e.g. certain FX breaking Masks). v4 centralizes WebGL state management through a RenderNode graph, where each node handles exactly one rendering task. Key Removals v3 Feature v4 Replacement Pipeline RenderNode (per task rendering nodes) FX ( preFX / postFX ) Filters ( filters.internal / filters.external ) BitmapMask FilterMask (via filters system) GeometryMask (WebGL) FilterMask (Canvas still uses GeometryMask) Derived FX: Bloom, Circle, Gradient, Shine Actions ( AddEffectBloom , AddEffectShine , AddMaskShape ) or GameObjects Mesh and Plane Removed (proper 3D planned for future) Point Use Vector2 instead Key Additions New GameObjects : CaptureFrame , Gradient , Noise , NoiseCell2D/3D/4D , NoiseSimplex2D/3D , SpriteGPULayer , Stamp , TilemapGPULayer New Components : Lighting , RenderSteps , RenderNodes New Tint Modes : MULTIPLY , FILL , ADD , SCREEN , OVERLAY , HARD LIGHT New Filters : Blend, Blocky, CombineColorMatrix, GradientMap, ImageLight, Key, Mask, NormalTools, PanoramaBlur, ParallelFilters, Quantize, Sampler, Threshold GL Orientation : v4 uses standard GL orientation (Y=0 at bottom for textures) Filters System (Replacing FX and BitmapMask) Full reference: filters and postfx.md Filters unify the v3 FX and Mask systems. Every filter takes an input image and produces an output image via a shader pass. Filters can be applied to any game object or camera v3 had restrictions on which objects supported FX. Internal vs External : Internal filters run before the camera transform (object local space, cheaper). External filters run after (screen space, full resolution). RenderNodes (Replacing Pipelines) In v3, a Pipeline was a rendering system that often handled multiple responsibilities. In v4, each RenderNode handles a single rendering task via its run() method. Some nodes also have a batch() method to accumulate state before drawing. Architecture The RenderNodeManager (on the WebGL renderer) owns all render nodes. Game objects reference nodes through role based maps. Setting Custom RenderNodes Built in RenderNode Types Batch Handlers (accumulate and draw multiple objects per draw call): BatchHandlerQuad standard quad batching (Image, Sprite, BitmapText, etc.) BatchHandlerQuadSingle single quad variant BatchHandlerTileSprite TileSprite batching BatchHandlerTriFlat flat triangle batching (Graphics, Shape) BatchHandlerPointLight point light batching BatchHandlerStrip triangle strip batching Submitters (coordinate rendering per object type): SubmitterQuad , SubmitterTile , SubmitterTileSprite SubmitterSpriteGPULayer , SubmitterTilemapGPULayer Transformers (compute vertex positions): TransformerImage , TransformerStamp , TransformerTile , TransformerTileSprite Texturers (manage texture binding): TexturerImage , TexturerTileSprite Filters (post processing see filters and postfx.md ): BaseFilter , BaseFilterShader FilterBarrel , FilterBlend , FilterBlocky , FilterBlur (Low/Med/High variants) FilterBokeh , FilterColorMatrix , FilterCombineColorMatrix FilterDisplacement , FilterGlow , FilterGradientMap , FilterImageLight FilterKey , FilterMask , FilterNormalTools , FilterPanoramaBlur FilterParallelFilters , FilterPixelate , FilterQuantize FilterSampler , FilterShadow , FilterThreshold , FilterVignette , FilterWipe Other : Camera , FillCamera , FillRect , FillPath , FillTri DrawLine , StrokePath , ShaderQuad ListCompositor , RebindContext , YieldContext DynamicTextureHandler Extending: Custom RenderNodes New Game Objects CaptureFrame Captures the current framebuffer contents to a texture at the point in the display list where it sits. Does not render anything itself. WebGL only. Key details: Requires camera.setForceComposite(true) or a framebuffer context (Filters, DynamicTexture, camera with partial alpha) Inside a Container with filters, captures only that Container's contents Setting visible = false stops capturing Components: BlendMode, Depth, RenderNodes, Visible Source : src/gameobjects/captureframe/CaptureFrame.js Gradient Displays GPU rendered color gradients. Extends Shader . Supports linear, radial, and other shape modes with configurable ColorRamp containing ColorBand objects. Key details: Config: GradientQuadConfig with bands , shapeMode , repeatMode , start , shape , dither Colors defined via ColorRamp with ColorBand objects (supports HSV, various interpolation modes) Call gradient.ramp.encode() after modifying ramp data at runtime Source : src/gameobjects/gradient/Gradient.js Noise Game Objects All noise types extend Shader and are WebGL only. Six variants available: Type Factory Description Noise this.add.noise() White noise (random hash based) NoiseCell2D this.add.noiseCell2D() 2D cellular/Worley/Voronoi noise NoiseCell3D this.add.noiseCell3D() 3D cellular noise (Z axis slicing for animation) NoiseCell4D this.add.noiseCell4D() 4D cellular noise (Z+W axis slicing) NoiseSimplex2D this.add.noiseSimplex2D() 2D simplex/gradient noise (clouds, fire, water) NoiseSimplex3D this.add.noiseSimplex3D() 3D simplex noise Common properties across noise types: noiseOffset [x, y] array to scroll the pattern noisePower sculpt output levels (higher suppresses high values) noiseNormalMap output normal map (for lighting integration) noiseIterations detail level (cellular/simplex types) Math equivalents : Phaser.Math.Hash() , Phaser.Math.HashCell() , Phaser.Math.HashSimplex() Source : src/gameobjects/noise/ SpriteGPULayer Renders very large numbers of quads (up to millions) in a single draw call by storing data in a static GPU buffer. Up to 100x faster than individual sprites. WebGL only. Key details: Single texture only (no multi atlas), single image per layer Members support tween like animations (fade, bounce, wave, color shift) defined at creation Updating buffer contents is expensive populate once, leave unchanged Power of two textures recommended for pixel art to avoid seaming "Remove" members visually by setting scaleX/scaleY/alpha to 0 (avoids buffer rebuild) Components: Alpha, BlendMode, Depth, ElapseTimer, Lighting, Mask, RenderNodes, TextureCrop, Visible Source : src/gameobjects/spritegpulayer/SpriteGPULayer.js New Components Full component reference: game object components.md Lighting Component Replaces the v3 approach of assigning a lighting pipeline. WebGL only. Supported on : BitmapText, Blitter, Graphics, Shape, Image, Sprite, Particles, SpriteGPULayer, Stamp, Text, TileSprite, Video, TilemapLayer, TilemapGPULayer. Batching note : Lighting changes the shader, which breaks batches. Group lit objects together and unlit objects together for best performance. Source : src/gameobjects/components/Lighting.js RenderSteps Component Allows injecting custom logic into the render process of a game object. WebGL only. The Filters system uses RenderSteps internally. Key details: Steps are stored in renderSteps array, executed via renderWebGLStep() First step runs first and is responsible for calling subsequent steps This is how Filters defer and control the renderWebGL flow Source : src/gameobjects/components/RenderSteps.js RenderNodes Component Provides defaultRenderNodes , customRenderNodes , and renderNodeData maps on game objects. See the RenderNodes section above for usage. Source : src/gameobjects/components/RenderNodes.js TilemapGPULayer Full tilemap reference: tilemaps.md High performance GPU based tilemap rendering. Renders the entire layer as a single quad via a specialized shader. WebGL only. Capabilities: Single tileset with single texture image Maximum 4096x4096 tiles, up to 2^23 unique tile IDs Tile flipping and animation supported Orthographic tilemaps only (no isometric/hexagonal) Perfect texture filtering in LINEAR mode (no tile seams) Cost is per pixel, not per tile no performance loss with many visible tiles Restrictions: Cannot use multiple tilesets Editing requires manual generateLayerDataTexture() call to update Orthographic only Internal data : Tile data stored in a texture (4 bytes/tile: 2 flip bits, 1 animation bit, 1 unused, 28 bit tile index). Animation data in a separate texture. Source : src/tilemaps/TilemapGPULayer.js For detailed configuration options, API reference tables, and source file maps, see [the reference guide](references/REFERENCE.md).

v4-new-features