skills.rest
travispwingo
travispwingoCOMMUNITY
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 May 7, 2021
Search Tags:#game development#filters#shaders#webgl#visual effects#post-processing#phaser 4
One-click install
npx skills add https://github.com/travispwingo/travispwingo.github.io --skill filters-and-postfx-travispwingo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: filters-and-postfx
Source: https://github.com/travispwingo/travispwingo.github.io/tree/main/mario/docs/skills/filters-and-postfx
Command: npx skills add https://github.com/travispwingo/travispwingo.github.io --skill filters-and-postfx-travispwingo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Phaser 4 replaced the v3 FX system with a new filter pipeline, and developers need clear guidance on enabling filters, choosing between internal and external filter lists, and migrating effects like bloom, masks, and glow to the new API. ## Core Features & Use Cases - Filter Pipeline Guidance: Explains internal vs external filters, FilterList management, and the enableFilters() requirement for game objects. - Complete Filter Reference: Documents all 24 built-in filters including Blur, Glow, ColorMatrix, Displacement, Vignette, Wipe, and ParallelFilters with code examples. - v3 to v4 Migration: Maps legacy preFX/postFX APIs to the new filters system, including replacing the removed Bloom filter with ParallelFilters. - Use Case: Add a glow effect to a player sprite, apply a sepia color grade to the main camera, or build a custom bloom effect using ParallelFilters with Threshold and Blur. ## Quick Start Show me how to add a glow filter and a blur effect to a sprite 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, 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, then set the blend mode to Phaser.BlendModes.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 since they only cover the object region. External filters run after the transform in screen space, are full-screen, and cost more performance.

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

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

Replace gameObject.preFX with gameObject.filters.internal and postFX with filters.external. Masks via setMask() become filters.internal.addMask(), and the removed Bloom and Circle effects are rebuilt with ParallelFilters or Vignette.

Why is my Phaser 4 filter not rendering on a sprite?▼

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

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
wimpysworldwimpysworld
716

love-timer

Provides clock and timing functions for LÖVE game development in Lua.

Official
Basic
kehwarkehwar

cameras

Manage Phaser 4 camera viewports, scrolling, and effects.

Community
Advanced
fyunusafyunusa

pixijs-2d

Render 2D graphics with PixiJS using WebGL and WebGPU.

Community
Intermediate