add support for animated sprite sheets

[GregVGW]

Currently when generating sprite sheets, there is no way to mark it as an animated sprite sheet.

This would allow for use in Pixi's AnimatedSprite, as the generated JSON would contain the animations property (listing the textures used as part of the animated sprite).

[hotyes]

hello, do you have any plan to support this? thanks

[reececomo]

A quick helper utility – to load any spritesheet as an AnimatedSprite:

function makeAnimation(sheetName: string, filter?: string): AnimatedSprite {
  const sheet: Spritesheet = Assets.get(sheetName);
  const frames = (filter
    ? Object.keys(sheet.textures).filter(key => key.includes(filter))
    : Object.keys(sheet.textures))
    .sort().map(key => sheet.textures[key]!);

  return new AnimatedSprite(frames);
}

[!TIP]

Supports any spritesheet where input image names are orderable.

myAnimation{tps}/
  ├─ image0001.png
  ├─ image0002.png
  ├─ (...)
  └─ image0012.png

or many animations in a generic spritesheet:

mySpritesheet{tps}/
  ├─ apple0001.png
  ├─ apple0002.png
  ├─ (...)
  ├─ banana0001.png
  ├─ banana0002.png
  ├─ (...)
  ├─ background.png
  └─ (...other textures)

Just make sure you don't run into the classic image10.png < image2.png and you're golden (or provide a compareFn to sort()).

e.g.

// Load a standalone animation
const myAnimation = makeAnimation("assets/myAnimation@1x.json");
myAnimation.play();

// Load animation from any sheet
const appleAnimation = makeAnimation("assets/mySpritesheet@1x.json", "apple");
const bananaAnimation = makeAnimation("assets/mySpritesheet@1x.json", "banana");