Issue Loading JSON Manifest with Webpack in Pixi.js

[BogdanLyopa]

Hello Pixi.js Community,

I am working on a project where I need to bundle everything into a single HTML file using Webpack. I've encountered an issue where I cannot successfully load a JSON manifest that includes all images, spritesheets, and atlas files using the Assets module in Pixi.js.

I am trying to load a JSON manifest that contains references to various assets (images, spritesheets, atlas files) required by my Pixi.js application. However, the assets are not being loaded properly, and my application cannot find the referenced assets at runtime.

Is there a specific configuration or plugin for Webpack that works well with Pixi.js for loading a JSON manifest with all required assets?
Can anyone provide an example or guidance on how to properly bundle these assets so they are accessible at runtime when everything is compiled into a single HTML file?

I would greatly appreciate any insights, examples, or suggestions the community can offer to help resolve this issue. Thank you for your time and assistance!

[bigtimebuddy]

Good question. Here's a simple example if you're trying to load the spritesheet from base64 URIs (probably that you've imported via Webpack).

https://jsfiddle.net/bigtimebuddy/6h0djvws/

Essentially, you want to use the Spritesheet class to parse the spitesheet:

const atlas = new Spritesheet({ data, texture });
await atlas.parse();

Where data is the JSON object, and texture is your Texture instance.

Hope that helps.

[BogdanLyopa]

Thank you for your assistance! It was very helpful.

Regarding the loading of Spine assets, when I load a Spine asset, it simply parses the JSON file and returns it as an object in the format {skeleton: {...}, bones: Array(6), slots: Array(8), paths: Array(3), skins: Array(1), ...}. How can I address this issue?

[bigtimebuddy]

I'm less familiar with how to parse Spine assets manually. You might want to look add atlasLoader.ts or leave a comment on that project.