filters-and-postfx

Applies GPU-based visual filters and post-processing effects to Phaser 4 game objects and cameras.

2|10|Updated Jul 28, 2026
One-click install
npx skills add https://github.com/kodingvibes/gamejam-2026 --skill filters-and-postfx-kodingvibes
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: filters-and-postfx
Source: https://github.com/kodingvibes/gamejam-2026/tree/main/participantes/jpyunism/.agents/skills/filters-and-postfx
Command: npx skills add https://github.com/kodingvibes/gamejam-2026 --skill filters-and-postfx-kodingvibes

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Phaser 4 replaced the v3 FX system with a new filter pipeline, and developers need accurate guidance on enabling filters, choosing between internal and external filter lists, and migrating effects like bloom that no longer have dedicated filters. ## Core Features & Use Cases - Filter Application: Add blur, glow, vignette, color matrix, displacement, barrel distortion, and 20+ other built-in filters to game objects and cameras via FilterList factory methods. - Masks and Transitions: Implement alpha masks from textures or game objects and animated wipe/reveal transitions driven by tweens. - Custom Bloom and Compositing: Build bloom effects with ParallelFilters (Threshold + Blur + ADD blend) and capture scene regions with CaptureFrame. - Use Case: You want a glowing enemy sprite and a sepia-graded camera in your Phaser 4 game. This Skill shows you to call enableFilters() on the sprite, add a Glow filter, and apply a ColorMatrix sepia preset to the camera's internal filter list. ## Quick Start Ask the AI to add a glow effect to a sprite and a blur to the main camera in your Phaser 4 scene.

Frequently Asked Questions about filters-and-postfx

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

FAQPage Schema
How do I add a glow effect to a sprite in Phaser 4?▼

Call sprite.enableFilters() first, then use sprite.filters.internal.addGlow(color, outerStrength, innerStrength). Cameras have filters enabled by default, but game objects require the explicit enableFilters() call before accessing the filters property.

How do I create a bloom effect in Phaser 4?▼

Phaser 4 has no dedicated Bloom filter. Use ParallelFilters with a Threshold and Blur on the top path and an ADD blend mode, or call Phaser.Actions.AddEffectBloom to automate the same setup.

What is the difference between internal and external filters in Phaser 4?▼

Internal filters run before the camera transform in object-local space and only cover the object region, making them cheaper. External filters run after the transform in screen space and are full-screen, so effects stay screen-aligned regardless of object rotation.

Do Phaser 4 filters work with the Canvas renderer?▼

No, filters are WebGL only. The enableFilters() method returns early when WebGL is unavailable, so games falling back to Canvas rendering will not display any filter effects.

Why is my Phaser 4 filter not showing on a game object?▼

The most common cause is forgetting to call enableFilters() on the game object before accessing its filters property. Also verify the filter's active property is true and that the game is running with the WebGL renderer.

How do I migrate from Phaser 3 preFX and postFX to Phaser 4?▼

Replace gameObject.preFX and postFX with gameObject.filters.internal and filters.external, and camera.postFX with camera.filters lists. Masks set via setMask() become addMask() filter calls, and bloom is rebuilt with ParallelFilters.