xdiepx

What Spritesheet toolkit does everyone use?

Recommended Posts

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.

Share this post


Link to post
Share on other sites
 

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".
 
2n5elt.png
 
1jlo5u.png
 
 
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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

 

30joffq.png

Share this post


Link to post
Share on other sites
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.

 

975h6c.png

Share this post


Link to post
Share on other sites

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:

 

 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:

 

post-12887-0-49145600-1440235617_thumb.p

 

 

Custom properties in action:

 

post-12887-0-32080500-1440235618_thumb.p

 

 

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...

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

  • Recently Browsing   0 members

    No registered users viewing this page.