Shader Effects

In version 3.60, Phaser introduced a couple of special effects. The effects are built-in, ready to use, and can be applied to any Game Object.

We encourage you to read the release notes and the Phaser documentation about it.

In Phaser Editor you can add effects to a Game Object, tweak the properties, and see the result in the Scene Editor.

Currently, we support two effects: the Glow and Shadow effects.

Adding an effect to a game object

Every game object has an FX Shaders section in the Inspector view:

FX Shaders section

It contains the Add button that allows you to add a new effect to the game object. When you click the Add button, the Shader Effects dialog appears:

Add shader FX dialog.

There you can select an FX, and then click the Add button to add it to the game object.

Another way to add an effect is to select a game object in the scene, open the context menu and populate the FX submenu. It shows the options to add a specific effect:

You can add multiple effects to a game object. They are listed in the Outline view just like any other scene object:

Effects in the Outline view.

You can select an FX object and delete it, copy/paste it, change its rendering order, or tweak its properties.

The FX object is like any other scene object that you can assign to a variable, or a field, or set as a nested prefab.

Game Object properties

You can add an FX object to any game object. The FX Shaders section in the Inspector view shows the properties of a game object that are related to the effects.

FX Shaders section

It contains the Add button, to add a new FX object.

And contains the Padding property, to set the padding to be used by the pre-FX pipeline.

Learn more about padding in the Phaser documentation.

An effect as a scene object

An effect is a scene object that you can select in the Outline view:

Effects in the Outline view.

You can select the FX object and delete it, copy/paste it, change its rendering order, or tweak its properties.

The Variable properties are also valid for the FX objects. You can assign the FX to a variable or a field, and use it for implementing custom actions.

Let’s say you want to tween the intensity of the shadow FX. You can assign the FX to a field by setting the variable scope to CLASS:

Set class scope to FX.

Then the scene compiler generates a variable and field for the FX object:

editorCreate() {
    ...
    // shadowFx
    const shadowFx = logo.preFX!.addShadow(0, 0, 0.1, 1, 0, 6, 1);
    ...
    this.shadowFx = shadowFx;
}

private shadowFx!: Phaser.FX.Shadow;

Then, in the create method, you can tween the intensity of the shadow FX:

create() {
    ...
    this.add.tween({
        targets: this.shadowFx,
        intensity: 1,
    });
}

Not only you can assign an FX to a variable, but you can also make a nested prefab with it. This way, you can reuse the FX in different scenes.

Effect properties

Every FX type shares a common set of properties. You can edit these properties in the FX section. For now, it only contains a button to change the FX to the preFX or the postFX pipeline:

FX properties.

Glow FX

The Glow FX is a simple effect that adds a glow to the edges of the image. It is a post-processing effect that can be applied to any image.

Learn more about the Phaser.FX.Glow properties in the Phaser documentation

Glow effect Glow properties

Shadow FX

The Shadow FX is a simple and easy-to-use shadowing effect for your images. You can learn more about its properties in the Phaser.FX.Shadow Phaser documentation.

Shadow FX Shadow FX properties

Pixelate FX

The Pixelate effect is a visual technique that deliberately reduces the resolution or detail of an image, creating a blocky or mosaic appearance composed of large, visible pixels. This effect can be used for stylistic purposes, as a homage to retro gaming, or as a means to obscure certain elements within the game, such as during a transition or to censor specific content.

Learn more about the Phaser.FX.Pixelate properties in the Phaser documentation

Pixelate effect Pixelate properties

Vignette FX

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.

Learn more about the Phaser.FX.Vignette properties in the Phaser documentation

Vignette effect Vignette effect properties

Shine FX

The shine effect is a visual technique that simulates the appearance of reflective or glossy surfaces by passing a light beam across a Game Object. This effect is used to enhance visual appeal, emphasize certain features, and create a sense of depth or material properties.

Learn more about the Phaser.FX.Shine properties in the Phaser documentation

Shine effect Shine effect properties

Blur FX

A Gaussian blur is the result of blurring an image by a Gaussian function. It is a widely used effect, typically to reduce image noise and reduce detail. The visual effect of this blurring technique is a smooth blur resembling that of viewing the image through a translucent screen, distinctly different from the bokeh effect produced by an out-of-focus lens or the shadow of an object under usual illumination.

Learn more about the Phaser.FX.Blur properties in the Phaser documentation

Blur effect Blur effect properties

Gradient FX

The gradient overlay effect is a visual technique where a smooth color transition is applied over Game Objects, such as sprites or UI components. This effect is used to enhance visual appeal, emphasize depth, or create stylistic and atmospheric variations. It can also be utilized to convey information, such as representing progress or health status through color changes.

Learn more about the Phaser.FX.Gradient properties in the Phaser documentation

Gradient effect Gradient effect properties

Bloom FX

Bloom is an effect used to reproduce an imaging artifact of real-world cameras. The effect produces fringes of light extending from the borders of bright areas in an image, contributing to the illusion of an extremely bright light overwhelming the camera or eye capturing the scene.

Learn more about the Phaser.FX.Bloom properties in the Phaser documentation

Bloom effect Bloom effect properties

Circle FX

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.

Learn more about the Phaser.FX.Circle properties in the Phaser documentation

Circle effect Circle effect properties

Barrel FX

A barrel effect allows you to apply either a ‘pinch’ or ‘expand’ distortion to a Game Object. The amount of the effect can be modified in real-time.

Learn more about the Phaser.FX.Barrel properties in the Phaser documentation

Barrel effect Barrel effect properties

Displacement FX

This effect will draw a displacement around the texture of the Game Object, effectively masking off any area outside of the displacement without the need for an actual mask. You can control the thickness of the displacement, the color of the displacement and the color of the background, should the texture be transparent. You can also control the feathering applied to the displacement, 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.

Learn more about the Phaser.FX.Displacement properties in the Phaser documentation

Displacement effect Displacement effect properties

Wipe FX

The wipe or reveal effect is a visual technique that gradually uncovers or conceals elements in the game, such as images, text, or scene transitions. This effect is often used to create a sense of progression, reveal hidden content, or provide a smooth and visually appealing transition between game states.

It is up to you to set the progress value yourself, i.e. via a Tween, in order to transition the effect.

Learn more about the Phaser.FX.Wipe properties in the Phaser documentation

Wipe effect Wipe effect properties

Bokeh FX

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.

ColorMatrix FX

ColorMatrix 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.

Learn more about the Phaser.FX.ColorMatrix properties in the Phaser documentation

The ColorMatrix FX has different presets that can be used to create different effects.

The presets are:

ColorMatrix effect

All presets have in common the following properties:

Color Matrix properties