CODEWITHSUNDEEP
jsonpixi.js
Vaduva Mihaita Bogdan
Vaduva Mihaita Bogdan

Reputation: 170

Loading a json file using PIXI js

I've just recently started using PIXIjs and I'm failing to understand why when I am trying to load some .png files using a json, it doesn't work the way I expect it to work. This is an example of my .json file 

"autoplay_counter.png":
{
"frame": {"x":983,"y":1093,"w":264,"h":147},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":3,"y":1,"w":264,"h":147},
"sourceSize": {"w":270,"h":150}
},

And here is my PIXI.js code that I am using to load the files:

const game = new PIXI.Application(2017, 1256);
document.body.appendChild(game.view);

var loader = PIXI.loader;
loader.add("reels.json");
loader.load(func);

function func () {
   var frames= [];
   frames.push(PIXI.Texture.fromFrame('Reels_Logo.png'));
   frames.push(PIXI.Texture.fromFrame('Reels_Frame.png'));
   frames.push(PIXI.Texture.fromFrame('Symbol_Cargo.png'));
   var x = frames.pop();
   while ( x != null) {
     var anim = new PIXI.Sprite(x);
     game.stage.addChild(anim);
     x = frames.pop();
   }
}

The problem I am having is that in spite of the fact that it's loading the png files, it is not positioning them accordingly. I am not quite familiar with json files but as far as I can understand, in the meta it should say the size o the window? That for me is "size": {"w":1256,"h":2017}, and as you can see in my PIXI file, it's the size I used for creating the app. That being said, my 2 questions are:

How can I place the png files on the screen accordingly? Is there any better way to parse the json file with PIXI so that I may not manually insert/hard code the names of the files from the json into the code?

Thank you very much, any help is highly appreciated

Upvotes: 1

Views: 6531

Answers (1)

Marc
Marc

Reputation: 51

You might want to check your json with https://jsonlint.com. Your sample turns valid if you add parentheses {} around the given code and remove the final comma.

Depending on your project you can load images also as an image map or texture atlas. Read more about these techniques at

https://github.com/kittykatattack/learningPixi

Upvotes: 1

Related Questions