konfeti - v0.6.0
    Preparing search index...

    Type Alias SpriteSheetShapeOptions

    SpriteSheetShapeOptions: ShapeEntryBase & {
        fps?: Range;
        frames: SpriteFrames;
        loop?: boolean;
        randomStartFrame?: boolean;
        size?: Range<Pixels>;
        src: ImageInput;
        tint?: boolean | TintMode;
        type: "spritesheet";
    }

    Animated Spritesheet Shape Entry. Plays frames from one image, e.g. a spinning coin. size is the rendered frame width.

    Type Declaration

    • Optional Readonlyfps?: Range

      Playback Speed in Frames per Second.

      12

    • Readonlyframes: SpriteFrames

      Frame Layout.

      SpriteFrames

    • Optional Readonlyloop?: boolean

      Loop Playback. When false, the animation holds its last frame.

      true

    • Optional ReadonlyrandomStartFrame?: boolean

      Random Start Frame. Desynchronizes particles so they don't all animate in lockstep.

      true

    • Optional Readonlysize?: Range<Pixels>

      Rendered Frame Width.

      [16, 28]

    • Readonlysrc: ImageInput

      Spritesheet Image. A URL, any canvas image source, or inline <svg> markup (give the <svg> a width and height).

    • Optional Readonlytint?: boolean | TintMode

      Tint. Recolors the sheet with the particle colors (colors, inherited from paper.colors when the entry sets none): every particle picks a color the way a paper piece does and draws a copy of the sheet in that color. true is "multiply" (keeps the shading, so white or grey artwork takes the colors best); "fill" gives flat silhouettes.

      false (the sheet keeps its own colors)

      shapes: [{ type: "spritesheet", src: "/coin-white.png", frames: { cols: 8, rows: 1 }, tint: true, colors: ["#ffd700", "#ff5e7e"] }]
      shapes: [{ type: "spritesheet", src: "/logo.png", frames: { cols: 8, rows: 1 }, tint: "fill" }] // silhouettes in the paper colors

      Each color is painted once per sheet when it has loaded (at its own size, so the frames stay in place); drawing costs the same as without a tint.

      TintMode

    • Readonlytype: "spritesheet"

      Shape Type.

    shapes: [{
      type: "spritesheet",
      src: "/coin-spin.png",
      frames: { cols: 8, rows: 1 },
      fps: [12, 18],
      flip: false,
    }]

    Settings
    Member Visibility