Load resource from Javascript object instead of JSON URL

[opd]

I'm using Texture Packer to create spritesheets and then loading them from the .json file.  Like this:

this.loader.add('main','./ims/mySprite.json');

...

let myResources=this.loader.resources.main.textures;

...

let myBackground=new PIXI.Sprite(myResources["background.png"]);
let myButton=new PIXI.Sprite(myResources["button.png"]);

However, I have a dozen or so different sprites that load at different times and I don't want to have to load a json file for each one.  I think it makes more sense to just load the images and then keep the frame data in the javascript, as an object that is passed to the loader.  Basically, copy paste the json file into my JS. Something like this:

const myData={
"meta":{

...

};


this.loader.add('main',myData);

Is it possible to do this?

As an alternative, would it be advisable to load the image and then dynamically create a Texture for each sprite?  Something like this:

this.loader.add('main','./ims/mySprite.png');

...

let myResources=[];
let titleRect=new PIXI.Rectangle(1,1,800,550);
let backRect=new PIXI.Rectangle(1,925,363,76);
myResources['title']=new PIXI.Texture(this.loader.resources.main.texture.baseTexture,titleRect);
myResources['background']=new PIXI.Texture(this.loader.resources.main.texture.baseTexture,backRect);

...

let myBackground=new PIXI.Sprite(myResources["background"]);

This seems to work, but I'm concerned that this isn't the correct way to do it, or perhaps that this will miss out on some optimizations that PIXI does.

Edited June 29, 2020 by opd

[opd]

If anyone is interested, I solved this by importing the json file and then using the Spritesheet class, as per this thread

https://github.com/pixijs/pixi.js/issues/4029

import mySheetData from '../mySheet.json';

...

startLoad(){
	this.loader.add('main',mySheetData.meta.image);
	this.loader.on('complete',this.loaded.bind(this));
	this.loader.load();
}

loaded(){
	let mySheet=new PIXI.Spritesheet(this.loader.resources.main.texture.baseTexture,mySheetData);
	mySheet.parse(() => {
		myResources=mySheet.textures;
	});
}

...

this.background=new PIXI.Sprite(myResources["background.png"]);

 

[ivan.popelyshev]

You dont need to use callback there if you have less than 1000 textures, that thing is async only for really big spritesheets.