Jump to content

How to create JSON spritesheet w/o TexturePacker?


ikaruga
 Share

Recommended Posts

My use case is that I am *not* an indie dev. I don't work for an agency. I'm not a freelancer. I'm just making art for fun ? And so I'm not in the mood right now to drop $40 on something I may use occasionally ? 

Here's what I tried:

* ShoeBox - http://renderhjs.net/shoebox/  - seems to be able to generate XML but not JSON

* spritesheet-js - seems to be unmaintained and is currently not working: https://github.com/krzysztof-o/spritesheet.js/issues/79  Update: while unmaintained the workaround is to pass in absolute paths

* Currently, I'm manually creating textures from the individual PNGs. In this case, that's fine because there are only like 4 images. But this approach won't scale for larger spritesheets.

Is there a way to manually create textures from the spritesheet? or create the JSON?  Assume the spritesheet is super simple---say, a row of square images. 

 

Edited by ikaruga
Link to comment
Share on other sites

You could create a script that generates a pixi compatible json. Would be pretty simple if you skip trimming as the format basically tells the start point of image on sheet and what width / height it has. Though I'd recommend just using the free version of texturepacker if you dont need the licensed version features.

Link to comment
Share on other sites

You can use the free version of TexturePacker: https://www.codeandweb.com/tp-online

It supports JSON output for PixiJS.

2022-02-16_11-12-34.png

 

And you can of course use TexturePacker in the Essential mode - that is using it for free.


Choose "JSON hash" Data format and disable some of the advanced features like PngQuant compression and Pivot points - stuff you most likely don't want to use anyways in your scenario.

 

2022-02-16_11-23-49.thumb.png.2de292544a60873f38dc7695870178f9.png

 

Edited by AndreasLoew
Link to comment
Share on other sites

17 hours ago, AndreasLoew said:

You can use the free version of TexturePacker: https://www.codeandweb.com/tp-online

It supports JSON output for PixiJS.

2022-02-16_11-12-34.png

 

And you can of course use TexturePacker in the Essential mode - that is using it for free.


Choose "JSON hash" Data format and disable some of the advanced features like PngQuant compression and Pivot points - stuff you most likely don't want to use anyways in your scenario.

 

2022-02-16_11-23-49.thumb.png.2de292544a60873f38dc7695870178f9.png

 

Yea that looks pretty sweet. Will definitely check it out.

Note that I was able to get spritesheet.js to work by passing in absolute paths ?‍♂️

Link to comment
Share on other sites

  • 1 year later...

If I drop 50$ can you help me to know that How to fix “Unexpected end of JSON input” error? I am facing this error again and again and looking for anyone who can help me to solve this error. I will be very thankful if you help me to fix this error and will recommend you if you become successful to help me in solving this problem. Now I am just want to know your opinion I will give you detail later.

Edited by Maysonet
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...