Jump to content

Spritesheets and JSON files


THEMIKEBERG
 Share

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

Link to comment
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

Link to comment
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. 

Link to comment
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.

Link to comment
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
Link to comment
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...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...