Filters And Postfx

Phaser 4 Filters and Post-FX

Quick Start

Add a glow effect to a sprite:

// In your Scene's create() method:const sprite = this.add.sprite(400, 300, 'player');
// Step 1: Enable the filter system on the game object (WebGL only)sprite.enableFilters();
// Step 2: Add filters via .filters.internal or .filters.externalsprite.filters.internal.addGlow(0xff00ff, 4, 0, 1);

Add a blur to the camera:

// Cameras have filters enabled by default - no enableFilters() neededconst camera = this.cameras.main;camera.filters.internal.addBlur(0, 2, 2, 1);

Core Concepts

How Filters Work in v4

Filters are GPU-based post-processing effects applied after an object or camera renders to a texture. Each filter runs a shader pass over that texture, producing the final visual output. Filters are WebGL only.

The rendering pipeline for a camera with filters:

1. Objects render to a texture the size of the camera.
2. Internal filters process that texture, applying effects in object/camera local space.
3. The texture is drawn to a context-sized texture, applying camera transformations (position, rotation, zoom).
4. External filters process that context texture, applying effects in screen space.
5. The final texture is composited into the output.

Internal vs External Filters

Every FilterList exposes two sub-lists: filters.internal and filters.external. The distinction controls when the filter runs relative to the camera/object transform:

• Internal -- applied before the camera transform. Effects operate in the object's local coordinate space. A horizontal blur on a rotated object appears rotated with the object. Internal filters only cover the object/camera region, so they are cheaper.
• External -- applied after the camera transform. Effects operate in screen space. A horizontal blur on a rotated object always blurs horizontally on screen. External filters are full-screen and more expensive.

Use internal filters wherever possible for better performance.

FilterList

FilterList (Phaser.GameObjects.Components.FilterList) is the container that holds filter controllers. It provides:

• add(filter, index) -- add a Controller instance at an optional index
• remove(filter, forceDestroy) -- remove and destroy a filter
• clear() -- remove and destroy all filters
• getActive() -- return all filters where active === true
• list -- the raw array of Controllers (safe to reorder)
• Convenience factory methods: addBlur(), addGlow(), addMask(), etc.

Filter Controllers

Every filter is a Phaser.Filters.Controller subclass. Common Controller properties:

Key methods: setActive(bool), setPaddingOverride(left, top, right, bottom), getPadding(), destroy().

Enabling Filters on Game Objects

Cameras have filters available by default. Game objects do not -- you must call enableFilters() first:

const sprite = this.add.sprite(400, 300, 'hero');sprite.enableFilters();
// Now sprite.filters is availablesprite.filters.internal.addGlow();sprite.filters.external.addVignette();

enableFilters() creates an internal filterCamera on the game object that handles rendering the object to a texture for filter processing. It returns this for chaining.

Related properties on game objects after enabling:

Use willRenderFilters() to check if any active filters will actually render.

Common Patterns

Adding Filters to Game Objects

const sprite = this.add.sprite(400, 300, 'enemy');sprite.enableFilters();
// Add a glowconst glow = sprite.filters.internal.addGlow(0x00ff00, 4);
// Modify at runtimeglow.outerStrength = 8;glow.color = 0xff0000;
// Temporarily disableglow.setActive(false);
// Remove and destroysprite.filters.internal.remove(glow);

Camera Filters

const camera = this.cameras.main;
// Internal: effect in camera-local spaceconst blur = camera.filters.internal.addBlur(0, 2, 2, 1);
// External: effect in screen spaceconst vignette = camera.filters.external.addVignette(0.5, 0.5, 0.5, 0.5);
// Color grading via ColorMatrixconst cm = camera.filters.internal.addColorMatrix();cm.colorMatrix.sepia();

Chaining Multiple Filters

Filters execute in list order. Each filter receives the output of the previous one:

const cam = this.cameras.main;
// First: apply color gradingconst cm = cam.filters.internal.addColorMatrix();cm.colorMatrix.brightness(0.2);
// Second: apply blur to the color-graded resultcam.filters.internal.addBlur(1, 2, 2, 1);
// Third: add a vignette on topcam.filters.external.addVignette(0.5, 0.5, 0.5, 0.8);

Masks via Filters

Masks in v4 are implemented as filters. They use the alpha channel of a texture or game object to control visibility:

// Mask with a static texturesprite.enableFilters();sprite.filters.internal.addMask('maskTexture');
// Mask with a game object (renders to DynamicTexture automatically)const maskShape = this.add.circle(0, 0, 100, 0xffffff);sprite.enableFilters();const mask = sprite.filters.internal.addMask(maskShape);
// Invert the maskmask.invert = true;
// Control auto-updating for game object masksmask.autoUpdate = true;  // default: re-renders each framemask.needsUpdate = true; // force a one-time update
// Use a specific camera for viewing the mask objectsprite.filters.external.addMask(maskShape, false, this.cameras.main);

Internal masks match the object being filtered. External masks match the camera context. Use a viewCamera parameter to control which camera renders the mask game object.

Wipe / Reveal Transitions

const camera = this.cameras.main;const wipe = camera.filters.external.addWipe(0.1, 0, 0);
// Animate via tweenthis.tweens.add({    targets: wipe,    progress: 1,    duration: 2000,    ease: 'Linear'});
// Direction helperswipe.setLeftToRight();wipe.setTopToBottom();wipe.setRevealEffect();   // reveal modewipe.setWipeEffect();     // wipe mode
// Wipe to another texture (for scene transitions)wipe.setTexture('nextSceneCapture');

