Skip to main content
Version: Phaser v3.88.2

VignetteFXPipeline

The Vignette FX Pipeline.

The vignette effect is a visual technique where the edges of the screen, or a Game Object, gradually darken or blur,

creating a frame-like appearance. This effect is used to draw the player's focus towards the central action or subject,

enhance immersion, and provide a cinematic or artistic quality to the game's visuals.

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


const sprite = this.add.sprite();



sprite.postFX.addVignette();

Constructor

new VignetteFXPipeline(game)

Parameters

nametypeoptionaldescription
gamePhaser.GameNoA reference to the Phaser Game instance.

Scope: static

Extends

Phaser.Renderer.WebGL.Pipelines.PostFXPipeline

Source: src/renderer/webgl/pipelines/fx/VignetteFXPipeline.js#L11
Since: 3.60.0

Inherited Members​

From Phaser.Renderer.WebGL.Pipelines.PostFXPipeline:

From Phaser.Renderer.WebGL.WebGLPipeline:

Public Members​

radius​

radius: number​

Description:

The radius of the vignette effect. This value is normalized to the range 0 to 1.

Source: src/renderer/webgl/pipelines/fx/VignetteFXPipeline.js#L66
Since: 3.60.0

strength​

strength: number​

Description:

The strength of the vignette effect.

Source: src/renderer/webgl/pipelines/fx/VignetteFXPipeline.js#L75
Since: 3.60.0

x​

x: number​

Description:

The horizontal offset of the vignette effect. This value is normalized to the range 0 to 1.

Source: src/renderer/webgl/pipelines/fx/VignetteFXPipeline.js#L48
Since: 3.60.0

y​

y: number​

Description:

The vertical offset of the vignette effect. This value is normalized to the range 0 to 1.

Source: src/renderer/webgl/pipelines/fx/VignetteFXPipeline.js#L57
Since: 3.60.0

Inherited Methods​

From Phaser.Events.EventEmitter:

From Phaser.Renderer.WebGL.Pipelines.PostFXPipeline:

From Phaser.Renderer.WebGL.WebGLPipeline: