v3-to-v4-migration

Migrates Phaser 3 game code to Phaser 4 by mapping breaking API changes and replacements.

Updated May 7, 2021
One-click install
npx skills add https://github.com/travispwingo/travispwingo.github.io --skill v3-to-v4-migration-travispwingo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: v3-to-v4-migration
Source: https://github.com/travispwingo/travispwingo.github.io/tree/main/mario/docs/skills/v3-to-v4-migration
Command: npx skills add https://github.com/travispwingo/travispwingo.github.io --skill v3-to-v4-migration-travispwingo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Upgrading a Phaser 3 project to Phaser 4 involves dozens of breaking changes across the renderer, FX system, tinting, cameras, shaders, and geometry APIs, and missing any one of them can silently break a game. This Skill provides a complete, organized reference of every breaking change with before-and-after code examples and a migration checklist. ## Core Features & Use Cases - Renderer migration guidance: Explains the replacement of v3 WebGL pipelines with v4 render nodes, including how to register custom render nodes via RenderConfig. - API change mappings: Provides side-by-side v3/v4 code conversions for filters (replacing FX and BitmapMask), the tint system, camera matrices, DynamicTexture, shaders, lighting, and the Point-to-Vector2 geometry migration. - Removal inventory and checklist: Catalogs removed game objects (Mesh, Plane), plugins (Camera3D, Spine bundles), utilities (Create.GenerateTexture, polyfills), and ends with a 26-item actionable migration checklist. - Use Case: A developer upgrading an existing Phaser 3 game asks why sprite.setTintFill() no longer works; the Skill explains the new setTint().setTintMode(Phaser.TintModes.FILL) pattern and flags related tint behavior changes. ## Quick Start Ask the assistant to migrate your Phaser 3 project to Phaser 4 and walk through the breaking changes affecting your code.

Frequently Asked Questions about v3-to-v4-migration

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

FAQPage Schema
How do I migrate a Phaser 3 project to Phaser 4?▼

Update to phaser@4, then work through the breaking changes: replace custom pipelines with render nodes, convert FX and BitmapMask usage to filters, update tint and camera code, and swap Geom.Point for Vector2. The Skill provides a 26-item checklist to track progress.

What replaced Phaser 3 pipelines in Phaser 4?▼

The v3 Pipeline system was replaced by the RenderNode architecture, where each node handles a single rendering task. Custom pipelines must be rewritten as render nodes and registered via RenderConfig#renderNodes at boot.

How do I replace setTintFill in Phaser 4?▼

Replace setTintFill(color) with setTint(color).setTintMode(Phaser.TintModes.FILL). The tintFill property and setTintFill method were removed, and Phaser.TintModes now enumerates MULTIPLY, FILL, ADD, SCREEN, OVERLAY, and HARD_LIGHT modes.

Does Phaser 4 still support BitmapMask and FX?▼

No. FX and masks were unified into the Filter system with internal and external filter lists applicable to any game object or camera. BitmapMask was removed; use the Mask filter via sprite.filters.internal.addMask(maskObject) instead.

Why did my compressed textures break after upgrading to Phaser 4?▼

Phaser 4 uses GL texture orientation where Y=0 is at the bottom, unlike v3's top-left orientation. Compressed textures must be re-compressed with a flip-Y option; standard PNG and JPG images are handled automatically.

What happened to Geom.Point in Phaser 4?▼

Geom.Point and all related functions were removed and replaced by Phaser.Math.Vector2. All geometry classes like Circle, Line, and Rectangle now return Vector2 instances, and instanceof checks must be updated accordingly.