Bokeh
The Bokeh Filter Controller.
This filter controller manages the bokeh effect for a Camera.
Bokeh refers to a visual effect that mimics the photographic technique of creating a shallow depth of field.
This effect is used to emphasize the game's main subject or action, by blurring the background or foreground
elements, resulting in a more immersive and visually appealing experience. It is achieved through rendering
techniques that simulate the out-of-focus areas, giving a sense of depth and realism to the game's graphics.
This effect can also be used to generate a Tilt Shift effect, which is a technique used to create a miniature
effect by blurring everything except a small area of the image. This effect is achieved by blurring the
top and bottom elements, while keeping the center area in focus.
A Bokeh effect is added to a Camera via the FilterList component:
const camera = this.cameras.main;
camera.filters.internal.addBokeh();
camera.filters.external.addBokeh();
Constructor
new Bokeh(camera, [radius], [amount], [contrast], [isTiltShift], [blurX], [blurY], [strength])
Parameters
| name | type | optional | default | description |
|---|---|---|---|---|
| camera | Phaser.Cameras.Scene2D.Camera | No | The Camera that owns this filter. | |
| radius | number | Yes | 0.5 | The radius of the bokeh effect. |
| amount | number | Yes | 1 | The amount of the bokeh effect. |
| contrast | number | Yes | 0.2 | The color contrast of the bokeh effect. |
| isTiltShift | boolean | Yes | false | Is this a bokeh or Tile Shift effect? |
| blurX | number | Yes | 1 | If Tilt Shift, the amount of horizontal blur. |
| blurY | number | Yes | 1 | If Tilt Shift, the amount of vertical blur. |
| strength | number | Yes | 1 | If Tilt Shift, the strength of the blur. |
Scope: static
Extends
Source: src/filters/Bokeh.js#L10
Since: 4.0.0
Inherited Members
From Phaser.Filters.Controller:
Public Members
amount
amount: number
Description:
The amount, or strength, of the bokeh effect.
Source: src/filters/Bokeh.js#L78
Since: 4.0.0
blurX
blurX: number
Description:
If a Tilt Shift effect this controls the amount of horizontal blur.
Setting this value on a non-Tilt Shift effect will have no effect.
Source: src/filters/Bokeh.js#L107
Since: 4.0.0
blurY
blurY: number
Description:
If a Tilt Shift effect this controls the amount of vertical blur.
Setting this value on a non-Tilt Shift effect will have no effect.
Source: src/filters/Bokeh.js#L119
Since: 4.0.0
contrast
contrast: number
Description:
The color contrast, or brightness, of the bokeh effect.
Source: src/filters/Bokeh.js#L88
Since: 4.0.0
isTiltShift
isTiltShift: boolean
Description:
Is this a Tilt Shift effect or a standard bokeh effect?
Source: src/filters/Bokeh.js#L98
Since: 4.0.0
radius
radius: number
Description:
The radius of the bokeh effect.
This is a float value, where a radius of 0 will result in no effect being applied,
and a radius of 1 will result in a strong bokeh. However, you can exceed this value
for even stronger effects.
Source: src/filters/Bokeh.js#L64
Since: 4.0.0
strength
strength: number
Description:
If a Tilt Shift effect this controls the strength of the blur.
Setting this value on a non-Tilt Shift effect will have no effect.
Source: src/filters/Bokeh.js#L131
Since: 4.0.0
Inherited Methods
From Phaser.Filters.Controller: