Stucky

Changing the order of animation (to become vertical)

Recommended Posts

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?

Share this post


Link to post
Share on other sites

Using Shoebox doesn't work with me, too.

 

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

 

032875c693.png

 

 

 

The spritesheet result is like this:

 

e802c000af.png

 

 

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

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.