Changing the order of animation (to become vertical)

[Stucky]

I did my part of research on google and searched the forum before I posted, so I hope this is not a repost.

 

To make my spritesheet, I used http://www.leshylabs.com/apps/sstool/ because TexturePacker is not free.

 

The problem is that, the site arrange all my images vertically. It seems that Phaser read the animation horizontally, so I've been wondering on how to make Phaser read the images in the vertical manner. Since there are 150 over images in the spritesheet, I don't want to do it manually.

 

Is there an easy way to do this?

[turnA]

Hmm, I don't know the answer.

But I can suggest you to use Shoebox to create JSON spritesheet. It's free and have other neat features.

[Stucky]

Using Shoebox doesn't work with me, too.

 

I tried selecting the four images below and dragged them to the Shoebox.

 

 

 

 

The spritesheet result is like this:

 

 

 

As you can see, the images are not in order. I have no idea why.

[wayfinder]

This is an annoying Windows behaviour that will pick up the last selected file and put it first in the OLE queue. easily avoided by selecting ranges BACKWARDS

[lewster32]

If you save as a texture atlas rather than a sprite sheet the frame order won't matter. Also I'd highly discourage you from using .jpg for your frames - stick to .png wherever possible.

[dhaber]

Leshy SpriteSheet Tool does bin-packing when you add images, which is fine for texture atlases, but not as ideal if you are just trying to append images into a sprite sheet of perfectly even cells.  Bin-packing tries to keep the new image square as well, which is undesirable for that.

 

If you are up for command line tools, the way I do it is with ImageMagick.  For example:

convert player*.png +append player-spritesheet.png

That will take all files named player*.png and append them horizontally into a new image named player-spritesheet.   You can do "-append" instead to make it vertical.  This is useful in combination, for example to add another row to the sprite sheet.  For example:

convert player*.png +append player-spritesheet.pngconvert enemy*.png +append enemy-spritesheet.pngconvert player-spritesheet.png enemy-spritesheet.png -append final-spritesheet.png

That will create a player and enemy spritesheet row, and then append them together into final-spritesheet.png, each one as a single row.   These types of commands work well in build scripts or Makefiles, if you are into that style of doing things.   If you are on Linux or MacOS, this can be done through a terminal easily.  On Windows, it should all work well through Cygwin.   I know not everyone is into command line tools though, so there may be some better suggestions for those that prefer a graphical interface.

 

Once you have your sprite sheet built, then you should be able to load it into Leshy SpriteSheet Tool to further edit or create an atlas or map, or into Leshy SpriteSheet Animator to create and test out animations using the sprite sheet.

 

EDIT:  After writing this I was just looking at the ImageMagick docs, and you can actually finely control a lot more details.  You could definitely write a one liner to build a complicated sprite sheet of any dimensions.  For example, the '-tile' parameter can specify the grid layout.    For lots of example usages, see the ImageMagick montage documentation.

[Stucky]

This is an annoying Windows behaviour that will pick up the last selected file and put it first in the OLE queue. easily avoided by selecting ranges BACKWARDS

 

Selecting backwards doesn't really help.

 

Leshy SpriteSheet Tool does bin-packing when you add images, which is fine for texture atlases, but not as ideal if you are just trying to append images into a sprite sheet of perfectly even cells.  Bin-packing tries to keep the new image square as well, which is undesirable for that.

 

If you are up for command line tools, the way I do it is with ImageMagick.  For example:

convert player*.png +append player-spritesheet.png

That will take all files named player*.png and append them horizontally into a new image named player-spritesheet.   You can do "-append" instead to make it vertical.  This is useful in combination, for example to add another row to the sprite sheet.  For example:

convert player*.png +append player-spritesheet.pngconvert enemy*.png +append enemy-spritesheet.pngconvert player-spritesheet.png enemy-spritesheet.png -append final-spritesheet.png

 

So I was trying to make an animation at certain event, something like a cutscene. Thus there are 157 images I want to put into a spritesheet. This does the trick, but it created one very long horizontal spritesheet. Since there are too many images, in the end the file dimension was 60480 x 280 and Phaser had some trouble loading it, I can't see the animation there. (I tried cropping it to 3600 x 280 to show only some frames, and Phaser can show the animation without any problem)

 

So what I did was using this code instead:

montage imagename*.png -tile 14x -geometry 360x280 imagename-sheet.png

This will create 14 horizontal images before it goes to the next row. And since my image dimension is 360x280, I put the geometry as that dimension so that my images won't be resized.