Easy tool to decompose sprite image?

Question

I have a lot of sprite images that contain dozens of icons. Is there an easy way to unravel the sprites into separate image files either automatically or feeding it coordinates, widths and heights?

Good question, I always get this problem, sprites take ages. — Adamantus, Feb 22 '12 at 12:10

score 15 · Answer 1 · edited Jul 23 '20 at 06:35

15

This program is pretty good at decomposing sprites into individual frames

https://github.com/ForkandBeard/Alferd-Spritesheet-Unpacker

it supports all standard bitmap formats, .png, .bmp, .gif, .tiff and does everything pretty much automatically.

edited Jul 23 '20 at 06:35

mickmackusa

43,625
12
83
136

answered Feb 21 '12 at 22:06

BYS2

5,199
5
24
32

1

when i drag the sprite onto the application then click export selected, it freezes... – Abadaba Feb 22 '12 at 00:07
2

@abadaba, oh really? it seems to work well for me :S.. do you have a copy of your sprite that I can download from the internet? I've tried it on some of my own and it seems to work perfectly – BYS2 Feb 22 '12 at 21:49
1

Ok...this was just awesome. Worked perfectly. I was not expecting it to do ALL the work for me. Thanks a ton! – Arbel Nov 18 '13 at 15:36
1

this program works great! for the people for which it freezes when you export it, according to the FAQ you have to unselect the "export to folder" checkbox, that did the trick for me :) – xorinzor Dec 29 '13 at 15:00
good to know my suggestion is still being looked at after all this time :P – BYS2 Dec 30 '13 at 15:57
1

@BYS2 No doubt this one should be the correct answer. That program is amazing!! Thanks!! – Nick Louloudakis May 19 '14 at 17:35
1

Also, laughed on the FAQ: -"Do you know how to spell Alfred?" -"Yes". – Nick Louloudakis May 19 '14 at 17:37
It has to be run as an administrator (on Windows 8 at least) – scar80 Feb 26 '15 at 13:48
Link not working for me – Nouman Jul 07 '20 at 12:00

score 8 · Accepted Answer · edited Mar 04 '13 at 06:59

8

Use the slice tool in Photoshop:

Use the slice select tool (note the select part of that, see screenshot).
Right-click anywhere on the canvas and select Divide Slice... from the drop down menu.
Enter in the height/width or sprite multiple.
Once finished, go to save for web and devices...
When you save, this will export all the individual cutouts to the file format of your choosing in a separate folder.

If they are of uneven size (not on a grid) you can also select them individually with the vanilla 'slice select' tool. If you have a lot of similar grids, save everything as a photoshop action and batch process them.

slice **select** tool

edited Mar 04 '13 at 06:59

Indolering

3,058
30
45

answered Feb 22 '12 at 19:57

Abadaba

1,456
7
20
30

2

The idea was to decompose a sprite image into individual images. I has nothing to do with CSS sprites. – Abadaba Feb 12 '13 at 22:19
3

this is very time consuming, the answer from BYS2 is the best way to do it. – xorinzor Dec 29 '13 at 15:03

score 6 · Answer 3 · answered May 24 '13 at 22:55

6

I encountered a similar problem after losing the source images for a sprite and built this relatively simple tool: https://github.com/fmovlex/desprite

Hope this helps.

answered May 24 '13 at 22:55

fmovlex

61
1
2

note this only works when you have an CSS file containing the width/height and background-position of the individual images, when you only have a sprite image this option won't help you – xorinzor Dec 29 '13 at 15:01

score 6 · Answer 4 · answered May 14 '14 at 14:58

6

This one worked nicely for me to extract images from jquery ui sprites http://renderhjs.net/shoebox/

answered May 14 '14 at 14:58

6ton

4,174
1
22
37

score 5 · Answer 5 · answered Feb 21 '12 at 22:04

5

give this as try as it will split it into individual rows: http://imagesplitter.net

answered Feb 21 '12 at 22:04

Adam Seabridge

1,909
1
20
27

5

But this assumes every row is the same height, images may take up difference space. – Abadaba Feb 22 '12 at 00:07

score 0 · Answer 6 · answered Mar 21 '16 at 07:53

0

There is an android application that will dynamically split a sprite map:

https://play.google.com/store/apps/details?id=com.fourqueue.android.texture

answered Mar 21 '16 at 07:53

Four Queue

1

vaskort · Answer 7 · 2014-05-15T14:16:56.830

Creation of png:

I use spritepad to create the png image, just drag and drop your images to create the sprite: http://spritepad.wearekiss.com/ (but as I assume you dont want this step).

CSS:

After this I import the image to spritecow and get the css for every image (double click every image to get its height-width and coordinates): http://www.spritecow.com/

You could use spritepad only but I prefer to use it only for the creation of the sprite. For css, spritecow seems easier to me. Anyway its up to you.

Easy tool to decompose sprite image?

7 Answers7

Linked