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
for a practical implementation.

Key Features

1. Simplified Configuration

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

2. Animation Management

• Built-in support for multiple named animations
• Easy switching between animations using nextAnimation() and previousAnimation()
• Per-animation speed configuration
• Automatic texture generation from sprite sheets

3. Enhanced Control

• Pause/resume functionality
• Animation reversal support
• Rich event system for animation states

Differences from Pixi.js AnimatedSprite

1. Configuration

• Pixi.js: Requires manual texture array creation
• dill-pixel: Handles texture generation automatically from configuration

2. Animation Management

• Pixi.js: Has basic play/stop functionality
• dill-pixel adds:
  • Named animations
  • Animation switching
  • Per-animation speeds
  • Reverse playback
  • Pause/resume
  • Rich event system using signals

3. Event System
   • dill-pixel adds additional signals:
     • onAnimationChange
     • onAnimationStart
     • onAnimationStop
     • onAnimationLoop
     • onAnimationComplete
     • onAnimationFrameChange

Example Usage

The AnimatedSpriteScene demonstrates a practical implementation:

AnimatedSpriteScene.ts

import { Scene } from 'dill-pixel';

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

This configuration creates a character with multiple animations, each having different frame counts and speeds. The animations can be cycled through by clicking on the sprite:

sprite.eventMode = 'static';
sprite.on('pointerup', () => {
  sprite.nextAnimation();
});

---

Benefits Over Basic Pixi.js Implementation

1. Automatic Asset Management

• Handles sprite sheet references
• Manages texture generation
• Supports zero-padding for frame numbers

2. Game-Ready Features

• Built-in pause/resume
• Animation speed control
• Animation sequencing
• Reverse playback support

3. Developer Experience

• Declarative configuration
• Simplified API
• Robust event system
• Automatic cleanup