Phaser API Documentation

  Version: 
Filter

The Vignette FX Controller.

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

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

Constructor:

new Vignette(gameObject, [x], [y], [radius], [strength])

Parameters:

name type arguments Default description
gameObject Phaser.GameObjects.GameObject

A reference to the Game Object that has this fx.

x number <optional> 0.5

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

y number <optional> 0.5

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

radius number <optional> 0.5

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

strength number <optional> 0.5

The strength of the vignette effect.

Since: 3.60.0
Source: src/fx/Vignette.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
radius: number
Focus
Focus

Description:

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

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

Description:

The strength of the vignette effect.

Type:
number
Since: 3.60.0
Source: src/fx/Vignette.js (Line 84)
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 horizontal offset of the vignette effect. This value is normalized to the range 0 to 1.

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

Description:

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

Type:
number
Since: 3.60.0
Source: src/fx/Vignette.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