V4 New Features

This covers the architectural overhaul in Phaser 4, focused on the new RenderNode system that replaced v3's Pipeline approach and the Filters system that unified FX and masking. You'll want this when you're working with any of the new game objects like CaptureFrame, Gradient, Noise, or the GPU-optimized SpriteGPULayer and TilemapGPULayer. It also documents the new Lighting component, expanded tint modes, and the shift to standard GL orientation. The skill clearly separates new features from migration concerns, which live in a separate v3-to-v4 guide. Most useful when you're exploring what's actually possible in v4 rather than just porting old code.

skills.sh installs: 1.1K
GitHub stars: 40.7K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add phaserjs/phaser --skill v4-new-features --agent claude-code

Installs into .claude/skills of the current project.

Files

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 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.