An effect as a scene object

An effect is a scene object that you can select 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:

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.