Sign in to follow this  
AntoniaChimp

Loader add json manually without reference to file

Recommended Posts

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 ?

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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 ?

Share this post


Link to post
Share on other sites

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 ! 

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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 ?

Share this post


Link to post
Share on other sites

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! :)

Share this post


Link to post
Share on other sites
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 :D 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. 

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.