skills.rest
mudman1986
mudman1986COMMUNITY
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 Jun 10, 2026
Search Tags:#game development#filters#shaders#webgl#visual effects#phaser#post-processing
One-click install
npx skills add https://github.com/mudman1986/quarterless --skill filters-and-postfx-mudman1986
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: filters-and-postfx
Source: https://github.com/mudman1986/quarterless/tree/main/.github/skills/filters-and-postfx
Command: npx skills add https://github.com/mudman1986/quarterless --skill filters-and-postfx-mudman1986

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 that changed or were removed in v4. ## 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 scene transitions, and use CaptureFrame for scene-level post-processing. - v3 to v4 Migration: Map legacy preFX/postFX calls to the new internal/external FilterList API, including replacements for removed Bloom and Circle effects. - Use Case: While building a Phaser 4 game, you want a glowing pickup item and a sepia-graded camera with a vignette; this Skill provides the exact enableFilters(), addGlow(), addColorMatrix(), and addVignette() calls plus performance guidance on internal versus external filters. ## Quick Start Ask the AI to add a glow filter and a camera blur to a sprite in your Phaser 4 scene using the filters-and-postfx guidance.

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 enableFilters() on the sprite first, then use sprite.filters.internal.addGlow(color, outerStrength). Glow quality and distance are immutable after creation, so destroy and recreate the filter to change them.

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

Phaser 4 has no dedicated Bloom filter. Build one with ParallelFilters: add a Threshold and Blur on the top path, then set the blend mode to ADD, or use Phaser.Actions.AddEffectBloom to automate the 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 are cheaper; external filters run after the transform in screen space and are full-screen. Use internal filters whenever possible for better performance.

Do Phaser 4 filters work with the Canvas renderer?▼

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

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

Replace gameObject.preFX and postFX with filters.internal and filters.external after calling enableFilters(). Camera postFX maps to camera.filters.internal or external, and masks are now added via addMask() instead of setMask().

Why is my Phaser 4 game slow after adding filters?▼

Each object with active filters adds extra draw calls: one base render plus one per active 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
Raphe-devRaphe-dev

tweens

Animate Phaser 4 game object properties with tweens, chains, and easing.

Community
Advanced
phaserjsphaserjs
40.1k

cameras

Configure Phaser 4 cameras for viewports, scrolling, and cinematic effects.

Official
Advanced
fyunusafyunusa

pixijs-2d

Render 2D graphics with PixiJS using WebGL and WebGPU.

Community
Intermediate