ParallelFilters (Custom Bloom and Compositing)

ParallelFilters splits the input into two paths, processes each independently, then blends the results. This replaces the dedicated Bloom filter from v3:

const camera = this.cameras.main;const pf = camera.filters.internal.addParallelFilters();
// Top path: threshold bright areas, then blur thempf.top.addThreshold(0.5, 1);pf.top.addBlur();
// Configure the blend (how top combines onto bottom)pf.blend.blendMode = Phaser.BlendModes.ADD;pf.blend.amount = 0.5;
// Bottom path: left empty = uses original input

CaptureFrame for Scene-Level Effects

CaptureFrame captures the current render state at the point it appears in the display list. Objects rendered before it are captured; objects after it are not:

// Requires composite mode on the camerathis.cameras.main.setForceComposite(true);
// Objects rendered before CaptureFrame are capturedconst bg = this.add.image(400, 300, 'background');
// Create the capture pointconst capture = this.add.captureFrame('myCapture');
// Display the captured texture with filters appliedconst display = this.add.image(400, 300, 'myCapture');display.enableFilters();display.filters.internal.addBlur(0, 4, 4, 2);

All Built-in Filters

API Quick Reference

Enabling and Accessing Filters

// Game objects: must enable firstgameObject.enableFilters();gameObject.filters.internal.addBlur();gameObject.filters.external.addGlow();
// Cameras: filters available immediatelycamera.filters.internal.addBlur();camera.filters.external.addGlow();

FilterList Methods

const list = camera.filters.internal;
list.addBlur();                    // Factory method (one per filter type)list.add(controllerInstance);      // Add a pre-built controllerlist.add(controller, 2);           // Insert at index 2list.remove(controller);           // Remove and destroylist.clear();                      // Remove and destroy alllist.getActive();                  // Get all active controllerslist.list;                         // Raw array (reorder safely)

Controller Common API

controller.active = false;                  // Disable without removingcontroller.setActive(true);                 // Enable (returns this)controller.setPaddingOverride(10, 10, 10, 10); // Override paddingcontroller.setPaddingOverride(null);        // Clear overridecontroller.ignoreDestroy = true;            // Survive FilterList.destroy()controller.destroy();                       // Manual cleanup

Mask Filter API

const mask = list.addMask('texKey');       // From texture keyconst mask = list.addMask(gameObject);     // From game objectmask.invert = true;                         // Invert maskmask.autoUpdate = false;                    // Stop auto-updating GO masksmask.needsUpdate = true;                    // Force one updatemask.setTexture('newKey');                  // Change texture sourcemask.setGameObject(newGO);                 // Change GO sourcemask.viewCamera = otherCamera;             // Camera for GO renderingmask.viewTransform = 'local';              // 'local' or 'world'mask.scaleFactor = 0.5;                    // Scale mask texture size

ColorMatrix Presets

const cm = list.addColorMatrix();cm.colorMatrix.sepia();cm.colorMatrix.grayscale(1);cm.colorMatrix.brightness(0.3);cm.colorMatrix.hue(90);cm.colorMatrix.saturate(-0.5);cm.colorMatrix.contrast(0.3);cm.colorMatrix.blackWhite();cm.colorMatrix.negative();cm.colorMatrix.desaturate();cm.colorMatrix.night(0.5);cm.colorMatrix.lsd();cm.colorMatrix.brown();cm.colorMatrix.vintagePinhole();cm.colorMatrix.kodachrome();cm.colorMatrix.technicolor();cm.colorMatrix.polaroid();cm.colorMatrix.shiftToBGR();

Gotchas

1. WebGL only -- Filters do not work in Canvas renderer. enableFilters() returns early if WebGL is not available.

2. enableFilters() required for game objects -- Cameras have filters by default. Sprites, images, containers, and other game objects require enableFilters() before accessing filters.

3. Performance cost -- Each object with active filters creates extra draw calls (one for the base render plus one per active filter). Use sparingly and performance test early.

4. Internal vs external matters -- Internal filters are cheaper (object-region sized). External filters are full-screen. A blur that should rotate with the object must be internal; a blur that should stay screen-aligned must be external.

5. Filter order matters -- Filters are applied sequentially in list order. The output of one feeds into the next.

6. Glow quality and distance are immutable -- quality and distance on the Glow filter cannot be changed after creation. Destroy and recreate the filter to change them.

7. CaptureFrame requires forceComposite -- The camera must have setForceComposite(true) or otherwise render into a framebuffer for CaptureFrame to work.

8. Padding for expanding effects -- Filters like Blur, Glow, and Shadow can automatically calculate padding to expand the render texture. Override with setPaddingOverride() if needed. Pass null to clear the override. When used on a camera, use camera.getPaddingWrapper(x) to render more world outside the image edge.

9. Controller reuse -- By default, controllers are destroyed when their FilterList is destroyed. Set ignoreDestroy = true to reuse a controller across multiple objects, but you must manage its lifecycle manually. Works best with external filters.

10. Mask game object rendering -- When using a game object as a mask source, it is rendered to a DynamicTexture each frame (if autoUpdate is true). Set autoUpdate = false and use needsUpdate = true for one-shot updates to improve performance for static masks.

11. No Bloom filter -- v4 does not have a dedicated Bloom filter. Use ParallelFilters with Threshold + Blur + ADD blend instead (see Common Patterns), or use Phaser.Actions.AddEffectBloom to automate the process.

v4 Changes from v3

Source File Map

Related: sprites-and-images.md, cameras.md, v4-new-features.md