melonJS
    Preparing search index...

    Class MaskEffect

    A camera effect that performs a mask-based scene transition. A shape (ellipse, polygon) is scaled from full-screen to zero (hide) or from zero to full-screen (reveal), with the area outside the shape filled with a solid color.

    // iris transition (circle shrinks to hide the scene)
    camera.addCameraEffect(new MaskEffect(camera, {
        shape: new Ellipse(0, 0, 1, 1),
        color: "#000",
        duration: 500,
        direction: "hide",
    }));

    // diamond reveal transition
    camera.addCameraEffect(new MaskEffect(camera, {
        shape: new Polygon(0, 0, [
            { x: 0, y: -1 }, { x: 1, y: 0 },
            { x: 0, y: 1 }, { x: -1, y: 0 },
        ]),
        color: "#000",
        duration: 500,
        direction: "reveal",
    }));

    Hierarchy (View Summary)

    Index

    Constructors

    constructor

    Properties

    camera color direction isComplete isPersistent onComplete progress shape tween

    Methods

    destroy draw update

    Constructors

    • Parameters

      • camera: Camera2d

        the camera to apply the transition to

      • options: {
            color: string | Color;
            direction?: "hide" | "reveal";
            duration?: number;
            onComplete?: () => void;
            shape: MaskShape;
        }

        transition parameters

        • color: string | Color

          CSS color value or Color instance for the transition fill

        • Optionaldirection?: "hide" | "reveal"

          "hide" shrinks the visible area, "reveal" grows it

        • Optionalduration?: number

          transition duration in milliseconds

        • OptionalonComplete?: () => void

          callback when the transition finishes

        • shape: MaskShape

          an Ellipse or Polygon (unit-sized, centered at origin) defining the mask shape

      Returns MaskEffect

    Properties

    camera: Camera2d

    the camera this effect is attached to

    color: Color

    the transition fill color

    direction: "hide" | "reveal"

    transition direction

    isComplete: boolean

    whether this effect has finished and should be removed

    isPersistent: boolean

    whether this effect should persist across camera/game resets (e.g. transition effects that span state changes)

    false
    onComplete: (() => void) | undefined

    optional callback when transition completes

    progress: { value: number }

    current progress value (0 = fully covered, 1 = fully visible)

    shape: MaskShape

    the mask shape template (unit-sized, centered at origin)

    tween: Tween

    the tween controlling progress

    Methods

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Methods