Search code examples
pixi.jstexturepacker

Loading Pixi spritesheets from TexturePacker manually and not through Pixi.Loader?


I have been using TexturePacker and Pixi for animations, but now the exported TexturePacker files (multipacked) are stored in a CMS system. The CMS prepends the file names with unpredictable letters and numbers, which makes PIXI unable to link the json and spritesheets together, and also the "related_multi_packs" value in json are now incorrect.

Is there a way to tell PIXI to use these files in a "manual" way? After I load the json files with standard ajax, could I i.e. inject the correct spritesheet url in the json files, and then give it to PIXI somehow?


Solution

  • I ended up parsing it manually as I could find no other way. It was easier than expected.

    1. Loaded json files with axios.
    2. Looped through the multipack files and made sure the correct json and spritesheet was grouped together in an array.
    3. Loaded the spritesheet images with Pixi loader.
    4. Parsed the json and built sprites on the baseTexture with correct frame/trim/orig/rotation.

    Work like a charm.