Loading atlases and spine animations from base64 assets.

[SenPie]

Hi everyone,

I am making a project which will have assets inlined as base64 streams, however I am stuck don't know how to load them. Thing is, that I use webpack to inline all of the assets into single html file and I can use them by importing at the top of my js file, like so
 

import atlas_texture from 'assets/atlas.png;
import atlas_json from 'assets/atlas.json;

I can load individual png images, however the issue is that because I get my assets in base64 format, I don't know how I can feed them to PIXI.Loader so it can load them and make textures from json. When I try to load the atlas, I do the following

import atlas_texture from 'assets/atlas.png;
import atlas_json from 'assets/atlas.json;

loader.add(atlas_json).load(() => {
	console.log("yey it's loaded")
});

but I get following error

Uncaught Error: No url passed to add resource to loader.
    add resource-loader.esm.js:1976
    App index.ts:63
    onload (index):37
resource-loader.esm.js:1976

Because I can't pass json, I have that issue both when trying to laod atlas spritesheets and also when I try to load spine animations.

After a long research I found some workaround for loading altas spritesheets, however it is not perfect and it doesn't solve the issue with loading spine.

Code is following:

import atlas_texture from 'assets/atlas.png;
import atlas_json from 'assets/atlas.json;

loader.add({url: atlas_texture, name: 'texture'}).load(() => {
  const  sheet = new Spritesheet(
    Loader.shared.resources['texture'].texture.baseTexture, 
    atlas_json
  );
  sheet.parse((...args) => {
    console.log(sheet.textures); // it loaded correctly
  });
  
});

It only loads image, and then in the load part constructs spritesheet based on the json I provide. However, compared to traditional loading way, when in load function I would already have access to my textures, now I need to spend extra steps making that textres in load, which is also async.

As under the hood Loader tries to download resources that I provide a path to, I was wondering maybe there is a way to tell Loader that it does not have to download anything and json is already provided. However I could not find anything like that in forums. Also, in that case new issue appears because in .json file Loader will see that it needs atlas.png, which does not exist in the build and insead I have base64 string. If only there was a way to do something like this it would be amazing.
 

loader.add(atlas.json, 'base64.image') // so it knows which image to use with which json to construct atlas

and also

loader.add(spine_atlas.json, 'base64.atlast_image') // so it knows which image to use with which json to construct spine animation

 

[SenPie]

almost forgot here is the link to the project repo, so you can see yourself how everything is inlined.
https://github.com/TheSenPie/webpack-playable-boilerplate