@ujjwalvivek/tinyts
    Preparing search index...

    Class SpriteAnimation

    Tracks and updates sprite-sheet animation state.

    Manages frame timing, looping, and generates SpriteOptions source rectangles suitable for passing directly to drawSprite().

    The update() method correctly handles large delta times by advancing through multiple frames when necessary (e.g. after a frame hitch).

    const walkAnim = new SpriteAnimation({
      frameWidth: 16,
      frameHeight: 16,
      frames: [0, 1, 2, 3],
      speed: 8,       // 8 FPS
      loop: true,
    });

    // In your update loop:
    walkAnim.update(dt);

    // In your render loop:
    const opts = walkAnim.getSpriteOptions(spriteSheet.width);
    drawSprite(spriteSheet, playerPos, vec2(16, 16), opts);
    Index

    Constructors

    constructor

    Properties

    currentFrameIndex done elapsed frameHeight frames frameWidth loop speed

    Methods

    getFrame getSpriteOptions reset update

    Constructors

    Properties

    currentFrameIndex: number = 0

    Index into the frames array (not the frame value itself).

    done: boolean = false

    true once a non-looping animation has played its last frame.

    elapsed: number = 0

    Accumulated time for the current frame (seconds).

    frameHeight: number

    Height of a single frame in the sprite sheet, in pixels.

    frames: number[]

    Ordered array of frame indices into the sprite sheet.

    frameWidth: number

    Width of a single frame in the sprite sheet, in pixels.

    loop: boolean

    Whether the animation loops back to the first frame after finishing.

    speed: number

    Playback speed in frames per second.

    Methods

    • Return the current frame index value from the frames array.

      Returns number

      The sprite-sheet frame index for the current animation state.

    • Compute SpriteOptions source-rectangle fields for the current frame, given the total width of the sprite sheet.

      The frame index is mapped to a grid position assuming frames are arranged left-to-right, top-to-bottom in the sheet.

      Parameters

      • sheetWidth: number

        Total width of the sprite sheet image in pixels.

      Returns SpriteOptions

      A SpriteOptions object with sourceX, sourceY, sourceWidth, and sourceHeight populated.

      const opts = anim.getSpriteOptions(spriteSheet.width);
      drawSprite(spriteSheet, pos, size, opts);

    • Advance the animation by dt seconds.

      Handles frame skipping correctly - if dt is large enough to span multiple frames (e.g. after a hitch), all intermediate frames are consumed so the animation stays in sync with wall-clock time.

      Parameters

      • dt: number

        Delta time in seconds since the last update.

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Methods