Vignette
The Vignette Filter Controller.
This controller manages the vignette effect for a Camera.
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.
This filter supports colored borders, and a limited set of blend modes, to increase its stylistic power.
A Vignette effect is added to a Camera via the FilterList component:
const camera = this.cameras.main;
camera.filters.internal.addVignette();
camera.filters.external.addVignette();
Constructor
new Vignette(camera, [x], [y], [radius], [strength], [color], [blendMode])
Parameters
| name | type | optional | default | description |
|---|---|---|---|---|
| camera | Phaser.Cameras.Scene2D.Camera | No | The camera that owns this filter. | |
| x | number | Yes | 0.5 | The horizontal offset of the vignette effect. This value is normalized to the range 0 to 1. |
| y | number | Yes | 0.5 | The vertical offset of the vignette effect. This value is normalized to the range 0 to 1. |
| radius | number | Yes | 0.5 | The radius of the vignette effect. This value is normalized to the range 0 to 1. |
| strength | number | Yes | 0.5 | The strength of the vignette effect. |
| color | number | string | Phaser.Types.Display.InputColorObject | Phaser.Display.Color | Yes |
| blendMode | number | Yes | "Phaser.BlendModes.NORMAL" | The blend mode to use with the vignette. Only NORMAL, ADD, MULTIPLY, and SCREEN are supported. |
Scope: static
Extends
Source: src/filters/Vignette.js#L11
Since: 4.0.0
Inherited Members
From Phaser.Filters.Controller:
Public Members
blendMode
blendMode: Phaser.BlendModes
Description:
The blend mode used to combine the vignette color with the input. Note that only NORMAL, ADD, MULTIPLY and SCREEN are supported.
Source: src/filters/Vignette.js#L111
Since: 4.0.0
color
color: Phaser.Display.Color
Description:
The color of the vignette effect.
Source: src/filters/Vignette.js#L102
Since: 4.0.0
radius
radius: number
Description:
The radius of the vignette effect. This value is normalized to the range 0 to 1.
Source: src/filters/Vignette.js#L82
Since: 4.0.0
strength
strength: number
Description:
The strength of the vignette effect. Higher values produce a more intense, opaque vignette overlay at the edges, while lower values produce a subtler, more transparent effect.
Source: src/filters/Vignette.js#L91
Since: 4.0.0
x
x: number
Description:
The horizontal offset of the vignette effect. This value is normalized to the range 0 to 1.
Source: src/filters/Vignette.js#L64
Since: 4.0.0
y
y: number
Description:
The vertical offset of the vignette effect. This value is normalized to the range 0 to 1.
Source: src/filters/Vignette.js#L73
Since: 4.0.0
Inherited Methods
From Phaser.Filters.Controller:
Public Methods
setColor
<instance> setColor(color)
Description:
Sets the color of the vignette overlay.
Parameters:
| name | type | optional | description |
|---|---|---|---|
| color | number | string | Phaser.Types.Display.InputColorObject | Phaser.Display.Color |
Returns: Phaser.Filters.Vignette - This filter instance.
Source: src/filters/Vignette.js#L125
Since: 4.0.0