v4-new-features

Documents Phaser 4 rendering features including Filters, RenderNodes, GPU layers, and new game objects.

Updated Jul 13, 2026
One-click install
npx skills add https://github.com/russellmorgan/UnderConstruction --skill v4-new-features-russellmorgan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: v4-new-features
Source: https://github.com/russellmorgan/UnderConstruction/tree/main/.claude/skills/v4-new-features
Command: npx skills add https://github.com/russellmorgan/UnderConstruction --skill v4-new-features-russellmorgan

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Phaser 4 replaces the v3 rendering engine with a centralized RenderNode graph, leaving developers unsure how to use new APIs like Filters, RenderNodes, CaptureFrame, Gradient, Noise, SpriteGPULayer, TilemapGPULayer, and the Lighting component. ## Core Features & Use Cases - Filters and RenderNodes guidance: Explains how Filters replace v3 FX/BitmapMask and how RenderNodes replace Pipelines, with code examples for internal/external filters and custom render node roles. - New game object references: Covers CaptureFrame, Gradient, six Noise variants, SpriteGPULayer for millions of quads in one draw call, and TilemapGPULayer for GPU tilemap rendering. - Component and tint documentation: Details the Lighting, RenderSteps, and RenderNodes components plus new tint modes like FILL, ADD, SCREEN, and HARD_LIGHT. - Use Case: A developer building a Phaser 4 game wants to render a large particle field efficiently; the skill shows how to use SpriteGPULayer with a static GPU buffer instead of thousands of individual sprites. ## Quick Start Ask how to render thousands of sprites efficiently in Phaser 4 or how the new Filters system replaces v3 postFX.

Frequently Asked Questions about v4-new-features

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What is new in Phaser 4 compared to Phaser 3?▼

Phaser 4 overhauls the WebGL renderer with a RenderNode graph, replaces FX and BitmapMask with a unified Filters system, and adds game objects like CaptureFrame, Gradient, Noise variants, SpriteGPULayer, and TilemapGPULayer plus new tint modes.

How do I render thousands of sprites in Phaser 4?▼

Use SpriteGPULayer, which renders up to millions of quads in a single draw call via a static GPU buffer. Populate members once at creation since buffer updates are expensive, and hide members by setting scale or alpha to zero.

How do Phaser 4 Filters replace postFX and BitmapMask?▼

Call enableFilters() on a game object, then use filters.internal for object-local effects or filters.external for screen-space effects. Masks are added via filters.internal.addMask(image), replacing the v3 BitmapMask class.

Does TilemapGPULayer support isometric tilemaps?▼

No, TilemapGPULayer supports orthographic tilemaps only, with a single tileset and texture image. It supports up to 4096x4096 tiles, tile flipping, and animation, but edits require a manual generateLayerDataTexture() call.

Why did setTintFill stop working in Phaser 4?▼

In Phaser 4, setTintFill() is a deprecated no-op that logs a console error. Use setTint() to set the color and setTintMode(Phaser.TintModes.FILL) to set the mode separately.

How do I enable lighting on sprites in Phaser 4?▼

Call sprite.setLighting(true) instead of the v3 setPipeline('Light2D') approach. Self-shadowing is enabled with setSelfShadow(enabled, penumbra, diffuseFlatThreshold), and lighting works on most game objects including SpriteGPULayer and TilemapGPULayer.