Script to display sprite sheet animations
I made a simple script in javascript for displaying sprite sheet animations since I could not find any good tools to do it for me. I hope it might be of use to someone else too.
https://github.com/wulax/sprite_sheet_preview/blob/master/sprite_sheet_p...
The script assumes all frames in one animation cycle are one one single row. If a sheet has multiple rows / animation cycles, you can change row by clicking on the document.
For more instructions, read the comments in the script.
Example of the script running:
https://dl.dropbox.com/u/76778780/sprite_sheet_preview.html
Note that the image in example, male_walkcycle.png, does not have a single animation cycle per row. The first one is stand/idle animation, because of this a small jump is shown in the walk animation.
If someone is interested in creating an animated gif from a sprite sheet, here is one way to do it using ImageMagick (available on most Linux distros):
Cut the sheet into separate image files:
convert male_walkcycle.png -crop 64x64 +repage +adjoin tile_%02d.png
Then join the images into a gif:
convert -delay 8 -loop 0 -dispose Background tile_*.png animation.gif
There is an image magic installer for windows as well. Even there is a portable version.
@wulax
http://craftyjs.com/api/SpriteAnimation.html
Demo: http://cruel-online.de (userinfo already in the fields, just login and use WASD to run)
If you are using the DOM then you can get hardware accelerated animation by using css animations. Something to consider if you are not using a canvas and smooth animation on mobile.