Animated Sprite

The AnimatedSprite class in dill-pixel extends Pixi.js’s AnimatedSprite to provide a more game-friendly implementation for frame-based animations. It’s particularly useful for sprite sheets containing multiple animations for a single character or object.

See the Animated Sprites scene in the examples:
Demo | Source

Key Features

const sprite = container.add.animatedSprite({
  animationSpeed: 0.2,
  animation: 'idle',
  sheet: 'characters',
  texturePrefix: 'character_',
  animations: {
    idle: { numFrames: 1 },
    walk: { numFrames: 8 },
    run: { numFrames: 3 },
  },
});

• Simplified Configuration: Automatic texture generation from sprite sheets
• Animation Management: Named animations with per-animation speeds
• Enhanced Control: Pause/resume, reverse playback, and animation switching
• Rich Event System: Comprehensive signals for animation states

Comparison with Pixi.js AnimatedSprite

Feature	Pixi.js	dill-pixel
Configuration	Manual texture array creation	Automatic from config
Animation Management	Basic play/stop	Named animations, switching, per-animation speeds
Events	Basic	Comprehensive signal system

Available Signals

• onAnimationChange
• onAnimationStart/onAnimationStop
• onAnimationLoop/onAnimationComplete
• onAnimationFrameChange

Example Usage

AnimatedSpriteScene.ts

import { Scene } from 'dill-pixel';

export default class AnimatedSpriteScene extends Scene {
  async initialize() {
    const sprite = charContainer.add.animatedSprite({
      animationSpeed: 0.2,
      animation: 'idle',
      sheet: 'characters',
      texturePrefix: `${folderName}/${spriteName}_`,
      // zeroPad: 1, // optional
      animations: {
        idle: { numFrames: 1 },
        walk: { numFrames: 8 },
        run: { numFrames: 3 },
        climb: {
          numFrames: 2,
          animationSpeed: 0.05, // custom speed
        },
      },
    });

    // Cycle through animations on click
    sprite.eventMode = 'static';
    sprite.on('pointerup', () => {
      sprite.nextAnimation();
    });
  }
}

Key Benefits

• Asset Management: Automatic sprite sheet handling and texture generation
• Game-Ready Features: Built-in pause/resume, speed control, and animation sequencing
• Developer Experience: Declarative configuration with simplified API and automatic cleanup