Phaser API Documentation

  Version: 
Filter

The Displacement FX Controller.

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

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.preFX.addDisplacement();
sprite.postFX.addDisplacement();

Constructor:

new Displacement(gameObject, [texture], [x], [y])

Parameters:

name type arguments Default description
gameObject Phaser.GameObjects.GameObject

A reference to the Game Object that has this fx.

texture string <optional> '__WHITE'

The unique string-based key of the texture to use for displacement, which must exist in the Texture Manager.

x number <optional> 0.005

The amount of horizontal displacement to apply. A very small float number, such as 0.005.

y number <optional> 0.005

The amount of vertical displacement to apply. A very small float number, such as 0.005.

Since: 3.60.0
Source: src/fx/Displacement.js (Line 11)

Extends


Members

active: boolean
Focus
Focus

Description:

Toggle this boolean to enable or disable this effect, without removing and adding it from the Game Object.

Only works for Pre FX.

Post FX are always active.

Type:
boolean
Inherited from: Phaser.FX.Controller#active
Since: 3.60.0
Source: src/fx/Controller.js (Line 47)
Focus
Focus

Description:

A reference to the Game Object that owns this effect.

Type:
Inherited from: Phaser.FX.Controller#gameObject
Since: 3.60.0
Source: src/fx/Controller.js (Line 38)
Focus
Focus

Description:

The underlying texture used for displacement.

Type:
Since: 3.60.0
Source: src/fx/Displacement.js (Line 75)
Focus
Focus
type: number
Focus
Focus

Description:

The FX_CONST type of this effect.

Type:
number
Inherited from: Phaser.FX.Controller#type
Since: 3.60.0
Source: src/fx/Controller.js (Line 29)
Focus
Focus
x: number
Focus
Focus

Description:

The amount of horizontal displacement to apply.

Type:
number
Since: 3.60.0
Source: src/fx/Displacement.js (Line 57)
Focus
Focus
y: number
Focus
Focus

Description:

The amount of vertical displacement to apply.

Type:
number
Since: 3.60.0
Source: src/fx/Displacement.js (Line 66)
Focus
Focus

Methods

destroy()
Focus
Focus

Description:

Destroys this FX Controller.

Inherited from: Phaser.FX.Controller#destroy
Since: 3.60.0
Source: src/fx/Controller.js (Line 81)
Focus
Focus
setActive(value)
Focus
Focus

Description:

Sets the active state of this FX Controller.

A disabled FX Controller will not be updated.

Parameters:

name type description
value boolean

true to enable this FX Controller, or false to disable it.

Returns:
Description:

This FX Controller instance.

Inherited from: Phaser.FX.Controller#setActive
Since: 3.60.0
Source: src/fx/Controller.js (Line 62)
Focus
Focus
setTexture([texture])
Focus
Focus

Description:

Sets the Texture to be used for the displacement effect.

You can only use a whole texture, not a frame from a texture atlas or sprite sheet.

Parameters:

name type arguments Default description
texture string <optional> '__WHITE'

The unique string-based key of the texture to use for displacement, which must exist in the Texture Manager.

Returns:
Description:

This FX Controller.

Since: 3.60.0
Source: src/fx/Displacement.js (Line 87)
Focus
Focus