skills.rest
AmirOssanloo
AmirOssanlooCOMMUNITY
Explore all skills by this author →
GitHub

filters-and-postfx

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

Updated Sep 20, 2026
Search Tags:#game development#filters#shaders#webgl#visual effects#post-processing#phaser 4
One-click install
npx skills add https://github.com/AmirOssanloo/helix-game --skill filters-and-postfx-amirossanloo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: filters-and-postfx
Source: https://github.com/AmirOssanloo/helix-game/tree/main/.claude/skills/filters-and-postfx
Command: npx skills add https://github.com/AmirOssanloo/helix-game --skill filters-and-postfx-amirossanloo

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 and masks from v3. ## Core Features & Use Cases - Filter Application: Add built-in filters such as blur, glow, vignette, color matrix, displacement, and barrel distortion to game objects via enableFilters() or directly to cameras. - Custom Effects and Transitions: Build bloom with ParallelFilters, create wipe/reveal transitions, and implement texture or game object masks through the unified filter system. - Use Case: When porting a Phaser 3 game that used preFX/postFX bloom, use this Skill to rebuild the effect with ParallelFilters (Threshold + Blur + ADD blend) and update all mask calls to the new filter-based API. ## Quick Start Add a glow effect to my player sprite and a blur to the main camera in my 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). Game objects require enableFilters() before accessing filters, while cameras have filters available by default.

How to create a bloom effect in Phaser 4?▼

Phaser 4 has no dedicated Bloom filter. Build bloom with ParallelFilters: add a Threshold and Blur to the top path, then set the blend mode to ADD. Alternatively, use Phaser.Actions.AddEffectBloom to automate the process.

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

Internal filters apply before the camera transform in object-local space and are cheaper; external filters apply after the transform in screen space and are full-screen. A blur that should rotate with an object must be internal.

Do Phaser 4 filters work with the Canvas renderer?▼

No, filters are WebGL only. The enableFilters() method returns early if WebGL is unavailable, so games targeting Canvas cannot use the filter pipeline.

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

Replace gameObject.preFX with filters.internal and postFX with filters.external. Masks set via setMask() become filters.internal.addMask(), and bloom is rebuilt with ParallelFilters instead of FX.addBloom().

Why is my Phaser 4 filter hurting performance?▼

Each object with active filters adds extra draw calls: one base render plus one per filter. Prefer internal filters over full-screen external ones, disable unused filters with setActive(false), and performance test early.

Related Skills

Explore More Software Engineering Skills→
phaserjsphaserjs
40.1k

filters-and-postfx

Apply GPU-based visual filters and post-processing effects to Phaser 4 scenes.

Official
Advanced
mudman1986mudman1986

filters-and-postfx

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

Community
Intermediate
radical-beardradical-beard

camera-system

Manage 3D camera behavior in the Bestow game engine.

Community
Intermediate
ayofemiadeayofemiade

pixijs-2d

Create WebGL-accelerated 2D graphics, particle systems, and interactive canvas applications with PixiJS.

Community
Advanced