How do I split an existing sprite sheet into individual frames?

I know there are tools to convert a bunch of separate images into a single spritesheet/atlas texture, but I have the inverse problem. I have a free spritesheet I found with frames for a simple animation that I wanted to try out - but I have no associated plist or atlas data file for it.

The frames are all 64x64 and laid out in a grid in the image file. I cannot figure out how to get Cocos Creator to cut this image into separate frames and, oddly, can’t seem to find a super basic simple tool to do it for me either. I suppose I could write some kind of tool to generate the data file pretty easily, but this seems like it should be a common problem given how many of these sorts of sheets I’ve run across on the web. Is this not something built into Creator?

Can Texture Packer help you? @AndreasLoew??

I looked at that, but it seems to take multiple images and turn them into the spritesheet/atlas which is basically the inverse of what I need, I think. I feel like this must be some kind of really dumb easy thing and that I’m totally missing something here. :stuck_out_tongue: Places like https://opengameart.org are filled with sheets like this. For example: https://opengameart.org/content/character-sprite-walk-animation Surely there’s some simple way to take this and build an animation clip from it in Creator?

Write a bit of code to create the sprite sheet for you. There are several ways to do this, and the complexity depends on the sprite sheets you want to process, and how interactive you want the utility to be.

The example you linked is the easiest, since it’s arranged nicely in rows and columns, so all your utility app needs is the total width and height of the sprite sheet, the top/bottom/right/left padding if there is any, the number of columns, and number of rows, and it should output the sprite sheet data easily.

If you want to make it interactive, then you can have a user interface where you can adjust column and row lines around the loaded sprite sheet, and then it can output the data. Otherwise it can just scan for transparent pixels and automatically detect the individual frames, an example of which you would see in Unity3D’s sprite sheet tool.

The sprite sheet format used in cocos2d is pretty straight forward, and you can read more about it here:

Or… you can use the power of Google (repeat after me… “Google is your friend, Google is your friend…”) :slight_smile: and search for “sprite sheet cutter”:

http://www.alferdspritesheetunpacker.forkandbeard.co.uk/forkandBeard/apps/AlferdSpritesheetUnpacker/Download.aspx

https://jmsliu.com/products/sprite-sheet-decomposer/

etc. etc…

The plist format looks simple enough. Creator should really support this out of the box like Unity apparently does - at least for simple formats like this! It shouldn’t be so tedious to toss together dumb prototypes with free assets. :confused:

I did google this problem, of course, and had already tried the 2 online slicers you linked, but neither seems to work properly. The button that downloads to a zip of the results doesn’t work for either one. (one starts the download and then it aborts, the other just never starts downloading). They do seem to preview the slice, though, so I could probably save the images on the page manually one by one for now, I guess. :frowning:

I’m really pretty shocked this is so tedious given that it seems like half or more of the freebie walk cycles I’ve come across are distributed this way. Maybe I need a better freebie art source? Or more patience? :stuck_out_tongue:

How about this:

https://www.leshylabs.com/apps/sstool/

Save the output as “JSON-TP-Hash” or “JSON-TP-Array”, which will contain the correct data, and you may need to covert that to the PLIST format.

Note, the example image you linked, character-sprite-walk-animation, has some issues, since some of the frames are missing the transparent gap between other frames. That is probably because the image was resized, but anyway, you can fix it by just deleting the correct pixels between the frames.

There is also this project on Github that you could modify to output the data you need:

Ooh - now we’re getting much closer! Thanks!

I spent a few hours making a super simple tool to do this. I plan to get the source up on GitHub at some point, but for now here’s a YouTube of it in action: https://www.youtube.com/watch?v=OhNTwJDNcQ4

It generates a file package that bundles the plist and the original image file (converted to PNG) together. Cocos Creator is actually perfectly okay accepting a drag-drop of the bundle file (which is really just a directory with 2 files in it), so it works pretty seamlessly!

1 Like

I need this too. I am using aseprite to generate animations on spritesheets and can’t find a clean way for importing the animation on COCos.

I just posted the source for my super simple tool on GitHub. If you have a Mac, check it out: https://github.com/BigZaphod/SpriteFramer

1 Like

I don’t have a mac. Sad…
but thank you anyway

Don’t let the fact that you don’t have a Mac stop you. bigzaphod linked the source code, and if you take a look at it you’ll see that it’s quite trivial to port it over to whatever programming language/framework and OS you may be using.

It is not that easy. I am solo developer and i must work every day making different prototypes. I have made a framework with unity but and i can’t waste my time not making games just because i have not resources for it.

I suspect most of us here are solo developers or hobbyists - I know I am.

I agree this should really be built in to Cocos Creator - it seems like a basic piece of missing functionality.

On the other hand, it should not be too time consuming to build a tool like this and it doesn’t need to be fancy (mine sure isn’t). You really don’t even need to load the image or have a GUI to do it. If you had a simple tool or script that just accepted the width/height of the image file and the width/height of the individual frames, it’d be enough for that to generate the plist for the vast majority of sprite sheets that I’ve run across.

But yes, it’s annoying to have to build custom tools to do this when you just want to make a game or prototype. Having to stop to make new tools can be very demotivating.

Specially when you are running out of money and you need to sell fast.

A bit late here, but if you have access to photoshop, the slice tool can dice up an image into regular squares or rectangles quite easily.

We are currently adding a sprite sheet splitting tool to TexturePacker.
I hope to make a release within the next days…

1 Like

Cool, I will buy when this happens.

As promised… the sprite sheet splitter in TexturePacker 4.10.0 is available now.

It supports splitting grid packed sprite sheets with equal sized sprites. You can adjust paddings to match the layout of the sprite sheet. Fully transparent sprites are ignored.

Sprites are extracted to a folder parallel to the sprite sheet by default. But you can change that and also create your own file name template.

Screenshot of the MacOS version:

4 Likes

Wow that’s really great!