The Camera that owns this list.
The list of filters.
This list can be manipulated directly. If you want to add or remove filters, please use the appropriate methods to ensure they are handled correctly. Moving filters around in the list is safe.
Adds a filter to this list.
The filter to add.
Optionalindex: numberThe index to insert the filter at. If not given, the filter is added to the end of the list. If negative, it is inserted from the end.
Adds a Barrel effect.
A barrel effect allows you to apply either a 'pinch' or 'expand' distortion to a Game Object. The amount of the effect can be modified in real-time.
Optionalamount: numberThe amount of distortion applied to the barrel effect. A value of 1 is no distortion. Typically keep this within +- 1. Default 1.
Adds a Blend effect.
A blend effect allows you to apply another texture to the view using a specific blend mode. This supports blend modes not otherwise available in WebGL.
Optionaltexture: Textures.TextureThe texture to apply to the view. Default '__WHITE'.
OptionalblendMode: BlendModesThe blend mode to apply to the view. Default Phaser.BlendModes.NORMAL.
Optionalamount: numberThe amount of the blend effect to apply to the view. At 0, the original image is preserved. At 1, the blend texture is fully applied. The expected range is 0 to 1, but you can go outside that range for different effects. Default 1.
Optionalcolor: number[]The color to apply to the blend texture. Each value corresponds to a color channel in RGBA. The expected range is 0 to 1, but you can go outside that range for different effects. Default [1, 1, 1, 1].
Adds a Blocky effect.
This filter controller manages a blocky effect.
The blocky effect works by taking the central pixel of a block of pixels and using it to fill the entire block, creating a pixelated effect.
It reduces the resolution of an image, creating a pixelated or blocky appearance. This is often used for stylistic purposes, such as pixel art. One technique is to render the game at a higher resolution, scaled up by a factor of N, and then apply the blocky effect at size N. This creates large, visible pixels, suitable for further stylization. The effect can also be used to obscure certain elements within the game, such as during a transition or to censor specific content.
Blocky works best on games with no anti-aliasing, so it can read unfiltered pixel colors from the original image. It preserves the colors of the original art, instead of blending them like the Pixelate filter.
Optionalconfig: BlockyConfigThe configuration object for the Blocky effect.
Adds a Blur effect.
A Gaussian blur is the result of blurring an image by a Gaussian function. It is a widely used effect, typically to reduce image noise and reduce detail. The visual effect of this blurring technique is a smooth blur resembling that of viewing the image through a translucent screen, distinctly different from the bokeh effect produced by an out-of-focus lens or the shadow of an object under usual illumination.
Optionalquality: numberThe quality of the blur effect. Can be either 0 for Low Quality, 1 for Medium Quality or 2 for High Quality. Default 0.
Optionalx: numberThe horizontal offset of the blur effect. Default 2.
Optionaly: numberThe vertical offset of the blur effect. Default 2.
Optionalstrength: numberThe strength of the blur effect. Default 1.
Optionalcolor: numberThe color of the blur, as a hex value. Default 0xffffff.
Optionalsteps: numberThe number of steps to run the blur effect for. This value should always be an integer. Default 4.
Adds a Bokeh effect.
Bokeh refers to a visual effect that mimics the photographic technique of creating a shallow depth of field. This effect is used to emphasize the game's main subject or action, by blurring the background or foreground elements, resulting in a more immersive and visually appealing experience. It is achieved through rendering techniques that simulate the out-of-focus areas, giving a sense of depth and realism to the game's graphics.
See also Tilt Shift.
Optionalradius: numberThe radius of the bokeh effect. Default 0.5.
Optionalamount: numberThe amount of the bokeh effect. Default 1.
Optionalcontrast: numberThe color contrast of the bokeh effect. Default 0.2.
Adds a Color Matrix effect.
The color matrix effect is a visual technique that involves manipulating the colors of an image or scene using a mathematical matrix. This process can adjust hue, saturation, brightness, and contrast, allowing developers to create various stylistic appearances or mood settings within the game. Common applications include simulating different lighting conditions, applying color filters, or achieving a specific visual style.
Adds a Displacement effect.
The displacement effect is a visual technique that alters the position of pixels in an image or texture based on the values of a displacement map. This effect is used to create the illusion of depth, surface irregularities, or distortion in otherwise flat elements. It can be applied to characters, objects, or backgrounds to enhance realism, convey movement, or achieve various stylistic appearances.
Optionaltexture: stringThe unique string-based key of the texture to use for displacement, which must exist in the Texture Manager. Default '__WHITE'.
Optionalx: numberThe amount of horizontal displacement to apply. A very small float number, such as 0.005. Default 0.005.
Optionaly: numberThe amount of vertical displacement to apply. A very small float number, such as 0.005. Default 0.005.
Adds a Glow effect.
The glow effect is a visual technique that creates a soft, luminous halo around game objects, characters, or UI elements. This effect is used to emphasize importance, enhance visual appeal, or convey a sense of energy, magic, or otherworldly presence. The effect can also be set on the inside of the edge. The color and strength of the glow can be modified.
Optionalcolor: numberThe color of the glow effect as a number value. Default 0xffffff.
OptionalouterStrength: numberThe strength of the glow outward from the edge of textures. Default 4.
OptionalinnerStrength: numberThe strength of the glow inward from the edge of textures. Default 0.
Optionalscale: numberThe scale of the glow effect. This multiplies the fixed distance. Default 1.
Optionalknockout: booleanIf true only the glow is drawn, not the texture itself. Default false.
Optionalquality: numberThe quality of the glow effect. This cannot be changed after the filter has been created. Default 10.
Optionaldistance: numberThe distance of the glow effect. This cannot be changed after the filter has been created. Default 10.
Adds a Mask effect.
A mask uses a texture to hide parts of an input. It multiplies the color and alpha of the input by the alpha of the mask in the corresponding texel.
Masks can be inverted, which switches what they hide and what they show.
Masks can use either a texture or a GameObject.
If a GameObject is used, the mask will render the GameObject
to a DynamicTexture and use that.
The mask will automatically update when the GameObject changes,
unless the autoUpdate flag is set to false.
When the mask filter is used as an internal filter, the mask will match the object/view being filtered. This is useful for creating effects that follow the object, such as effects intended to match an animated sprite.
When the mask filter is used as an external filter, the mask will match the context of the camera. This is useful for creating effects that cover the entire view.
An optional viewCamera can be specified when creating the mask.
If not used, mask objects will be viewed through a default camera.
Set the viewCamera to the scene's main camera (this.cameras.main)
to view the mask through the main camera.
Optionalmask: string | GameObjectThe source of the mask. This can be a unique string-based key of the texture to use for the mask, which must exist in the Texture Manager. Or it can be a GameObject, in which case the mask will render the GameObject to a DynamicTexture and use that. Default '__WHITE'.
Optionalinvert: booleanWhether to invert the mask. Default false.
OptionalviewCamera: Cameras.Scene2D.CameraThe Camera to use when rendering the mask with a GameObject. If not specified, uses the scene's main camera.
OptionalviewTransform: "local" | "world"The transform to use when rendering the mask with a GameObject. 'local' uses the GameObject's own properties. 'world' uses the GameObject's parentContainer value to compute a world position. Default 'world'.
Adds a Parallel Filters effect.
This filter controller splits the input into two lists of filters, runs each list separately, and then blends the results together.
The Parallel Filters effect is useful for reusing an input. Ordinarily, a filter modifies the input and passes it to the next filter. This effect allows you to split the input and re-use it elsewhere. It does not gain performance benefits from parallel processing; it is a convenience for reusing the input.
The Parallel Filters effect is not a filter itself. It is a controller that manages two FilterLists, and the final Blend filter that combines the results. The FilterLists are named 'top' and 'bottom'. The 'top' output is applied as a blend texture to the 'bottom' output.
You do not have to populate both lists. If only one is populated, it will be blended with the original input at the end. This is useful when you want to retain image data that would be lost in the filter process.
Adds a Pixelate effect.
The pixelate effect is a visual technique that deliberately reduces the resolution or detail of an image, creating a blocky or mosaic appearance composed of large, visible pixels. This effect can be used for stylistic purposes, as a homage to retro gaming, or as a means to obscure certain elements within the game, such as during a transition or to censor specific content.
Optionalamount: numberThe amount of pixelation. A higher value creates a more pronounced effect.
Adds a Sampler effect.
This controller manages a sampler. It doesn't actually render anything, and leaves the image unaltered. It is used to sample a region of the camera view, and pass the results to a callback. This is useful for extracting data from the camera view.
This operation is expensive, so use sparingly.
The callback to call with the results of the sampler.
Optionalregion: Geom.Rectangle | Vector2LikeThe region to sample. If null, the entire camera view is sampled. If a Phaser.Types.Math.Vector2Like, a point is sampled. If a Phaser.Geom.Rectangle, the region is sampled. Default null.
Adds a Shadow effect.
The shadow effect is a visual technique used to create the illusion of depth and realism by adding darker, offset silhouettes or shapes beneath game objects, characters, or environments. These simulated shadows help to enhance the visual appeal and immersion, making the 2D game world appear more dynamic and three-dimensional.
Optionalx: numberThe horizontal offset of the shadow effect. Default 0.
Optionaly: numberThe vertical offset of the shadow effect. Default 0.
Optionaldecay: numberThe amount of decay for the shadow effect. Default 0.1.
Optionalpower: numberThe power of the shadow effect. Default 1.
Optionalcolor: numberThe color of the shadow, as a hex value. Default 0x000000.
Optionalsamples: numberThe number of samples that the shadow effect will run for. Default 6.
Optionalintensity: numberThe intensity of the shadow effect. Default 1.
Adds a Threshold effect.
Input values are compared to a threshold value or range. Values below the threshold are set to 0, and values above the threshold are set to 1. Values within the range are linearly interpolated between 0 and 1.
This is useful for creating effects such as sharp edges from gradients, or for creating binary effects.
The threshold is stored as a range, with two edges. Each edge has a value for each channel, between 0 and 1. If the two edges are the same, the threshold has no interpolation, and will output either 0 or 1. Each channel can also be inverted.
Optionaledge1: number | number[]The first edge of the threshold. This may be an array of the RGBA channels, or a single number for all 4 channels. Default 0.5.
Optionaledge2: number | number[]The second edge of the threshold. This may be an array of the RGBA channels, or a single number for all 4 channels. Default 0.5.
Optionalinvert: boolean | boolean[]Whether each channel is inverted. This may be an array of the RGBA channels, or a single boolean for all 4 channels. Default false.
Adds a Tilt Shift effect.
This Bokeh effect can also be used to generate a Tilt Shift effect, which is a technique used to create a miniature effect by blurring everything except a small area of the image. This effect is achieved by blurring the top and bottom elements, while keeping the center area in focus.
See also Bokeh.
Optionalradius: numberThe radius of the bokeh effect.
Optionalamount: numberThe amount of the bokeh effect.
Optionalcontrast: numberThe color contrast of the bokeh effect.
OptionalblurX: numberThe amount of horizontal blur.
OptionalblurY: numberThe amount of vertical blur.
Optionalstrength: numberThe strength of the blur.
Destroys and removes all filters in this list.
Destroys this FilterList.
Returns all active filters in this list.
Removes a filter from this list, then destroys it.
The filter to remove.
OptionalforceDestroy: booleanIf true, the filter will be destroyed even if it has the ignoreDestroy flag set. Default false.
A list of filters being applied to a Phaser.Cameras.Scene2D.Camera.
Filters can apply special effects and masks. They are only available in WebGL. Use
gameObject.enableFilters()to apply them to Game Objects.Filters include the following:
This list is either 'internal' or 'external'. Internal filters apply to things within the camera. External filters apply to the camera itself, in its rendering context. A complete list of rendering steps for a Camera goes:
For example, consider a game object which is rotated 45 degrees. Apply a horizontal blur filter. If the filter is internal, the blur will appear at 45 degrees, because it is applied before the object is rotated. If the filter is external, the blur will appear horizontal, because it is applied after the object is rotated.
You should use internal filters wherever possible, because they apply only to the region of the camera/game object. External filters are full-screen and can be more expensive.
Filters can be stacked. The order of the list is the order of application.
As you can appreciate, some effects are more expensive than others. For example, a bloom effect is going to be more expensive than a simple color matrix effect, so please consider using them wisely and performance test your target platforms early on in production.
This FilterList is created internally and does not need to be instantiated directly.
In Phaser 3, Filters were known as FX.