phaser - v3.90.0
    Preparing search index...

    Interface FX

    interface FX {
        enabled: boolean;
        gameObject: GameObject;
        isPost: boolean;
        list: Controller[];
        padding: number;
        add<T extends Controller>(fx: T, config?: object): Controller;
        addBarrel(amount?: number): Barrel;
        addBloom(
            color?: number,
            offsetX?: number,
            offsetY?: number,
            blurStrength?: number,
            strength?: number,
            steps?: number,
        ): Bloom;
        addBlur(
            quality?: number,
            x?: number,
            y?: number,
            strength?: number,
            color?: number,
            steps?: number,
        ): Blur;
        addBokeh(radius?: number, amount?: number, contrast?: number): Bokeh;
        addCircle(
            thickness?: number,
            color?: number,
            backgroundColor?: number,
            scale?: number,
            feather?: number,
        ): FX.Circle;
        addColorMatrix(): FX.ColorMatrix;
        addDisplacement(texture?: string, x?: number, y?: number): Displacement;
        addGlow(
            color?: number,
            outerStrength?: number,
            innerStrength?: number,
            knockout?: boolean,
            quality?: number,
            distance?: number,
        ): Glow;
        addGradient(
            color1?: number,
            color2?: number,
            alpha?: number,
            fromX?: number,
            fromY?: number,
            toX?: number,
            toY?: number,
            size?: number,
        ): Gradient;
        addPixelate(amount?: number): Pixelate;
        addReveal(wipeWidth?: number, direction?: number, axis?: number): Wipe;
        addShadow(
            x?: number,
            y?: number,
            decay?: number,
            power?: number,
            color?: number,
            samples?: number,
            intensity?: number,
        ): Shadow;
        addShine(
            speed?: number,
            lineWidth?: number,
            gradient?: number,
            reveal?: boolean,
        ): Shine;
        addTiltShift(
            radius?: number,
            amount?: number,
            contrast?: number,
            blurX?: number,
            blurY?: number,
            strength?: number,
        ): Bokeh;
        addVignette(
            x?: number,
            y?: number,
            radius?: number,
            strength?: number,
        ): Vignette;
        addWipe(wipeWidth?: number, direction?: number, axis?: number): Wipe;
        clear(): this;
        destroy(): void;
        disable(clear?: boolean): this;
        enable(padding?: number): void;
        onFX(pipeline: PreFXPipeline): void;
        onFXCopy(pipeline: PreFXPipeline): void;
        remove<T extends Controller>(fx: T): this;
        setPadding(padding?: number): this;
    }
    Index

    Properties

    enabled gameObject isPost list padding

    Methods

    add addBarrel addBloom addBlur addBokeh addCircle addColorMatrix addDisplacement addGlow addGradient addPixelate addReveal addShadow addShine addTiltShift addVignette addWipe clear destroy disable enable onFX onFXCopy remove setPadding

    Properties

    enabled: boolean

    Has this FX Component been enabled?

    You should treat this property as read-only, although it is toggled automaticaly during internal use.

    gameObject: GameObject

    A reference to the Game Object that owns this FX Component.

    isPost: boolean

    Is this a Post FX Controller? or a Pre FX Controller?

    list: Controller[]

    An array containing all of the Pre FX Controllers that have been added to this FX Component. They are processed in the order they are added.

    This array is empty if this is a Post FX Component.

    padding: number

    The amount of extra padding to be applied to this Game Object when it is being rendered by a PreFX Pipeline.

    Lots of FX require additional spacing added to the texture the Game Object uses, for example a glow or shadow effect, and this method allows you to control how much extra padding is included in addition to the texture size.

    You do not need to set this if you're only using Post FX.

    Methods

    • Adds the given FX Controler to this FX Component.

      Note that adding an FX Controller does not remove any existing FX. They all stack-up on-top of each other. If you don't want this, make sure to call either remove or clear first.

      Type Parameters

      Parameters

      • fx: T

        The FX Controller to add to this FX Component.

      • Optionalconfig: object

        Optional configuration object that is passed to the pipeline during instantiation.

      Returns Controller

    • Adds a Barrel effect.

      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.

      Parameters

      • Optionalamount: number

        The amount of distortion applied to the barrel effect. A value of 1 is no distortion. Typically keep this within +- 1. Default 1.

      Returns Barrel

    • Adds a Bloom effect.

      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.

      Parameters

      • Optionalcolor: number

        The color of the Bloom, as a hex value.

      • OptionaloffsetX: number

        The horizontal offset of the bloom effect. Default 1.

      • OptionaloffsetY: number

        The vertical offset of the bloom effect. Default 1.

      • OptionalblurStrength: number

        The strength of the blur process of the bloom effect. Default 1.

      • Optionalstrength: number

        The strength of the blend process of the bloom effect. Default 1.

      • Optionalsteps: number

        The number of steps to run the Bloom effect for. This value should always be an integer. Default 4.

      Returns Bloom

    • Adds a Blur effect.

      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.

      Parameters

      • Optionalquality: number

        The quality of the blur effect. Can be either 0 for Low Quality, 1 for Medium Quality or 2 for High Quality. Default 0.

      • Optionalx: number

        The horizontal offset of the blur effect. Default 2.

      • Optionaly: number

        The vertical offset of the blur effect. Default 2.

      • Optionalstrength: number

        The strength of the blur effect. Default 1.

      • Optionalcolor: number

        The color of the blur, as a hex value. Default 0xffffff.

      • Optionalsteps: number

        The number of steps to run the blur effect for. This value should always be an integer. Default 4.

      Returns Blur

    • Adds a Bokeh effect.

      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.

      See also Tilt Shift.

      Parameters

      • Optionalradius: number

        The radius of the bokeh effect. Default 0.5.

      • Optionalamount: number

        The amount of the bokeh effect. Default 1.

      • Optionalcontrast: number

        The color contrast of the bokeh effect. Default 0.2.

      Returns Bokeh

    • Adds a Circle effect.

      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.

      Parameters

      • Optionalthickness: number

        The width of the circle around the texture, in pixels. Default 8.

      • Optionalcolor: number

        The color of the circular ring, given as a number value. Default 0xfeedb6.

      • OptionalbackgroundColor: number

        The color of the background, behind the texture, given as a number value. Default 0xff0000.

      • Optionalscale: number

        The scale of the circle. The default scale is 1, which is a circle the full size of the underlying texture. Default 1.

      • Optionalfeather: number

        The amount of feathering to apply to the circle from the ring. Default 0.005.

      Returns FX.Circle

    • Adds a ColorMatrix effect.

      The color matrix effect is a visual technique that involves manipulating the colors of an image or scene using a mathematical matrix. This process can adjust hue, saturation, brightness, and contrast, allowing developers to create various stylistic appearances or mood settings within the game. Common applications include simulating different lighting conditions, applying color filters, or achieving a specific visual style.

      Returns FX.ColorMatrix

    • Adds a Displacement effect.

      The displacement effect is a visual technique that alters the position of pixels in an image or texture based on the values of a displacement map. This effect is used to create the illusion of depth, surface irregularities, or distortion in otherwise flat elements. It can be applied to characters, objects, or backgrounds to enhance realism, convey movement, or achieve various stylistic appearances.

      Parameters

      • Optionaltexture: string

        The unique string-based key of the texture to use for displacement, which must exist in the Texture Manager. Default '__WHITE'.

      • Optionalx: number

        The amount of horizontal displacement to apply. A very small float number, such as 0.005. Default 0.005.

      • Optionaly: number

        The amount of vertical displacement to apply. A very small float number, such as 0.005. Default 0.005.

      Returns Displacement

    • Adds a Glow effect.

      The glow effect is a visual technique that creates a soft, luminous halo around game objects, characters, or UI elements. This effect is used to emphasize importance, enhance visual appeal, or convey a sense of energy, magic, or otherworldly presence. The effect can also be set on the inside of the Game Object. The color and strength of the glow can be modified.

      Parameters

      • Optionalcolor: number

        The color of the glow effect as a number value. Default 0xffffff.

      • OptionalouterStrength: number

        The strength of the glow outward from the edge of the Sprite. Default 4.

      • OptionalinnerStrength: number

        The strength of the glow inward from the edge of the Sprite. Default 0.

      • Optionalknockout: boolean

        If true only the glow is drawn, not the texture itself. Default false.

      • Optionalquality: number

        Only available for PostFX. Sets the quality of this Glow effect. Default is 0.1. Cannot be changed post-creation. Default 0.1.

      • Optionaldistance: number

        Only available for PostFX. Sets the distance of this Glow effect. Default is 10. Cannot be changed post-creation. Default 10.

      Returns Glow

    • Adds a Gradient effect.

      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.

      Parameters

      • Optionalcolor1: number

        The first gradient color, given as a number value. Default 0xff0000.

      • Optionalcolor2: number

        The second gradient color, given as a number value. Default 0x00ff00.

      • Optionalalpha: number

        The alpha value of the gradient effect. Default 0.2.

      • OptionalfromX: number

        The horizontal position the gradient will start from. This value is normalized, between 0 and 1, and is not in pixels. Default 0.

      • OptionalfromY: number

        The vertical position the gradient will start from. This value is normalized, between 0 and 1, and is not in pixels. Default 0.

      • OptionaltoX: number

        The horizontal position the gradient will end at. This value is normalized, between 0 and 1, and is not in pixels. Default 0.

      • OptionaltoY: number

        The vertical position the gradient will end at. This value is normalized, between 0 and 1, and is not in pixels. Default 1.

      • Optionalsize: number

        How many 'chunks' the gradient is divided in to, as spread over the entire height of the texture. Leave this at zero for a smooth gradient, or set higher for a more retro chunky effect. Default 0.

      Returns Gradient

    • Adds a Pixelate effect.

      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.

      Parameters

      • Optionalamount: number

        The amount of pixelation to apply. Default 1.

      Returns Pixelate

    • Adds a Reveal Wipe effect.

      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.

      You can set both the direction and the axis of the wipe effect. The following combinations are possible:

      • left to right: direction 0, axis 0
      • right to left: direction 1, axis 0
      • top to bottom: direction 1, axis 1
      • bottom to top: direction 1, axis 0

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

      Parameters

      • OptionalwipeWidth: number

        The width of the wipe effect. This value is normalized in the range 0 to 1. Default 0.1.

      • Optionaldirection: number

        The direction of the wipe effect. Either 0 or 1. Set in conjunction with the axis property. Default 0.

      • Optionalaxis: number

        The axis of the wipe effect. Either 0 or 1. Set in conjunction with the direction property. Default 0.

      Returns Wipe

    • Adds a Shadow effect.

      The shadow effect is a visual technique used to create the illusion of depth and realism by adding darker, offset silhouettes or shapes beneath game objects, characters, or environments. These simulated shadows help to enhance the visual appeal and immersion, making the 2D game world appear more dynamic and three-dimensional.

      Parameters

      • Optionalx: number

        The horizontal offset of the shadow effect. Default 0.

      • Optionaly: number

        The vertical offset of the shadow effect. Default 0.

      • Optionaldecay: number

        The amount of decay for shadow effect. Default 0.1.

      • Optionalpower: number

        The power of the shadow effect. Default 1.

      • Optionalcolor: number

        The color of the shadow. Default 0x000000.

      • Optionalsamples: number

        The number of samples that the shadow effect will run for. An integer between 1 and 12. Default 6.

      • Optionalintensity: number

        The intensity of the shadow effect. Default 1.

      Returns Shadow

    • Adds a Shine effect.

      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.

      Parameters

      • Optionalspeed: number

        The speed of the Shine effect. Default 0.5.

      • OptionallineWidth: number

        The line width of the Shine effect. Default 0.5.

      • Optionalgradient: number

        The gradient of the Shine effect. Default 3.

      • Optionalreveal: boolean

        Does this Shine effect reveal or get added to its target? Default false.

      Returns Shine

    • Adds a Tilt Shift effect.

      This Bokeh 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.

      See also Bokeh.

      Parameters

      • Optionalradius: number

        The radius of the bokeh effect. Default 0.5.

      • Optionalamount: number

        The amount of the bokeh effect. Default 1.

      • Optionalcontrast: number

        The color contrast of the bokeh effect. Default 0.2.

      • OptionalblurX: number

        The amount of horizontal blur. Default 1.

      • OptionalblurY: number

        The amount of vertical blur. Default 1.

      • Optionalstrength: number

        The strength of the blur. Default 1.

      Returns Bokeh

    • Adds a Vignette effect.

      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.

      Parameters

      • Optionalx: number

        The horizontal offset of the vignette effect. This value is normalized to the range 0 to 1. Default 0.5.

      • Optionaly: number

        The vertical offset of the vignette effect. This value is normalized to the range 0 to 1. Default 0.5.

      • Optionalradius: number

        The radius of the vignette effect. This value is normalized to the range 0 to 1. Default 0.5.

      • Optionalstrength: number

        The strength of the vignette effect. Default 0.5.

      Returns Vignette

    • Adds a Wipe effect.

      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.

      You can set both the direction and the axis of the wipe effect. The following combinations are possible:

      • left to right: direction 0, axis 0
      • right to left: direction 1, axis 0
      • top to bottom: direction 1, axis 1
      • bottom to top: direction 1, axis 0

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

      Parameters

      • OptionalwipeWidth: number

        The width of the wipe effect. This value is normalized in the range 0 to 1. Default 0.1.

      • Optionaldirection: number

        The direction of the wipe effect. Either 0 or 1. Set in conjunction with the axis property. Default 0.

      • Optionalaxis: number

        The axis of the wipe effect. Either 0 or 1. Set in conjunction with the direction property. Default 0.

      Returns Wipe

    • Destroys and removes all FX Controllers that are part of this FX Component, then disables it.

      If this is a Pre FX Component it will only remove Pre FX. If this is a Post FX Component it will only remove Post FX.

      To remove both at once use the GameObject.clearFX method instead.

      Returns this

    • Destroys this FX Component.

      Called automatically when Game Objects are destroyed.

      Returns void

    • Disables this FX Component.

      This will reset the pipeline on the Game Object that owns this component back to its default and flag this component as disabled.

      You can re-enable it again by calling enable for Pre FX or by adding an FX for Post FX.

      Optionally, set clear to destroy all current FX Controllers.

      Parameters

      • Optionalclear: boolean

        Destroy and remove all FX Controllers that are part of this component. Default false.

      Returns this

    • Enables this FX Component and applies the FXPipeline to the parent Game Object.

      This is called automatically whenever you call a method such as addBloom, etc.

      You can check the enabled property to see if the Game Object is already enabled, or not.

      This only applies to Pre FX. Post FX are always enabled.

      Parameters

      • Optionalpadding: number

        The amount of padding to add to this Game Object. Default 0.

      Returns void

    • This callback is invoked when this Game Object is rendered by a PreFX Pipeline.

      This happens when the pipeline uses its drawSprite method.

      It's invoked prior to the draw, allowing you to set shader uniforms, etc on the pipeline.

      Parameters

      • pipeline: PreFXPipeline

        The PreFX Pipeline that invoked this callback.

      Returns void

    • This callback is invoked when this Game Object is copied by a PreFX Pipeline.

      This happens when the pipeline uses its copySprite method.

      It's invoked prior to the copy, allowing you to set shader uniforms, etc on the pipeline.

      Parameters

      • pipeline: PreFXPipeline

        The PreFX Pipeline that invoked this callback.

      Returns void

    • Searches for the given FX Controller within this FX Component.

      If found, the controller is removed from this component and then destroyed.

      Type Parameters

      Parameters

      • fx: T

        The FX Controller to remove from this FX Component.

      Returns this

    • Sets the amount of extra padding to be applied to this Game Object when it is being rendered by a PreFX Pipeline.

      Lots of FX require additional spacing added to the texture the Game Object uses, for example a glow or shadow effect, and this method allows you to control how much extra padding is included in addition to the texture size.

      You do not need to set this if you're only using Post FX.

      Parameters

      • Optionalpadding: number

        The amount of padding to add to this Game Object. Default 0.

      Returns this

    Settings

    Member Visibility

    On This Page

    Properties
    Methods