Skip to main content
Version: Phaser v3.90.0

DisplacementFXPipeline

The Displacement FX Pipeline.

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.

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


const sprite = this.add.sprite();



sprite.postFX.addDisplacement();

Constructor

new DisplacementFXPipeline(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/DisplacementFXPipeline.js#L11
Since: 3.60.0

Inherited Members​

From Phaser.Renderer.WebGL.Pipelines.PostFXPipeline:

From Phaser.Renderer.WebGL.WebGLPipeline:

Public Members​

glTexture​

glTexture: Phaser.Renderer.WebGL.Wrappers.WebGLTextureWrapper​

Description:

The underlying texture used for displacement.

Source: src/renderer/webgl/pipelines/fx/DisplacementFXPipeline.js#L68
Since: 3.60.0

x​

x: number​

Description:

The amount of horizontal displacement to apply.

Source: src/renderer/webgl/pipelines/fx/DisplacementFXPipeline.js#L50
Since: 3.60.0

y​

y: number​

Description:

The amount of vertical displacement to apply.

Source: src/renderer/webgl/pipelines/fx/DisplacementFXPipeline.js#L59
Since: 3.60.0

Inherited Methods​

From Phaser.Events.EventEmitter:

From Phaser.Renderer.WebGL.Pipelines.PostFXPipeline:

From Phaser.Renderer.WebGL.WebGLPipeline: