28
\$\begingroup\$

My graphics designer has made graphics in separate PNG files. Is there a clever tool/script that mashes them into a spritesheet?

I could probably code something myself, but why re-invent the wheel :)

\$\endgroup\$
7
  • 2
    \$\begingroup\$ possible duplicate of Tool for creating Spritesheet? and Tips \$\endgroup\$
    – House
    Apr 11, 2012 at 14:20
  • 1
    \$\begingroup\$ @jhocking If you can post an answer to that question that is verbatim to the answer you've posted here. They are duplicates :) \$\endgroup\$
    – House
    Apr 11, 2012 at 18:17
  • 10
    \$\begingroup\$ That's not a good rule at all. Just to be ridiculous: What is 2 + 2? What is 8 - 4? OMG SAME QUESTION \$\endgroup\$
    – jhocking
    Apr 11, 2012 at 19:27
  • 3
    \$\begingroup\$ More serious response: My answer is exactly the same, sure, but the accepted answer there is completely unrelated to this question. My answer applies in both places because this question is a specific case of that question; that question asked "any tools for any sprite tasks?" and this question is "tool for this one specific task?" Honestly my answer applies more here; I should've just made it a comment to someone else's answer there. \$\endgroup\$
    – jhocking
    Apr 11, 2012 at 19:42
  • 1
    \$\begingroup\$ The accepted answer there doesn't make any reference to packing lots of images into one atlas. You don't have to take my word for it, you can go and read it. That question is nominally about spritesheets because they are mentioned in the title, but the question is mostly about animation techniques for generating the frames used in a spritesheet. \$\endgroup\$
    – jhocking
    Apr 12, 2012 at 0:04

9 Answers 9

22
\$\begingroup\$

Am I the only one who uses SpriteSheetPacker? It's free and open source so you can modify it and learn how it works.

\$\endgroup\$
4
  • 2
    \$\begingroup\$ No, 9 other people use it as well. But this tool, although free, doesn't give you nearly as much flexibility as TexturePacker \$\endgroup\$
    – bobobobo
    Aug 31, 2012 at 16:11
  • \$\begingroup\$ @bobobobo Yeah? And guess what your images end up like? i.gyazo.com/5e2e4e50d6dd0b1891439aeea06a14a5.png More 'flexibility' and features yeah right.. \$\endgroup\$ Nov 30, 2015 at 6:55
  • \$\begingroup\$ @NiCkNewman there are several sort options. Try that \$\endgroup\$
    – Evorlor
    Feb 20, 2016 at 4:10
  • \$\begingroup\$ Yeah, trying to use that is a pain. \$\endgroup\$ May 9, 2016 at 18:47
13
\$\begingroup\$

I've been using TexturePacker to create sprites from a folder of PNG images. I'm porting a game originally developed in Flash, so I'm simply exporting each frame of the MovieClip to png and then importing those images in Texture Packer.

Another similar tool is Zwoptex

(The latter is Mac software, but TP has a version for Windows too.)

\$\endgroup\$
3
  • 2
    \$\begingroup\$ TP is for all O/S's. Has GUI. My favorite so far. Zwoptex is Mac only. \$\endgroup\$
    – bobobobo
    Aug 31, 2012 at 16:22
  • 1
    \$\begingroup\$ oh sweet I didn't know it's all OS's. Either that's new or I missed it before. \$\endgroup\$
    – jhocking
    Aug 31, 2012 at 16:34
  • \$\begingroup\$ Psshaw. Mac users. \$\endgroup\$
    – bobobobo
    Aug 31, 2012 at 18:08
6
\$\begingroup\$

ImageMagick has a command line utility that can join images into what it calls a "montage." It can be tiring getting the right command line parameters to do what you want, but it's a very powerful and flexible tool. I use it very frequently for building spritesheets.

\$\endgroup\$
3
  • 1
    \$\begingroup\$ do you have any examples of the right parameters? \$\endgroup\$ Mar 11, 2015 at 0:22
  • 2
    \$\begingroup\$ I am not OP, but convert +append folder/*.png stacked.png converts all pngs in folder (ordered alphabetically) into stacked.png \$\endgroup\$ Aug 18, 2018 at 10:40
  • 2
    \$\begingroup\$ For those looking for an example command for montage, I found this excellent SuperUser answer: superuser.com/a/290679/77657 \$\endgroup\$
    – BiAiB
    Apr 22, 2020 at 0:17
6
\$\begingroup\$

I have decided to open source my 2D spritesheet and animation tool. It supports automatic sprite selection, combining images, sprite grouping, and multi-sprite animation with rotation.

It is written in Java, the github repo is here: https://github.com/darkFunction/darkFunction-Editor

Website for the project is: http://darkfunction.com/editor

\$\endgroup\$
3
\$\begingroup\$

I really like libgdx's (game framework) packer. Maybe a bit cumbersome to set up the framework just for the packer, though.

The packer works great. Read the libgdx texturepacker doc here, and see for yourself. My favourite feature is that is also saves a document with info about all the textures in the big spritesheet/atlas, so you can easily make a script that gets them for you. Libgdx also has this build in, so I can load/display any texture by it's original filename, even though it's in a big atlas. There also exists a GUI for the packer.

Excerpt from a pack-file with info about some textures:

ferdige1.png
format: RGBA8888
filter: Nearest,Nearest
repeat: none
mainmenu
  rotate: false
  xy: 2, 2
  size: 800, 480
  orig: 800, 480
  offset: 0, 0
  index: -1
plankeu3
  rotate: false
  xy: 804, 2
  size: 64, 384
  orig: 64, 384
  offset: 0, 0
  index: -1
levelSelect
  rotate: false
  xy: 2, 484
  size: 591, 373
  orig: 591, 373
  offset: 0, 0
  index: -1
plankeu2
  rotate: false
  xy: 870, 2
  size: 64, 256
  orig: 64, 256
  offset: 0, 0
  index: -1
\$\endgroup\$
0
\$\begingroup\$

I ended up using this Processing script. You can download Processing for free at Processing.org. All files need to be in the same folder, and have a filename ending in a 4 digit number.

ArrayList<PImage> images = new ArrayList

<PImage>();

void setup() {
  String folder = "file location ...";
  String file = "file prefix ...";
  String outfile = "output.png";
  int fileCount = 30;
  int cols = 7;
  int rows = 5;

  println("Loadgin...");
  for (int i = 1; i <= fileCount; i++) {
    String number = "" + i;
    if(number.length() == 1) number ="000" + number;
    else if(number.length() == 2) number = "00" + number;
    PImage img = loadImage(folder+file + number +".png");
    images.add(img);   
  }

  println("Starting...");
  PImage img = createImage(images.get(0).width * cols, images.get(0).height * rows, ARGB);
  for (int x = 0; x < images.get(0).width; x++) {
    for (int y = 0; y < images.get(0).height; y++) {
      for (int z = 0; z < images.size(); z++) {
        img.set(
          x+images.get(0).width* (z%cols),
          y +images.get(0).height * int(z/cols),
          images.get(z).get(x,y));
      }
    } 
  }
  println("Saving...");
  img.save(folder + outfile);
}
\$\endgroup\$
0
\$\begingroup\$

I don't know if I understood question correcttly but I know the software that operates with textures and makes animation, sprite sheets anf .gif animations. see http://www.spritetools.com/

\$\endgroup\$
0
\$\begingroup\$

The Compass framework has a sprite generation tool.

[Video]

\$\endgroup\$
0
\$\begingroup\$

I use a Photoshop script to make spritesheets, see this article on my blog.

It can make old skool tile grids as well as texture atlases, and can export a custom text file containing image size and position info. It works on PC and Mac, it's open source and written to be extensible.

\$\endgroup\$

Not the answer you're looking for? Browse other questions tagged .