Wipe

The Wipe Filter Controller.

This controller manages the wipe effect for a Camera.

The wipe or reveal effect is a visual technique that gradually uncovers or conceals elements in the game, such as images, text, or scene transitions. This effect is often used to create a sense of progression, reveal hidden content, or provide a smooth and visually appealing transition between game states.

You can set both the direction and the axis of the wipe effect. The following combinations are possible:

• left to right: direction 0, axis 0

• right to left: direction 1, axis 0

• top to bottom: direction 1, axis 1

• bottom to top: direction 0, axis 1

It is up to you to set the progress value yourself, e.g. via a Tween, in order to transition the effect.

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

const camera = this.cameras.main;

camera.filters.internal.addWipe();

camera.filters.external.addWipe();

Constructor

new Wipe(camera, [wipeWidth], [direction], [axis], [reveal], [wipeTexture])

Parameters

name	type	optional	default	description
camera	Phaser.Cameras.Scene2D.Camera	No		The camera that owns this filter.
wipeWidth	number	Yes	0.1	The width of the wipe effect. This value is normalized in the range 0 to 1.
direction	number	Yes	0	The direction of the wipe effect. Either 0 (left to right, or top to bottom) or 1 (right to left, or bottom to top). Set in conjunction with the axis property.
axis	number	Yes	0	The axis of the wipe effect. Either 0 (X) or 1 (Y). Set in conjunction with the direction property.
reveal	number	Yes	0	Is this a reveal (1) or a wipe (0) effect? Reveal shows the input in wiped areas; wipe shows the input in unwiped areas.
wipeTexture	string | Phaser.Textures.Texture	Yes	"'__DEFAULT'"	Texture or texture key to use where the input texture is not shown. The default texture is blank. Use another texture for a wipe transition.

---

Scope: static

Extends

Phaser.Filters.Controller

Source: src/filters/Wipe.js#L11
Since: 4.0.0

Inherited Members

From Phaser.Filters.Controller:

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

---

Public Members

axis

axis: number

Description:

The axis of the wipe effect. Either 0 (X) or 1 (Y). Set in conjunction with the direction property.

Source: src/filters/Wipe.js#L93
Since: 4.0.0

---

direction

direction: number

Description:

The direction of the wipe effect. Either 0 (left to right, or top to bottom) or 1 (right to left, or bottom to top). Set in conjunction with the axis property.

Source: src/filters/Wipe.js#L84
Since: 4.0.0

---

progress

progress: number

Description:

The progress of the Wipe effect. This value is normalized to the range 0 to 1.

Adjust this value to make the wipe transition (e.g. via a Tween).

Source: src/filters/Wipe.js#L63
Since: 4.0.0

---

reveal

reveal: number

Description:

Is this a reveal (1) or a wipe (0) effect? Reveal shows the input in wiped areas; wipe shows the input in unwiped areas.

Source: src/filters/Wipe.js#L102
Since: 4.0.0

---

wipeTexture

wipeTexture: Phaser.Textures.Texture

Description:

The texture to use where the input is removed. The default texture '__DEFAULT' is blank. Use another texture for a wipe transition.

Source: src/filters/Wipe.js#L113
Since: 4.0.0

---

wipeWidth

wipeWidth: number

Description:

The width of the wipe effect. This value is normalized in the range 0 to 1.

Source: src/filters/Wipe.js#L74
Since: 4.0.0

---

Inherited Methods

From Phaser.Filters.Controller:

• destroy
• getPadding
• setActive
• setPaddingOverride

---

Public Methods

setBottomToTop

<instance> setBottomToTop()

Description:

Set the wipe effect to run bottom to top.

Returns: Phaser.Filters.Wipe - - This filter instance.

Source: src/filters/Wipe.js#L187
Since: 4.0.0

---

setLeftToRight

<instance> setLeftToRight()

Description:

Set the wipe effect to run left to right.

Returns: Phaser.Filters.Wipe - - This filter instance.

Source: src/filters/Wipe.js#L145
Since: 4.0.0

---

setProgress

<instance> setProgress(value)

Description:

Sets the progress of the wipe effect, controlling how far along the transition has advanced. A value of 0 means the transition has not started, and 1 means it is complete. You would typically drive this via a Tween rather than setting it directly.

Parameters:

name	type	optional	description
value	number	No	Progress, normalized to the range 0-1.

Returns: Phaser.Filters.Wipe - - This filter instance.

Source: src/filters/Wipe.js#L262
Since: 4.0.0

---

setRevealEffect

<instance> setRevealEffect()

Description:

Configures this filter to run as a reveal effect, where the input is gradually uncovered as the transition progresses. Also resets the texture to the default blank texture and resets progress to 0. Use setWipeEffect for the opposite behavior.

Returns: Phaser.Filters.Wipe - - This filter instance.

Source: src/filters/Wipe.js#L217
Since: 4.0.0

---

setRightToLeft

<instance> setRightToLeft()

Description:

Set the wipe effect to run right to left.

Returns: Phaser.Filters.Wipe - - This filter instance.

Source: src/filters/Wipe.js#L159
Since: 4.0.0

---

setTexture

<instance> setTexture([texture])

Description:

Set the texture to use where the input is removed. The default texture is blank, so the input is just hidden.

Parameters:

name	type	optional	default	description
texture	string | Phaser.Textures.Texture	Yes	"'__DEFAULT'"	Texture or texture key to use for regions where the input is removed.

Returns: Phaser.Filters.Wipe - - This filter instance.

Source: src/filters/Wipe.js#L236
Since: 4.0.0

---

setTopToBottom

<instance> setTopToBottom()

Description:

Set the wipe effect to run top to bottom.

Returns: Phaser.Filters.Wipe - - This filter instance.

Source: src/filters/Wipe.js#L173
Since: 4.0.0

---

setWipeEffect

<instance> setWipeEffect()

Description:

Configures this filter to run as a wipe effect, where the input is removed as the transition progresses. Also resets progress to 0. Use setRevealEffect for the opposite behavior.

Returns: Phaser.Filters.Wipe - - This filter instance.

Source: src/filters/Wipe.js#L201
Since: 4.0.0

---

setWipeWidth

<instance> setWipeWidth(width)

Description:

Set the width of the wipe effect.

Parameters:

name	type	optional	description
width	number	No	The width of the wipe effect. This value is normalized in the range 0 to 1.

Returns: Phaser.Filters.Wipe - - This filter instance.

Source: src/filters/Wipe.js#L127
Since: 4.0.0

---