Support for Multi Pack assets generated by Texture packer in AnimatedSprite

Hello, Today, I tried v5.4.0-rc.1 release of Pixijs which contains the feature for loading Multi Pack assets generated by Texture packer.

I figured out that loading is working fine though I was expecting it is working in PIXI.AnimatedSprite out of the box as in the same fashion as normal texture packed assets with animation. (May be I am wrong here and there is an oob way to trigger it in the animation).

I wrote a code snippet which is one of the way to feed sequence of texture collected from multi pack to PIXI.AnimatedSprite. `

// load sprite sheet image + data file, call setup() if completed
PIXI.loader.add(spritesheetname).load(setup);

function setup() {
  const referencedSpriteSheet = PIXI.loader.resources[spritesheetname];
  const multiPack = referencedSpriteSheet.data.meta.related_multi_packs;
  let multiPackTexttureMap = { ...referencedSpriteSheet.spritesheet.textures };
  if (multiPack && multiPack.length > 0) {
    multiPack.forEach((mpack) => {
      const textureName = mpack.replace(".json", ""); // Honestly, I don't like to do this 😞 
      const _mpackSheet = PIXI.loader.resources[textureName].spritesheet;
      if (_mpackSheet.textures) {
        multiPackTexttureMap = Object.assign(
          multiPackTexttureMap,
          _mpackSheet.textures
        );
      }
    });
  }

  const animationSeq = referencedSpriteSheet.data.animations["animation"];
  const animationSeqTextures = animationSeq.map(
    (frame) => multiPackTexttureMap[frame]
  );
  app.stage.scale.x = 3;
  app.stage.scale.y = 3;

  // create an animated sprite
  createRunAnimation(animationSeqTextures);

  runnerAnimation.play();

  // add it to the stage and render!
  app.ticker.add((delta) => {});
}

function createRunAnimation(animationArray) {
  _animation = new PIXI.AnimatedSprite(animationArray);
  _animation.animationSpeed = 0.6;
  _animation.position.set(0, 0); // almost bottom-left corner of the canvas
  _animation.loop = true;
  app.stage.addChild(_animation);
}

`

Please suggest improvements or other optimized way to do it as this utility is one of the base in my application which rich of animations and assets are multi packed because of I want the sprites to be less than 2 mb and there are atleast 50 such sprites.

Thanks in advance.

Environment

• pixi.js version:v5.4.0-rc.1
• Browser & Version: Chrome
• OS & Version: macOS

[CodeAndWeb]

Just experimented with it in PixiJS 6.3.2 version.

TexturePacker does the following: It sets the related_multi_packs for each file so that all files in a multipack set can be found. This allows PixiJS to load all related sprite sheets which seems to work.

TexturePacker also writes the animations array to the first sprite sheet - with the whole list of sprites.

Receiving the animations from the first sheet

let sheet = app.loader.resources["spritesheet-0.json"].spritesheet;

contains only the animation frames that can be resolved on this sheet - the others are all undefined - which is obviously not what we expect.

I tried adding the animation entry to all other sprite sheets json files (manually), and receiving them with app.loader also returns animations with undefined. Merging them would most likely lead to a complete animation.

Adding the animation frames to all sprite sheet json files is redundant and only increases the download size with no use for anybody.

It is also bad from the standpoint of a developer: It requires loading all sprite sheets manually and merging the animation frames.

I think that this should really be part of PixiJS - so that loading the first sprite sheet of a set should suffice. After loading the related sprite sheets, PixiJS could easily resolve the animation frames.

[CodeAndWeb]

Would it not make more sense to simply let TexturePacker put an array in the .json files instead of collecting and sorting the sprites at runtime?

Something like:

animations: {
	'dog': {
		frames: ['dog-1','dog-2','dog-3','dog-4','dog-5','dog-6','dog-7','dog-8','dog-9','dog-10' ]
		sheets: [0,1,3,4,5,3,2,3,3,1]
	},
	'cat': {
		frames: ['cat/01','cat/02','cat/03','cat/04']
		sheets: [4,3,2,5]
	},
}