Loader add json manually without reference to file

[AntoniaChimp]

Hey !

I dont want a call from javascript to look for my "sprites.json", so I thought that I put the json within the js
and then tell the loader it should read from there. Like that:

let json = { ....... }

PIXI.loader
    .add(json)
    .load(setup);

But its not working that way. Can anyone help me ?

[jonforum]

on my side am not understand what you asking can you elaborate, maybe i can help.

[AntoniaChimp]

20 minutes ago, jonforum said:

on my side am not understand what you asking can you elaborate, maybe i can help.

So I already investigate further.

I dont want to use the pixi loader for reasons.

I want to create the spritesheet myself so I can use base64 image.
So thats my current progress.

let sprite = PIXI.Sprite.fromImage(base64);

let spritesheet = new PIXI.Spritesheet(sprite.texture.baseTexture, spritesheetJSONdata);

It creates the spritesheet, but the textures are empty. 
In the json it says:
 

"meta": {
	"image": "sprites.png",
	"size": {"w": 2231, "h": 2234},
	"scale": "1"
}

Obviously "image": "sprites.png" is not working so I tried to either delete the image entry or replace it with the base64 image string. But that didnt change anything.
The textures of the spritesheet remains empty.

[jonforum]

yes , if you don't want the pixi.loader , you will need create your textures manually 
Look para from PIXI.Texture

new PIXI.Texture(baseTexture frame, orig, trim, rot, base.data.frames[key].anchor);

[AntoniaChimp]

2 minutes ago, jonforum said:

yes , if you don't want the pixi.loader , you will need create your textures manually 
Look para from PIXI.Texture

new PIXI.Texture(baseTexture frame, orig, trim, rot, base.data.frames[key].anchor);

so there is no chance to use PIXI.spritesheet at all ? or just the basetexture needs to be done manually ?

[jonforum]

hum well i think you need see with a pro of pixiloader, am not very know the api in deep.
But on my side here how i proceed to load my sprite Sheets with texturePacker.
Maybe you can found some answer here.
https://github.com/djmisterjon/PIXI.ProStageEditor/blob/31ad00f173f4d2c5ce99fd19711f687d09d84b45/js/core/loaders.js#L266

Any reason why you don't want use the loader ? it can do a lot of complexe stuff ! 

[AntoniaChimp]

1 minute ago, jonforum said:

hum well i think you need see with a pro of pixiloader, am not very know the api in deep.
But on my side here how i proceed to load my sprite Sheets with texturePacker.
Maybe you can found some answer here.
https://github.com/djmisterjon/PIXI.ProStageEditor/blob/31ad00f173f4d2c5ce99fd19711f687d09d84b45/js/core/loaders.js#L266

Any reason why you don't want use the loader ? it can do a lot of complexe stuff ! 

I just want to have a single html file. so images should be inline as well as json. So I cant use the loader with urls

[ivan.popelyshev]

let spritesheet = new PIXI.Spritesheet(sprite.texture.baseTexture, spritesheetJSONdata);

It should work, you are doing something wrong. To determine whats wrong please give us more info. Do you know how to debug stuff, how to place breakpoints?

Also spritesheet parse is kinda async, you have to pass callback somewhere if you want more than 10000 frames or so.

[AntoniaChimp]

7 minutes ago, ivan.popelyshev said:

let spritesheet = new PIXI.Spritesheet(sprite.texture.baseTexture, spritesheetJSONdata);

It should work, you are doing something wrong. To determine whats wrong please give us more info.

What kind of info do you need ? 
Thats mostly everything I have.

• An image base64 encoded
• creating a sprite with fromImage to use its basetexture in the spritesheet
• a sprite sheet json created from shoebox
• not sure about the json meta part because it says "image": "sprites.png" and instead of that I put the base64 again
  
  so to be sure here is my json: 
   

  {
  "frames": {
  	"banner.png": {
  		"frame": {"x":0, "y":2089, "w":465, "h":144},
  		"spriteSourceSize": {"x":0,"y":7,"w":465,"h":158},
  		"sourceSize": {"w":465,"h":158}
  	},...
  },
  "meta": {
  	"image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA.....",
  	"size": {"w": 2231, "h": 2234},
  	"scale": "1"
  }
  }

  and concerning the debug..
  Where should I do the debug ? in Pixi code ? because mine goes through without error its just that spritesheet.textures is empty.
  
  I have around 40 images, so I dont think parsing should be the problem.

[ivan.popelyshev]

go inside the pixi code, i hope your bundler supplied you with sourcemaps  

[AntoniaChimp]

1 minute ago, ivan.popelyshev said:

go inside the pixi code, i hope your bundler supplied you with sourcemaps  

Ok will try that tomorrow, never heard of sourcemaps before ?

So theoretically that should work with the base64 ?

[ivan.popelyshev]

PixiJS is not a black box, we specifically reject most of heavy PR's. If you came for packaged solution that always works and has perfect documentation - its not pixi  

Debuggability is one of our targets.

[ivan.popelyshev]

Yeah, that's how everyone does it for playable ads and messenger apps.

[AntoniaChimp]

Just now, ivan.popelyshev said:

Yeah, that's how everyone does it for playable ads and messenger apps.

So why I cant find an example of that  no one ever posted their code for this issue

[ivan.popelyshev]

You are lucky! We are working on examples for playable ads. Unfortunately, they are not available yet. Wait a month or two.

Also "no one ever posted their code for the issue" is MY phrase, that's how I explain people why is feature X not available. Someone asks help, I provide a few snippets, they make their app and do not share the result. Then second person asks the same thing. Then third. On 10-th attempt we have a hero who makes an article or repository and shares it with community!

[AntoniaChimp]

18 hours ago, ivan.popelyshev said:

You are lucky! We are working on examples for playable ads. Unfortunately, they are not available yet. Wait a month or two.

Also "no one ever posted their code for the issue" is MY phrase, that's how I explain people why is feature X not available. Someone asks help, I provide a few snippets, they make their app and do not share the result. Then second person asks the same thing. Then third. On 10-th attempt we have a hero who makes an article or repository and shares it with community!

Damn it last time you said you are working on an example for playable ad, you said its gonna be done in 2-4 weeks. And that was 2 weeks ago  Ok well here we go me trying to make the spritesheet work

UPDATE:
It works. Apparently you have to call spritesheet.parse(()=>{}) yourself, which I didnt know (Parse takes a callback).
And the meta data of the json, does not need any field for image. 

[ivan.popelyshev]

Yes, that's a trick that I forget every time, then I look in sources and see it