TexturePacker Multipacked Textures

[moonbyt3]

Hey guys
I've started gambling slot project in pixi.js + typescript, but I hit the wall and need some advice about multipacked spritesheets.
I recieved pngs for animating wining lines on slot. Each image is 1920x1080, which means when I load all 75 images into single spritesheet it becomes around 16K width/height which is a NO NO if I understand correctly. Spritesheets shouldn't be more than 2K in order to load properly on mobile devices.
So I tried to use TexturePacker's "multi pack" option. Now I recieved  37 pngs (every spritesheet is now 1920x2160 - two frames in each) and jsons for that one animation. 
My question is how can I pack everything and start animation?

Currently i have one json file for all other assets, and those animations run fine, since their spritesheets aren't that large (those are reel symbols, and smaller animations)

{
  "animatedA": "/assets/animations/a.json",
  "animatedChest": "/assets/animations/chest.json",
  "animatedCoins": "/assets/animations/coins.json",
  "animatedCrown": "/assets/animations/crown.json",
  "animatedGoblet": "/assets/animations/goblet.json",
  ......
}

This is the code used for loading assets from json

import * as PIXI from 'pixi.js';
import { toPairs as _toPairs, range as _range } from 'lodash';
import assetsJson from '../data/assets.json';
// rest of imports

class Renderer {
  private loadingBar: PIXI.Graphics;

  private constructor() {
    ....
  }

  loadAssets = (): void => {
    _toPairs(assetsJson)
      .reduce((loader: PIXI.Loader, [name, path]: [string, string]) => {
        return PIXI.Loader.shared.add(name, path);
      }, this.app.loader)
      .load(this.onAssetsLoaded)
      .onProgress.add((loader) => {
        this.loadingBar.position.x = window.innerWidth / 2 - this.loadingBar.width / 2;
        this.loadingBar.drawRect(0, 0, Math.ceil(loader.progress) * 3, 10);
      });
  };
}

Now, I wouldn't like to paste all 37 paths to assets.json like 

{
  ...
  "multiLineSpike_1": "/assets/animations/line-spike/line-spike-0.json",
  "multiLineSpike_2": "/assets/animations/line-spike/line-spike-1.json",
  "multiLineSpike_3": "/assets/animations/line-spike/line-spike-2.json",
  "multiLineSpike_4": "/assets/animations/line-spike/line-spike-3.json",
  ...
}

since those are only for one wining line animation, i will have 8 of them, which means it will take for ages.

Is there any way i can loop trough files and add them in more elegant way?
 

[jonforum]

Hi, sorry but PIXI cant load multiPack from tp , but i asked Andreas Loew to add some meta to make this easier.
So now you have 2 new meta named related_multi_packs and normal_map inside json to manage easier in PIXI.
Check your version of Texture Packer pro, I can't remember what update where this added.

here for you a example from my game loader core, it show you one way to manage and process multi-pack , normals, and animations.
https://github.com/djmisterjon/ANFT/blob/e4002fab0428331fa5c5e844f1e9426a2795c5ec/js/game/global/loaders.js#L398

Sorry my example is very customised for my game engine and maybe not a good approche for you, i dont think you will can found a better free public demo code.
Note this example is old and maybe have some weird code but it work.

tips:look also for loader.pre

https://pixijs.download/dev/docs/PIXI.Loader.html
otherwise you would have to see with @xerver, (Autor) or @AndreasLoew , if they intends to implement a native multipack support in the PixiLoader with new metas from tp, but multi-pack remains a paid premium feature from tp.

14 hours ago, moonbyt3 said:

Now, I wouldn't like to paste all 37 paths to assets.json like 

Is there any way i can loop trough files and add them in more elegant way?

Sure , create a simple node programme to leech all your ressources files from a directory and build a register! no need to handwrite all your game resources !
Your will just need to have a good structures folders hierarchy. 

or use npm recursive-readdir  

https://www.npmjs.com/package/recursive-readdir

Edited September 26, 2020 by jonforum

[moonbyt3]

Thanks for info, it will be helpful ❤️