PostFX Pipeline type mismatch compared to pipeline usage in examples

[taulant]

Version

• Phaser Version: 3.70.0
• Operating system: Windows 11 Pro Version 21H2
• Browser: Chrome Version 121.0.6167.161

Description

There seems to be a type mismatch between most pipeline examples posted online and what is actually supported in phaser with typescript.

Example Test Code

The code examples that use pipelines are from this repo. https://github.com/phaserjs/examples

In this codebase you can import multiple pipelines into the config variable.

const config = {
    type: Phaser.AUTO,
    width: 1024,
    height: 768,
    backgroundColor: '#002157',
    parent: 'phaser-example',
    scene: [ Preloader, MainMenu, Game ],
    pipeline: { ShinePostFX, WipePostFX }
};

When I try to import a pipeline through this syntax pipeline: { ScalinePostFX, HueRotatePostFX }, I am getting an error regarding the pipeline type .

TS2322: Type '{ ScalinePostFX: any; HueRotatePostFX: any; }' is not assignable to type 'PipelineConfig'.
  Object literal may only specify known properties, and 'ScalinePostFX' does not exist in type 'PipelineConfig'.

The type of the pipeline Phaser.Types.Core.PipelineConfig is supposed to look like this and it implies only one pipeline can be assigned to the configuration.

type PipelineConfig = {
    /**
     * The name of the pipeline. Must be unique within the Pipeline Manager.
     */
    name: string;
    /**
     * The pipeline class. This should be a constructable object, **not** an instance of a class.
     */
    pipeline: Phaser.Renderer.WebGL.WebGLPipeline;
    /**
     * Sets the `PipelineManager.frameInc` value to control the dimension increase in the Render Targets.
     */
    frameInc?: number;
};

I've also tried assigning one pipeline like it is outlined in the type but it still doesn't work.

 pipeline: { name: "ScalinePostFX", pipeline: ScalinePostFX }

This throws this error:

Uncaught TypeError: pipelineClass is not a constructor

Additional Information

All the shaders pipelines I used are also in the examples repo. These are not custom pipelines.

Was this a recent architectural change that hasn't made it yet to examples posted online? Or am I missing something very essential?

Any help would be appreciated.

[taulant]

@gammafp Any idea how to import a shader into the Phaser 3 with typescript?

[taulant]

@photonstorm Are there any more recent pipeline examples of this that follow the pipeline type object structure specified in Phaser 3.70.0?

[taulant]

🦗

[Japegrape]

I am also currently running into this issue. Any new developments?

[photonstorm]

Thank you for submitting this issue. We have fixed this and the fix has been pushed to the master branch. It will be part of the next release. If you get time to build and test it for yourself we would appreciate that.