Sign in to follow this  
THEMIKEBERG

Spritesheets and JSON files

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

post-13891-0-00177500-1450801691_thumb.p

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.