Skip to main content
Version: Phaser v3.90.0

Bloom

The Bloom FX Controller.

This FX controller manages the bloom effect for a Game Object.

Bloom is an effect used to reproduce an imaging artifact of real-world cameras.

The effect produces fringes of light extending from the borders of bright areas in an image,

contributing to the illusion of an extremely bright light overwhelming the

camera or eye capturing the scene.

A Bloom effect is added to a Game Object via the FX component:


const sprite = this.add.sprite();



sprite.preFX.addBloom();

sprite.postFX.addBloom();

Constructor

new Bloom(gameObject, [color], [offsetX], [offsetY], [blurStrength], [strength], [steps])

Parameters

nametypeoptionaldefaultdescription
gameObjectPhaser.GameObjects.GameObjectNoA reference to the Game Object that has this fx.
colornumberYes"0xffffff"The color of the Bloom, as a hex value.
offsetXnumberYes1The horizontal offset of the bloom effect.
offsetYnumberYes1The vertical offset of the bloom effect.
blurStrengthnumberYes1The strength of the blur process of the bloom effect.
strengthnumberYes1The strength of the blend process of the bloom effect.
stepsnumberYes4The number of steps to run the Bloom effect for. This value should always be an integer.

Scope: static

Extends

Phaser.FX.Controller

Source: src/fx/Bloom.js#L11
Since: 3.60.0

Inherited Members

From Phaser.FX.Controller:


Public Members

blurStrength

blurStrength: number

Description:

The strength of the blur process of the bloom effect.

Source: src/fx/Bloom.js#L96
Since: 3.60.0


color

color: number

Description:

The color of the bloom as a number value.

Source: src/fx/Bloom.js#L129
Since: 3.60.0


glcolor

glcolor: Array.<number>

Description:

The internal gl color array.

Source: src/fx/Bloom.js#L114
Since: 3.60.0


offsetX

offsetX: number

Description:

The horizontal offset of the bloom effect.

Source: src/fx/Bloom.js#L78
Since: 3.60.0


offsetY

offsetY: number

Description:

The vertical offset of the bloom effect.

Source: src/fx/Bloom.js#L87
Since: 3.60.0


steps

steps: number

Description:

The number of steps to run the Bloom effect for.

This value should always be an integer.

It defaults to 4. The higher the value, the smoother the Bloom,

but at the cost of exponentially more gl operations.

Keep this to the lowest possible number you can have it, while

still looking correct for your game.

Source: src/fx/Bloom.js#L61
Since: 3.60.0


strength

strength: number

Description:

The strength of the blend process of the bloom effect.

Source: src/fx/Bloom.js#L105
Since: 3.60.0


Inherited Methods

From Phaser.FX.Controller: