What Spritesheet toolkit does everyone use?

[xdiepx]

I am using shoebox but it does not export the sprite as json and if i export it using pixi or unity the data spritesheet file isn't correct. What tool kit do you guys use?

[chazzlabs]

Forgive my ignorance, but why/how would one export a spritesheet as JSON?

[Biggerplay]

I use Flash CC, but I know a lot of people use TexturePacker.

[Heppell08]

Texture Packer is the bomb I'd say. So many different ways of doing the sprites and so many different outputs. Also quite noob friendly too

[xdiepx]

Forgive my ignorance, but why/how would one export a spritesheet as JSON?

Previously i used createjs the toolkit i was using exports an image and a json.

P.s no worries 

[xdiepx]

Texture Packer is the bomb I'd say. So many different ways of doing the sprites and so many different outputs. Also quite noob friendly too

But it isnt free ...well that is what it keeps telling me.

[Heppell08]

I didn't pay for my version. Have they started charging for it? I'll search for the link and post it here if I can.

[Heppell08]

Choose the version you need of texture packer and it will download: http://www.codeandweb.com/texturepacker/download

[Arlefreak]

I listed some on this post http://www.html5gamedevs.com/topic/2594-tools-compatible-with-phaser/?fromsearch=1

[Kobaltic]

I use photoshop and make my own. I get them exactly the way I want them.

[xdiepx]

Choose the version you need of texture packer and it will download: http://www.codeandweb.com/texturepacker/download

I got it working with shoebox. Should be fine now, i'll text packer out now. Looks pretty easy to use.

[xdiepx]

I listed some on this post http://www.html5gamedevs.com/topic/2594-tools-compatible-with-phaser/?fromsearch=1

That is where i came across shoebox and texture packer. Thanks for posting that up by the way.

[krzysztof-o]

If you're looking for simple, open-sourced, command-line tool, check it out: https://github.com/krzysztof-o/spritesheet.js

[BdR]

 

I didn't pay for my version. Have they started charging for it? I'll search for the link and post it here if I can. 

 

I'm just trying out the TexturePacker from CodeAndWeb running in Essential (lite) mode, so it's not registered.

 

It seems to work fine as long as you don't use any of the pro-features. If you do it will watermark some random sprites in the export .PNG file, they are bright red with text "please purchase a license to use pro features".

 

 

 

 

Also, in lite-mode you can only export the Generic Data Formats and cocos2D. The generic formats are JSON Array, JSON Hash and Generic XML. If you export the data as Generic JSON Hash it is compatible with Phaser. The export from TexturePacker will look something like this:

