Spritesheets and JSON files

[THEMIKEBERG]

So I'm quite new to Javascript and programming in general.

 

I've been following along on this tutorial:

https://github.com/kittykatattack/learningPixi#using-a-texture-atlas

 

I've come to a bit of a halt though, as I don't need to make sprite sheets. I have a bunch to use, a massive library that adds up to around 4000 separate sprites. They are all made into spritesheets though.

 

I tried using texturepacker however I'm not a fan (it also failed to create a JSON file) so I've decided to grab the suggested [url =http://renderhjs.net/shoebox/]Shoebox I threw in one of my spritesheets changed the "template" to pixl.js however it didn't save it as a JSON file but as a .js so I'm not sure if I'm following this right or not.

 

Seeing as I don't need to make spritesheets is there a better way to go about this?

 

Thanks in advance!

-Mike

[AndreasLoew]

What's wrong with TexturePacker? Creating sprite sheets could not be easier.

 

You choose PixiJS as Data Format and use file selector next to Data file to select your json data file.

 

Add the sprites by dragging & dropping their parent folder onto TexturePacker. It'll automatically update the sheet when you add / remove / change sprites in the folder.

 

Finally press Publish sprite sheet - that's it.

 

If you want to write optimized sprite sheets (8 bit png) set Pixel Format => INDEXED

[THEMIKEBERG]

What's wrong with TexturePacker? Creating sprite sheets could not be easier.

 

You choose PixiJS as Data Format and use file selector next to Data file to select your json data file.

 

Add the sprites by dragging & dropping their parent folder onto TexturePacker. It'll automatically update the sheet when you add / remove / change sprites in the folder.

 

Finally press Publish sprite sheet - that's it.

 

If you want to write optimized sprite sheets (8 bit png) set Pixel Format => INDEXED

 

Seems like I'll have to manually write the JSON file because as I stated, I already have sprite sheets... Tons of them, around 4000 (if not more) worth of sprites. I didn't see the option to change the data format before, for that I thank you. I now have a JSON file. 

[xerver]

Seems like I'll have to manually write the JSON file because as I stated, I already have sprite sheets... Tons of them, around 4000 (if not more) worth of sprites. I didn't see the option to change the data format before, for that I thank you. I now have a JSON file.

You can use shoebox to split into individual frames and texture packer to pack them together again.

[THEMIKEBERG]

You can use shoebox to split into individual frames and texture packer to pack them together again.

 

It seems like a lot of work.

 

http://www.leshylabs.com/apps/sstool/

 

Allows me to use a premade sprite sheet and write a JSON file, however it's not in the format that the tutorial I'm following seems to like...

 

However now it seems that JSON file format does not seem to be the issue, rather that the tutorial is out of date. For shiggles I tried to recreate exactly letter for letter the example used in the tutorial. I just does not like it. I'm now kind of stuck on how to proceed.

 

The following code brings up a "Uncaught TypeError: Cannot read property 'template.png' of undefined" 

 

EDIT/ How come it's impossible to write underneath this code block?

EDIT// Turns out I needed to be running a local webservice, Node.js to the rescue. However still no progress.

//Aliasesvar Container = PIXI.Container,  autoDetectRenderer = PIXI.autoDetectRenderer,  loader = PIXI.loader,  resources = PIXI.loader.resources,  Sprite = PIXI.Sprite,  Texture = PIXI.Texture,  TextureCache = PIXI.utils.TextureCache; //Stage info & Setupvar stage = new Container(),  _renderer = new autoDetectRenderer(800, 600);_renderer.view.style.border = "1px solid black";_renderer.backgroundColor = 0xC1C1C1C1;_renderer.autoResize = true;_renderer.resize(512, 512);document.body.appendChild(_renderer.view); loader  .add("template.json")  .load(setup); var template, id; function setup() {  id = PIXI.loader.resources["template.json"].textures;   template = new Sprite(id["template.png"]);  stage.addChild(template);   template.x = 10;  template.y = 10;  stage.addChild(template);   //render stage  _renderer.render(stage); }

Edited December 22, 2015 by THEMIKEBERG

[ivan.popelyshev]

you can also use Sprite.fromImage("template.png") , it will work like before