Online Sprite Animator

[napalm22]

So, I didn't know if there was any easy way to make web-based animations out of the millions of sprite sheets on this site, so I built a little online animator.

I built it for my own projects, but (as usual) I'll share it with you guys since you are such a great resource. It's online, so no download is required.

Here is the builder:
http://kevinbertel.com/spritesinaction

and here is a demo:
http://kevinbertel.com/spritesinaction/demo


(PS: It's only been tested in Chrome and Firefox)

[Cobalt Blue]

the only thing remotely close to this was iaza. but this is far, far superior in every aspect.

[napalm22]

thank you :D

[Dazz]

This is actually really quite awesome, there's a couple little features I can imagine being pretty cool, but seriously... That's great.

Any way to save the animations though?

[napalm22]

This tool was built to make animations that can be controlled through javascript, for web-based games.

The export button at the bottom will output JSON (javascript object notation), which can be copied and pasted into the import box (also at the bottom) on your machine, or anybody else's. For example, you can paste the following output into your own import input box to get miraku's sheet:

Spoiler

["http://www.spriters-resource.com/ds/inuyashadivinejewel/miroku.png",[["Idle",[[74,64,15,16,0,0,150],[74,64,95,16,0,0,150],[74,64,175,16,0,0,150],[74,64,255,16,0,0,150]]],["Idle Back",[[74,64,415,16,0,0,150],[74,64,495,16,0,0,150],[74,64,575,16,0,0,150],[74,64,655,16,0,0,150]]],["Basic Attack",[[74,64,15,176,0,0,150],[74,64,95,176,0,0,150],[74,64,175,176,0,0,150],[74,64,255,175,0,0,150],[74,64,335,176,0,0,150],[74,64,415,176,0,0,150],[74,64,495,176,0,0,150],[74,64,575,176,0,0,150],[74,64,655,176,0,0,150],[74,64,735,176,0,0,150],[74,64,16,248,0,0,2000]]],["Sealing",[[74,64,15,328,0,0,150],[74,64,95,328,0,0,150],[74,64,175,328,0,0,150],[74,64,255,328,0,0,150],[74,64,335,328,0,0,150],[74,64,415,328,0,0,150]]],["Blades of Blood",[[74,64,15,409,0,0,150],[74,64,95,409,0,0,150],[74,64,175,409,0,0,2000]]],["Win",[[74,64,15,488,0,0,150],[74,64,95,488,0,0,150],[74,64,175,488,0,0,150],[74,64,255,488,0,0,150],[74,64,335,488,0,0,150],[74,64,415,488,0,0,150],[74,64,495,488,0,0,150],[74,64,575,488,0,0,150],[74,64,655,488,0,0,150]]],["Effect",[[215,127,17,563,0,0,150],[215,127,247,563,0,0,150]]]]]

It can be manipuated in your own projects by using the sprite sheet js file I built: http://kevinbertel.com/spritesinaction/j...teSheet.js (free to use, no credit needed).

I should add the ability to export to animated gif, since not everyone here is a programmer. I'll let you know when that is done.

I might also add a database where people can save their animations, and will let everyone browse what has been made, edit them, and save them as edited copies. Until then, if you want to share, you can just post the export output like I did above.

[napalm22]

Animated gifs:

OK, I added the ability to export the animations to animated gifs at the bottom of the Import/Export section. Clicking the button will show the animated gifs, which you can then right click and save to your computer (hot-linking won't work since they are built on the fly).

If there are any bugs with this or any part of the page, please let me know so I can fix them. Same with questions.

Again, the links are:
Blank: http://kevinbertel.com/spritesinaction/
Demo: http://kevinbertel.com/spritesinaction/demo

[Dazz]

This is fucking cool.

[napalm22]

Oh man... so last night I tried using this tool on my mobile device, and it worked, but seemed a little too difficult. I thought it might help to add small adjustment buttons to the frame editing (+1, -1, +Width, +Height), and oh man, did it speed things up!

Last night it took me about 20 minutes to make an animation, while dealing with all the nuances of a mobile phone. This morning after the changes, it took me under 5! (Sorry to post this, but it just made me happy.)

Spoiler

(TMNT: stance I did last night, walk I did much faster this morning)

["http://www.spriters-resource.com/gameboy_advance/tmnt/don.png",[["stance",[[42,50,1,40,0,0,150],[42,50,43,40,0,0,150],[42,50,85,40,0,0,150],[42,50,127,40,0,0,150],[42,50,170,40,0,0,150],[42,50,170,40,0,0,150],[42,50,214,40,0,0,150],[42,50,258,40,0,0,150],[42,50,300,40,0,0,150],[42,50,342,40,0,0,150],[42,50,384,40,0,0,150]]],["walk",[[42,53,1,93,0,0,150],[42,53,43,93,0,0,150],[42,53,85,93,0,0,150],[42,53,126,93,0,0,150],[42,53,166,93,0,0,150],[42,53,207,93,0,0,150],[42,53,247,93,0,0,150],[42,53,287,93,0,0,150],[42,53,328,93,0,0,150],[42,53,371,93,0,0,150]]]]]

[Dazz]

was going to mention those as an idea; the only other thing I think I can mention is maybe transparency on the gifs?

[napalm22]

If you want to see what anybody has done in the past, you can view every one that has been made:
http://kevinbertel.com/spritesinaction/gallery.php

Note: There are a lot of Inuyasha because that is the demo people can try out.