Skip to main content
Version: Phaser v4.0.0

Threshold

The Threshold Filter Controller.

This controller manages a threshold filter. 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.

A Threshold effect is added to a Camera via the FilterList component:


const camera = this.cameras.main;



camera.filters.internal.addThreshold();

camera.filters.external.addThreshold();

Constructor

new Threshold(camera, [edge1], [edge2], [invert])

Parameters

nametypeoptionaldefaultdescription
cameraPhaser.Cameras.Scene2D.CameraNoThe Camera that owns this filter.
edge1number | Array.<number>Yes0.5The first edge of the threshold. This may be an array of the RGBA channels, or a single number to apply to all 4 channels.
edge2number | Array.<number>Yes0.5The second edge of the threshold. This may be an array of the RGBA channels, or a single number to apply to all 4 channels.
invertboolean | Array.<boolean>YesfalseWhether each channel is inverted. This may be an array of the RGBA channels, or a single boolean to apply to all 4 channels.

Scope: static

Extends

Phaser.Filters.Controller

Source: src/filters/Threshold.js#L10
Since: 4.0.0

Inherited Members

From Phaser.Filters.Controller:


Public Members

edge1

edge1: Array.<number>

Description:

The first edge of the threshold. This contains the lowest value for each channel.

Source: src/filters/Threshold.js#L54
Since: 4.0.0


edge2

edge2: Array.<number>

Description:

The second edge of the threshold. This contains the highest value for each channel. If it is the same as the first edge, the threshold is a single value.

Source: src/filters/Threshold.js#L65
Since: 4.0.0


invert

invert: Array.<boolean>

Description:

Whether each channel is inverted. When a channel is inverted, its output is flipped so that values that would normally output 0 instead output 1, and vice versa. This applies per-channel to the RGBA components of the threshold result.

Source: src/filters/Threshold.js#L77
Since: 4.0.0


Inherited Methods

From Phaser.Filters.Controller:


Public Methods

setEdge

<instance> setEdge([edge1], [edge2])

Description:

Set the edges of the threshold. If the second edge is not provided, it will be set to the first edge.

This ensures that the first edge is not greater than the second edge. It may swap channels between edges to ensure this.

Parameters:

nametypeoptionaldefaultdescription
edge1number | Array.<number>Yes0.5The first edge of the threshold. This may be an array of the RGBA channels, or a single number to apply to all 4 channels.
edge2number | Array.<number>Yes0.5The second edge of the threshold. This may be an array of the RGBA channels, or a single number to apply to all 4 channels.

Returns: Phaser.Filters.Threshold - This Threshold instance.

Source: src/filters/Threshold.js#L94
Since: 4.0.0


setInvert

<instance> setInvert([invert])

Description:

Sets the invert state for each channel of the threshold filter. When a channel is inverted, its output is flipped: pixels that would output 0 instead output 1, and vice versa. This can be used to create negative or reversed threshold effects per channel. If invert is not provided, all channels default to false.

Parameters:

nametypeoptionaldefaultdescription
invertboolean | Array.<boolean>YesfalseWhether each channel is inverted. This may be an array of the RGBA channels, or a single boolean to apply to all 4 channels.

Returns: Phaser.Filters.Threshold - This Threshold instance.

Source: src/filters/Threshold.js#L150
Since: 4.0.0