Use this skill when applying visual filters or post-processing effects in Phaser 4. Covers bloom, blur, glow, color matrix, barrel distortion, displacement, custom shaders, and the filter pipeline. Triggers on: filter, post-processing, shader, bloom, blur, glow, color effects.
Use this skill when applying visual filters or post-processing effects in Phaser 4. Covers bloom, blur, glow, color matrix, barrel distortion, displacement, custom shaders, and the filter pipeline. Triggers on: filter, post-processing, shader, bloom, blur, glow, color effects.
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.external
sprite.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:
Objects render to a texture the size of the camera.
Internal filters process that texture, applying effects in object/camera local space.
The texture is drawn to a context-sized texture, applying camera transformations (position, rotation, zoom).
External filters process that context texture, applying effects in screen space.
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:
Property
Type
Description
active
boolean
Toggle the filter on/off without removing it
camera
Camera
The camera that owns this filter
renderNode
string
The render node ID for the shader
paddingOverride
Rectangle
Override automatic padding calculation
ignoreDestroy
boolean
If true, the filter survives when its FilterList is destroyed (for reuse)
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 available
sprite.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:
Property
Default
Description
filterCamera
null -> Camera
The internal camera used for filter rendering
filters
null -> {internal, external}
Access to the FilterList pair
renderFilters
true
Master toggle for all filter rendering
filtersAutoFocus
true
Auto-adjust camera to follow the object
filtersFocusContext
false
Focus on the rendering context instead of the object bounds
filtersForceComposite
false
Always draw to a framebuffer even with no active filters
maxFilterSize
null -> Vector2
Maximum texture size for filter framebuffers
Use willRenderFilters() to check if any active filters will actually render.
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 result
cam.filters.internal.addBlur(1, 2, 2, 1);
// Third: add a vignette on top
cam.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 texture
sprite.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 mask
mask.invert = true;
// Control auto-updating for game object masks
mask.autoUpdate = true; // default: re-renders each frame
mask.needsUpdate = true; // force a one-time update// Use a specific camera for viewing the mask object
sprite.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 helpers
wipe.setLeftToRight();
wipe.setTopToBottom();
wipe.setRevealEffect(); // reveal mode
wipe.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 them
pf.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
Filter
Add Method
Description
Barrel
addBarrel(amount)
Pinch/expand distortion. amount=1 is neutral.
Blend
addBlend(texture, blendMode, amount, color)
Blend another texture using a blend mode. Supports modes not available in standard WebGL.
Blocky
addBlocky(config)
Pixelation that preserves original colors (no blending). Best without anti-aliasing.
Blur
addBlur(quality, x, y, strength, color, steps)
Gaussian blur. Quality: 0=low, 1=medium, 2=high.
Bokeh
addBokeh(radius, amount, contrast)
Depth-of-field bokeh blur effect.
ColorMatrix
addColorMatrix()
Color manipulation via matrix. Access .colorMatrix for sepia, grayscale, brightness, hue, etc.
CombineColorMatrix
addCombineColorMatrix(texture)
Combine channels from two textures via color matrices. Useful for alpha transfer.
Displacement
addDisplacement(texture, x, y)
Pixel displacement using a displacement map texture. Values are very small floats (e.g. 0.005).
Wipe/reveal transition. Animate progress via tween.
API Quick Reference
Enabling and Accessing Filters
// Game objects: must enable first
gameObject.enableFilters();
gameObject.filters.internal.addBlur();
gameObject.filters.external.addGlow();
// Cameras: filters available immediately
camera.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 controller
list.add(controller, 2); // Insert at index 2
list.remove(controller); // Remove and destroy
list.clear(); // Remove and destroy all
list.getActive(); // Get all active controllers
list.list; // Raw array (reorder safely)
WebGL only -- Filters do not work in Canvas renderer. enableFilters() returns early if WebGL is not available.
enableFilters() required for game objects -- Cameras have filters by default. Sprites, images, containers, and other game objects require enableFilters() before accessing filters.
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.
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.
Filter order matters -- Filters are applied sequentially in list order. The output of one feeds into the next.
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.
CaptureFrame requires forceComposite -- The camera must have setForceComposite(true) or otherwise render into a framebuffer for CaptureFrame to work.
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.
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.
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.
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.
