Displacement

The Displacement Filter Controller.

This Filter controller manages the displacement effect.

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.

This effect samples across an area. To avoid missing data at the edges, use controller.setPaddingOverride(null) to automatically pad game objects, or camera.getPaddingWrapper(x) to enlarge a camera.

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

const camera = this.cameras.main;



camera.filters.internal.addDisplacement();

camera.filters.external.addDisplacement();

Constructor

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

Parameters

name	type	optional	default	description
camera	Phaser.Cameras.Scene2D.Camera	No		The Camera that owns this filter.
texture	string	Yes	"'__WHITE'"	The unique string-based key of the texture to use for displacement, which must exist in the Texture Manager.
x	number	Yes	0.005	The amount of horizontal displacement to apply. A very small float number, such as 0.005.
y	number	Yes	0.005	The amount of vertical displacement to apply. A very small float number, such as 0.005.

---

Scope: static

Extends

Phaser.Filters.Controller

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

Inherited Members

From Phaser.Filters.Controller:

• active
• allowBaseDraw
• camera
• currentPadding
• ignoreDestroy
• paddingOverride
• renderNode

---

Public Members

texture

texture: Phaser.Renderer.WebGL.Wrappers.WebGLTextureWrapper

Description:

The underlying texture used for displacement.

Source: src/filters/Displacement.js#L80
Since: 4.0.0

---

x

x: number

Description:

The amount of horizontal displacement to apply. The maximum horizontal displacement in pixels is x multiplied by 0.5 times the width of the camera rendering the filter.

Source: src/filters/Displacement.js#L56
Since: 4.0.0

---

y

y: number

Description:

The amount of vertical displacement to apply. The maximum vertical displacement in pixels is y multiplied by 0.5 times the height of the camera rendering the filter.

Source: src/filters/Displacement.js#L68
Since: 4.0.0

---

Inherited Methods

From Phaser.Filters.Controller:

• destroy
• setActive
• setPaddingOverride

---

Public Methods

getPadding

<instance> getPadding()

Description:

Returns the amount of extra padding, in pixels, that this filter requires when rendering. The padding accounts for the displacement effect extending beyond the original bounds of the Camera's rendered output.

Overrides: Phaser.Filters.Controller#getPadding

Returns: Phaser.Geom.Rectangle - The padding Rectangle.

Source: src/filters/Displacement.js#L114
Since: 4.0.0

---

setTexture

<instance> setTexture([texture])

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	optional	default	description
texture	string	Yes	"'__WHITE'"	The unique string-based key of the texture to use for displacement, which must exist in the Texture Manager.

Returns: Phaser.Filters.Displacement - This Filter Controller.

Source: src/filters/Displacement.js#L92
Since: 4.0.0

---