skills.rest
travispwingo
travispwingoCOMMUNITY
Explore all skills by this author →
GitHub

v4-new-features

Documents new game objects, components, and rendering features introduced in Phaser 4.

Updated May 7, 2021
Search Tags:#game development#javascript#filters#webgl#spritegpulayer#phaser 4#rendernode
One-click install
npx skills add https://github.com/travispwingo/travispwingo.github.io --skill v4-new-features-travispwingo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: v4-new-features
Source: https://github.com/travispwingo/travispwingo.github.io/tree/main/mario/docs/skills/v4-new-features
Command: npx skills add https://github.com/travispwingo/travispwingo.github.io --skill v4-new-features-travispwingo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Phaser 4 replaces the v3 rendering architecture (Pipelines, FX, BitmapMask) with a new RenderNode graph and Filters system, and developers need a single reference covering every new game object, component, and tint mode to write correct v4 code. ## Core Features & Use Cases - New Game Objects: Covers CaptureFrame, Gradient, six Noise variants, SpriteGPULayer, and TilemapGPULayer with working code examples and configuration details. - New Components: Explains the Lighting, RenderSteps, and RenderNodes components that replace v3 pipeline-based lighting and rendering hooks. - Filters and RenderNodes: Documents the Filters system replacing FX/BitmapMask and the RenderNode architecture replacing Pipelines, including custom node registration. - Use Case: A developer wants to render millions of sprites efficiently in Phaser 4; this Skill shows how to use SpriteGPULayer with a single GPU buffer and explains its batching and lighting constraints. ## Quick Start Explain how to use the new Phaser 4 Gradient game object with a radial color ramp and animated offset.

Frequently Asked Questions about v4-new-features

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

FAQPage Schema
What new game objects were added in Phaser 4?▼

Phaser 4 adds CaptureFrame, Gradient, six Noise variants (white, cellular 2D/3D/4D, simplex 2D/3D), SpriteGPULayer, Stamp, and TilemapGPULayer. Most extend Shader and are WebGL only, with SpriteGPULayer rendering millions of quads in one draw call.

How do I replace Phaser 3 FX and pipelines in Phaser 4?▼

Phaser 4 replaces preFX/postFX with the Filters system via sprite.enableFilters() and filters.internal or filters.external, and replaces Pipelines with single-task RenderNodes. BitmapMask is replaced by FilterMask through filters.internal.addMask().

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

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

Does SpriteGPULayer support multiple textures or atlases?▼

No, SpriteGPULayer supports only a single texture with a single image per layer, no multi-atlas. Members should be added all at once since updating the GPU buffer is expensive, and removal is simulated by setting scale or alpha to zero.

What are the limitations of TilemapGPULayer in Phaser 4?▼

TilemapGPULayer supports only orthographic tilemaps with a single tileset and single texture, up to 4096x4096 tiles. Editing tiles at runtime requires a manual generateLayerDataTexture() call to update the data texture.

What tint modes are available in Phaser 4?▼

Phaser 4 separates tint color from tint mode via setTintMode() and offers MULTIPLY, FILL, ADD, SCREEN, OVERLAY, HARD_LIGHT, and MULTIPLY_TWO. The v3 setTintFill() method is a deprecated no-op that only logs a console error.

Related Skills

Explore More Software Engineering Skills→
ArtRivArtRiv

v3-to-v4-migration

Maps Phaser 3 APIs and workflows to Phaser 4 equivalents for migration planning and execution.

Community
Advanced
phaserjsphaserjs
40.1k

groups-and-containers

Organize Phaser 4 game objects with Groups and Containers.

Official
Intermediate
ArtRivArtRiv

filters-and-postfx

Apply Phaser 4 GPU filters to objects and cameras for post-processing effects.

Community
Intermediate
WanderTheWeebWanderTheWeeb
1

v4-new-features

Explain Phaser 4 rendering architecture and GPU game objects for migration.

Community
Intermediate