{"frames": {"button.png":{    "frame": {"x":2,"y":2,"w":240,"h":162},    "rotated": false,    "trimmed": false,    "spriteSourceSize": {"x":0,"y":0,"w":240,"h":162},    "sourceSize": {"w":240,"h":162},    "pivot": {"x":0.5,"y":0.5}},"mainguy_down.png":{    "frame": {"x":244,"y":2,"w":60,"h":60},    //etc.

You can remove the "pivot" tags entirely by hand using search-and-replace, and also maybe the ".png" from the frame names.

[georgejfrick]

Texture Packer is worth the cost. It can also do CSS sheets, so  you can use it for web-dev too. I have to pack/repack a lot of sheets and I don't regret the cost.

[Tuan]

Texture Packer is worth the cost. It can also do CSS sheets, so  you can use it for web-dev too. I have to pack/repack a lot of sheets and I don't regret the cost.

Hi, do you know how to re-edit the sheets if you have only sheets.png and sheets.json? It means we don't have the sheets.tps.

[Befive.Info]

I use photoshop and make my own. I get them exactly the way I want them.

Me too because my sptiesheets are not yet complicated. And I find this tool really helpful

 

http://gelobi.org/griddify/

[georgejfrick]

Hi, do you know how to re-edit the sheets if you have only sheets.png and sheets.json? It means we don't have the sheets.tps.

 

I don't think you can. In this case I recreate the sheet, then I do a 'diff' on the sheet atlas (json) to account for any differences that I may need to hand tweak. For Phaser you can usually recreate the sheets at will without saving a tps file as long as you are loading as an atlas:

game.load.atlasJSONHash( "textureKey" , "media/texture.png", "media/texture.json" );

So you don't have to worry about things moving around the sheet on you, and a simple diff can remind you of any tweaks you need to remake.

[BdR]

I now use ShoeBox. The GUI is a little basic but it works fine. You can't save your sprites sheet "source" as a project like in TexturePacker, but you can just keep all your source images in a local folder. Then when want to add more sprites, just start ShoeBox again and drop in all sprites again.

 

There's a pixel-padding option, extrude size(?), force square image output, and you can export the data to: Default, CSS, UIToolKit/NGUI (Unity 3D), Starling, Sparrow, Corona SDK, pixi.js, Cocos 2D and any other custom format is possible by tweaking the advanced options. Btw it's an Adobe Air application so you need to install Adobe AIR runtime.

 

[BdR]

Just to show screenshots of all the tools that are available.. The online tool Leshy SpriteSheet Tool is also pretty good (I know Cut It! used it).

 

It has a pixel-padding option and you can export the data to: Text, JSON, CSS, JSON-TP-Hash, JSON-TP-Array, XML, ImageMagick. The only downside I can think of for this one, is that it's an online-tool so you never know if the website might go down at some point and you can't use it anymore. Also you can't save the current project like in TexturePacker, but if you just keep your original image files you don't really need to anyway.

 

[Tom Atom]

Hi,

 

 I am using Spritor my own Java tool. I made it long time ago and code inside is real mess.But I am using it for all my games (from Android/iOS to HTML5:

• http://sbcgamesdev.blogspot.cz/2014/07/mobile-income-report-0-portfolio.html
• https://itunes.apple.com/us/artist/tomas-rychnovsky/id892348422
• https://play.google.com/store/apps/developer?id=SBC+Games).

 

 Also the name is mess as it originally named PicOpt and then I renamed it to Spritor.

 

 But important are features:

 - project is .xml file with some parameters and pathes to individual images (you can change them later in drawing program, and just reexport atlas),

 - you can import individual images or images drawn in grid (they are cut from it) (there are some rules for the grid),

 - all sprites are imported with anchor 0.5, 0.5 by default. You can drag them to change it - for Phaser I am exporting additional property "anchor" along with every frame (I wrote tutorial on it here: http://sbcgamesdev.blogspot.cz/2015/04/phaser-tutorial-sprites-and-custom.html),

 - you can add additional custom properties (number, point, rectangle) to sprites in atlas,

 - you can set scale for individual sprites and for whole atlas (= you can easily rescale graphics and reexport atlas),

 - you can name sprites as you want,

 - there are multiple export options - for Phaser are relevant two: "JSON - Texture Packer" and "JSON TP+Properties". First one is Texture Packer export. Second is with additional properties (anchor + custom),

 - there are also other features, but these may work only under special circumstances (for example there is export of atlas metadata into .xml - I created this when importing into Unity and creating prefabs automatically, or there are some animation features from my old mobile games exported into binary export)

 

 Tool is free and you can get it here: http://sites.google.com/site/sbcgamesdev/blogfiles/SBC_PicOpt_v1_00.zip

 

 USE AT YOUR OWN RISK :-)

 

 Here are two tutorials for old version, but most of it is still valid:

http://sbcgamesdev.blogspot.cz/2012/10/sprite-atlas-tool-part-i-creating-atlas.html

http://sbcgamesdev.blogspot.cz/2012/10/sprite-atlas-tool-part-ii-data-exports.html (this one is old, lot of new export options were added)

 

Here are some screenshots:

 

 

 

Custom properties in action:

 

 

 

Piece of "JSON - TP+Properties" export:

{    "filename": "Pig_001",    "frame": {"x":352,"y":198,"w":39,"h":36},    "rotated": false,    "trimmed": true,    "spriteSourceSize": {"x":11,"y":18,"w":39,"h":36},    "sourceSize": {"w":53,"h":63},    "anchor": {"w":0.52830,"h":0.49206},    "cust_prop1": {"w":-13,"h":-11,"width":20,"height":21},    "cust_prop2": {"w":-19,"h":9}},

 As said before. Code of the tool is total mess. I do not update it anymore (only if I really need it). I considered lot of times to rewrite it, but unfotunately I currently have no time for it...