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

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, masks, and glow to the new API. ## 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 Bloom and Compositing: Build bloom effects with ParallelFilters by splitting input into threshold and blur paths blended with ADD mode. - Masks and Transitions: Implement alpha masks from textures or game objects and animated wipe/reveal transitions driven by tweens. - Use Case: When porting a Phaser 3 game that used postFX.addBloom(), use this Skill to recreate the effect with ParallelFilters and correctly call enableFilters() on sprites before attaching glow effects. ## Quick Start Add a glow filter to my Phaser 4 sprite and explain how to recreate the v3 bloom effect using ParallelFilters.

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, while cameras have filters available by default.

How do I recreate the Phaser 3 bloom effect in Phaser 4?▼

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

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 they cost more but stay screen-aligned.

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.

Why is my Phaser 4 filter not rendering 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 flag is true and that the game is running in WebGL mode.

How do I animate a wipe transition between scenes in Phaser 4?▼

Add a wipe filter with camera.filters.external.addWipe(), then tween its progress property from 0 to 1. Use setRevealEffect() or setWipeEffect() to control the mode and setTexture() to wipe toward another captured scene.

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
dyCuong03dyCuong03
6

unity-camera

Configure Unity Scene View and Game Camera controls for screenshots.

Community
Intermediate
phaserjsphaserjs
40.1k

render-textures

Paint game objects onto RenderTexture or DynamicTexture for off-screen rendering in Phaser 4.

Official
Advanced
pixijspixijs
302

pixijs-filters

Apply PixiJS v8 visual filters to containers and sprites.

Official
Advanced