Sprite Sheet Animator [v2.1]
I've made a simple JavaScript sprite sheet animator / previewer.
It supports files from your PC and from the web.
You can generate link to the animation for sharing the preview.
v2.1 - supports exporting animated sprites to GIF files.
Edit: for some reason it only works with sprites imported from your PC and not web-linked sprites.
Example 1: File from web
Example 2: File from my PC (base64 encoded)
CHANGE LOG:
2018-09-10 v2.1
- implemented saving animation to GIF
2018-06-23 v2.0
- implemented animation with Canvas element for nicer up-scaling
- added UI controls (slider, buttons, frame number)
- added option to reverse animation
- added sheet spacing option
- added option to save settings to local storage
2013-07-31 v1.0
- initial release
If you're interested, what I think would be really useful is something like this:
A sprite application that does something similar to what you've done except also allows you to divide rows into animations. Then it would spit out an easily parsable file, like XML (or something even simpler) containing the following information for each frame:
Four numbers describing a rectangle that defines where on the sprite sheet that frame is.
The name of the animation that frame belongs to (and the order - or sput out the frames in order)
This is a simple tool I haven't really gotten around to making. But it would make my life much much easier when importing sprite sheets from OGA.
Hi, I have made a tool that allows previewing and ez exporting to createjs json and gif format. Its available on https://jswriter.com/app/demo/spriter
I'll be happy to add more formats if requested :)
Please checkout my site. I hope to all gamedevs and artists the best in their endeavors!
Any other tools? jswriter is no longer around :|
is.si is nice though you can't export.
https://gif.com.ai look inside for a sprite animator.
I also found this old Windows tool: http://rmrk.net/index.php?topic=41524.0
Hey,
i've updated the animator to support exporting GIFs.
Edit: for some reason it only works with sprites imported from your PC and not web-linked sprites.
hmm, does it work for you in firefox? I tried importing from PC and hotlinking.
Yeah it works but only if i have not saved settings with a linked image.
Very strange since it uses the same canvas (the one normaly displaying the animation) as input for the gif.
It seems the problem is CORS ( https://en.wikipedia.org/wiki/Cross-origin_resource_sharing )
it is a security measure that blocks javascript accessing image data from cross-site resources. It can't be bypassed and once it loads a cross-site resource it will block the required method (getImageData()) even if you load the local image after. So you have to refresh the page and be sure you did not Save Settings with hot-linked image, since that will load it again after refresh.
This is awesome! Could you please add support for transparent backgrounds, though?
Thanks,
I'm not sure what you mean by transparent background. It is already supported. Source png has to have alpha channel (transparency) and than you can set your background using hex code (ex: #ff0000) or keyword (ex: red) or try keyword "transparent".
Unless you mean a generated GIF with transparent background. Supposedly gifs don't support alpha channel (transparency).
i've updated the animator to support exporting GIFs.
Hi! Awesome tool! But it doesn't support transparent background though, the background is black when generated. I'm trying to export my gifs with transparent background like other gifs but somehow can't with this tool even with bbackground set as "transparent". Hope this feature gets added!
Necroposting again? Fine...
@InanZen: "Unless you mean a generated GIF with transparent background. Supposedly gifs don't support alpha channel (transparency)."
No they don't support alpha, but they do support one specific background color for transparency (using only one color to represent transparency results in sharp cut contours, not really looking good IMHO).
From even earlier:
@jeremyW: "A sprite application that does something similar to what you've done except also allows you to divide rows into animations. Then it would spit out an easily parsable file, like XML (or something even simpler)"
I've implemented exactly this in TirNanoG Editor. You can define the sprites on a spritesheet with a few clicks, then you can save the specification into a plain simple text file, and then you can save the animated sprites into separate image files. Later you can re-use that sprite specification on other spritesheet images as well.
"This is a simple tool I haven't really gotten around to making. But it would make my life much much easier when importing sprite sheets from OGA."
That was exactly my drive too. For those who are interested, the sprite specification format is very simple, there's a line with 6 numbers which defines a grid:
(width) (height) (left margin) (top margin) (vertical padding) (horizontal padding)
All the other lines look like this:
(direction) (animation type) (name of the sprite) (list of grid coordinates, as many pairs as the number of the animation frames)
A typical file for an LPC spritesheet looks like this, a specification for FlareRPG hero sheets like this, and here is the detailed description of the format. For example:
64 64 0 0 0 0
no l cast (0,0) (1,0) (2,0) (3,0) (4,0) (5,0) (6,0)
we l cast (0,1) (1,1) (2,1) (3,1) (4,1) (5,1) (6,1)
so l cast (0,2) (1,2) (2,2) (3,2) (4,2) (5,2) (6,2)
ea l cast (0,3) (1,3) (2,3) (3,3) (4,3) (5,3) (6,3)
no l thrust (0,4) (1,4) (2,4) (3,4) (4,4) (5,4) (6,4) (7,4)
we l thrust (0,5) (1,5) (2,5) (3,5) (4,5) (5,5) (6,5) (7,5)
so l thrust (0,6) (1,6) (2,6) (3,6) (4,6) (5,6) (6,6) (7,6)
ea l thrust (0,7) (1,7) (2,7) (3,7) (4,7) (5,7) (6,7) (7,7)
...
You can parse this text file yourself if you want (pretty easy) and save a GIF for each sprite, but my tool also saves the animations in separate PNG files like Sara shoot for example (I've used PNG and not GIF because I needed the alpha channel. One color transparency wasn't enough for me).
Cheers,
bzt
I've made a fork with:
- Added option to change Sprite Orientation
- Added option to set transparent background
- GIF generate follow frame step (saving reverse animation)
- Reduce GIF size
https://detiam.github.io/animator
https://github.com/detiam/animator