Skip to main content
Version: Phaser v4.0.0-rc.6

Glow

The Glow Filter controller.

This filter controller manages the glow effect for a Camera.

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 edges. The color and strength of the glow can be modified.

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


const camera = this.cameras.main;



camera.filters.internal.addGlow();

camera.filters.external.addGlow();

Conversion note from Phaser 3:

  • The shader now uses stochastic sampling instead of sampling along straight lines. This improves quality, especially around corners.

  • scale has been added to the parameter list, before knockout.

  • quality is no longer a fraction, but an integer value. The default has changed from 0.1 to 10. This is not a linear conversion, because of the quality improvement. Judge the quality by eye and adjust the value accordingly.

Constructor

new Glow(camera, [color], [outerStrength], [innerStrength], [scale], [knockout], [quality], [distance])

Parameters

nametypeoptionaldefaultdescription
cameraPhaser.Cameras.Scene2D.CameraNoThe camera that owns this filter.
colornumberYes"0xffffff"The color of the glow effect as a number value.
outerStrengthnumberYes4The strength of the glow outward from the edge of textures.
innerStrengthnumberYes0The strength of the glow inward from the edge of textures.
scalenumberYes1The scale of the glow effect. This multiplies the fixed distance.
knockoutbooleanYesfalseIf true only the glow is drawn, not the texture itself.
qualitynumberYes10The quality of the glow effect. This cannot be changed after the filter has been created.
distancenumberYes10The distance of the glow effect. This cannot be changed after the filter has been created.

Scope: static

Extends

Phaser.Filters.Controller

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

Inherited Members​

From Phaser.Filters.Controller:

Public Members​

color​

color: number​

Description:

The color of the glow as a number value.

Source: src/filters/Glow.js#L149
Since: 4.0.0

distance​

distance: number​

Description:

The distance of the glow effect.

This cannot be changed after the filter has been created.

This controls the distance of the glow effect, in pixels.

Integer values only.

Source: src/filters/Glow.js#L176
Since: 4.0.0

glcolor​

glcolor: Array.<number>​

Description:

A 4 element array of gl color values.

Source: src/filters/Glow.js#L134
Since: 4.0.0

innerStrength​

innerStrength: number​

Description:

The strength of the glow inward from the edge of textures.

Source: src/filters/Glow.js#L73
Since: 4.0.0

knockout​

knockout: number​

Description:

If true only the glow is drawn, not the texture itself.

Source: src/filters/Glow.js#L93
Since: 4.0.0

outerStrength​

outerStrength: number​

Description:

The strength of the glow outward from the edge of textures.

Source: src/filters/Glow.js#L63
Since: 4.0.0

quality​

quality: number​

Description:

The quality of the glow effect.

This cannot be changed after the filter has been created.

This controls the number of samples that the glow effect will run for.

A higher number is higher quality, but slower to process.

Integer values only.

Source: src/filters/Glow.js#L196
Since: 4.0.0

scale​

scale: number​

Description:

The scale of the glow effect. This multiplies the fixed distance.

Source: src/filters/Glow.js#L83
Since: 4.0.0

Inherited Methods​

From Phaser.Filters.Controller: