Shadow
The Shadow Filter.
This filter controller manages the shadow effect for a Camera.
The shadow effect is a visual technique used to create the illusion of depth and realism by adding darker, offset silhouettes or shapes beneath game objects, characters, or environments. These simulated shadows help to enhance the visual appeal and immersion, making the 2D game world appear more dynamic and three-dimensional.
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 Shadow effect is added to a Camera via the FilterList component:
const camera = this.cameras.main;
camera.filters.internal.addShadow();
camera.filters.external.addShadow();
Constructor
new Shadow(camera, [x], [y], [decay], [power], [color], [samples], [intensity])
Parameters
| name | type | optional | default | description |
|---|---|---|---|---|
| camera | Phaser.Cameras.Scene2D.Camera | No | The camera that owns this filter. | |
| x | number | Yes | 0 | The horizontal offset of the shadow effect. |
| y | number | Yes | 0 | The vertical offset of the shadow effect. |
| decay | number | Yes | 0.1 | The amount of decay for the shadow effect. |
| power | number | Yes | 1 | The power of the shadow effect. |
| color | number | Yes | "0x000000" | The color of the shadow, as a hex value. |
| samples | number | Yes | 6 | The number of samples that the shadow effect will run for. |
| intensity | number | Yes | 1 | The intensity of the shadow effect. |
Scope: static
Extends
Source: src/filters/Shadow.js#L10
Since: 4.0.0
Inherited Members
From Phaser.Filters.Controller:
Public Members
color
color: number
Description:
The color of the shadow, expressed as a hex RGB value (e.g. 0xff0000 for red, 0x000000 for black). Setting this property updates the internal glcolor array used by the WebGL shader.
Source: src/filters/Shadow.js#L138
Since: 4.0.0
decay
decay: number
Description:
Controls how quickly the shadow fades over distance. Lower values produce longer, more gradual shadows; higher values produce shorter, more concentrated shadows.
Source: src/filters/Shadow.js#L80
Since: 4.0.0
glcolor
glcolor: Array.<number>
Description:
The internal WebGL color array used by the shader. Stores the shadow color as normalized RGBA float values in the range 0 to 1. This array is updated automatically when the color property is set.
Source: src/filters/Shadow.js#L100
Since: 4.0.0
intensity
intensity: number
Description:
A multiplier for the overall shadow visibility. Higher values produce darker, more prominent shadows.
Source: src/filters/Shadow.js#L122
Since: 4.0.0
power
power: number
Description:
An exponent applied to the shadow falloff curve. Higher values create sharper shadow edges; lower values create softer, more diffuse shadows.
Source: src/filters/Shadow.js#L90
Since: 4.0.0
samples
samples: number
Description:
The number of samples that the shadow effect will run for.
This should be an integer with a minimum value of 1 and a maximum of 12.
Source: src/filters/Shadow.js#L111
Since: 4.0.0
x
x: number
Description:
The horizontal offset of the shadow effect.
Source: src/filters/Shadow.js#L62
Since: 4.0.0
y
y: number
Description:
The vertical offset of the shadow effect.
Source: src/filters/Shadow.js#L71
Since: 4.0.0
Inherited Methods
From Phaser.Filters.Controller:
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 shadow effect extending beyond the original bounds of the filtered Game Object.
Overrides: Phaser.Filters.Controller#getPadding
Returns: Phaser.Geom.Rectangle - The padding Rectangle.
Source: src/filters/Shadow.js#L167
Since: 4.0.0