Sign in to follow this  
opd

Load resource from Javascript object instead of JSON URL

Recommended Posts

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 by opd

Share this post


Link to post
Share on other sites

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"]);

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.