Skip to main content
Version: Phaser v3.88.2

CircleFXPipeline

The Circle FX Pipeline.

This effect will draw a circle around the texture of the Game Object, effectively masking off

any area outside of the circle without the need for an actual mask. You can control the thickness

of the circle, the color of the circle and the color of the background, should the texture be

transparent. You can also control the feathering applied to the circle, allowing for a harsh or soft edge.

Please note that adding this effect to a Game Object will not change the input area or physics body of

the Game Object, should it have one.

A Circle effect is added to a Game Object via the FX component:


const sprite = this.add.sprite();



sprite.postFX.addCircle();

Constructor

new CircleFXPipeline(game)

Parameters

nametypeoptionaldescription
gamePhaser.GameNoA reference to the Phaser Game instance.

Scope: static

Extends

Phaser.Renderer.WebGL.Pipelines.PostFXPipeline

Source: src/renderer/webgl/pipelines/fx/CircleFXPipeline.js#L11
Since: 3.60.0

Inherited Members​

From Phaser.Renderer.WebGL.Pipelines.PostFXPipeline:

From Phaser.Renderer.WebGL.WebGLPipeline:

Public Members​

feather​

feather: number​

Description:

The amount of feathering to apply to the circle from the ring,

extending into the middle of the circle. The default is 0.005,

which is a very low amount of feathering just making sure the ring

has a smooth edge. Increase this amount to a value such as 0.5

or 0.025 for larger amounts of feathering.

Source: src/renderer/webgl/pipelines/fx/CircleFXPipeline.js#L64
Since: 3.60.0

glcolor​

glcolor: Array.<number>​

Description:

The internal gl color array for the ring color.

Source: src/renderer/webgl/pipelines/fx/CircleFXPipeline.js#L88
Since: 3.60.0

glcolor2​

glcolor2: Array.<number>​

Description:

The internal gl color array for the background color.

Source: src/renderer/webgl/pipelines/fx/CircleFXPipeline.js#L97
Since: 3.60.0

scale​

scale: number​

Description:

The scale of the circle. The default scale is 1, which is a circle

the full size of the underlying texture. Reduce this value to create

a smaller circle, or increase it to create a circle that extends off

the edges of the texture.

Source: src/renderer/webgl/pipelines/fx/CircleFXPipeline.js#L52
Since: 3.60.0

thickness​

thickness: number​

Description:

The width of the circle around the texture, in pixels. This value

doesn't factor in the feather, which can extend the thickness

internally depending on its value.

Source: src/renderer/webgl/pipelines/fx/CircleFXPipeline.js#L77
Since: 3.60.0

Inherited Methods​

From Phaser.Events.EventEmitter:

From Phaser.Renderer.WebGL.Pipelines.PostFXPipeline:

From Phaser.Renderer.WebGL.WebGLPipeline: