skills.rest
autonomous-ai
autonomous-aiOFFICIAL
Explore all skills by this author →
Website𝕏@autonomous_labsGitHub

filters-and-postfx

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

465|41|Updated Aug 4, 2026
Search Tags:#game development#filters#shaders#webgl#visual effects#phaser#post-processing
One-click install
npx skills add https://github.com/autonomous-ai/openharness --skill filters-and-postfx-autonomous-ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: filters-and-postfx
Source: https://github.com/autonomous-ai/openharness/tree/main/store/agents/phaser/skills/filters-and-postfx
Command: npx skills add https://github.com/autonomous-ai/openharness --skill filters-and-postfx-autonomous-ai

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 internal versus external filter lists, and migrating effects like bloom and masks that changed or were removed. ## Core Features & Use Cases - Filter Application: Add blur, glow, vignette, color matrix, displacement, barrel distortion, and 20+ built-in filters to game objects and cameras via FilterList factory methods. - Custom Effect Composition: Chain filters in sequence, build bloom with ParallelFilters (Threshold + Blur + ADD blend), and create masks from textures or game objects. - v3 to v4 Migration: Map legacy preFX/postFX calls to the new internal/external filter lists, including replacements for removed effects like Bloom and Circle. - Use Case: A developer wants a glowing enemy sprite and a screen-space vignette on the camera; this Skill provides the exact enableFilters() call, addGlow parameters, and camera filter code. ## Quick Start Ask the agent to add a glow filter 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). Game objects require enableFilters() before accessing the filters property, unlike cameras which have filters enabled by default.

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 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 unless the effect must stay screen-aligned.

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 targeting the Canvas renderer cannot use any filter effects.

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

Replace gameObject.preFX with filters.internal and postFX with filters.external, and call enableFilters() first. Camera masks become camera.filters.internal.addMask(), and removed effects like Bloom are rebuilt with ParallelFilters.

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
Blaze-sports-IntelBlaze-sports-Intel

game-development

Build game-engine architecture, gameplay systems, and asset pipelines with performance verification.

Official
Advanced
jallard-007jallard-007

cameras

Coordinate Phaser 4 cameras for viewports, scrolling, and effects.

Community
Advanced
assofohdzassofohdz
25

jme-shaders

Author custom GLSL shaders and .j3md material definitions for jMonkeyEngine 3.

Community
Intermediate