Best Approach for Sprite Animation?

SirCalalot

Hi counters of the poly!

I've been charged with being the artist on a 3-man, indy, platform game project for Android.
My lead programmer really wants to get the 'feel' of the character right before we work on anything else, so I created this little guy:



My initial idea was to animate him frame-by-frame in Photoshop and then use @mediochrea's sprite sheet generator script for Photoshop.

While the resulting animation isn't bad looking:



It is taking a helluva lot of time to make even this short little loop, and it will take even longer to get it to the smooth quality that I'd like.
At this rate, we won't even finish by the time humans leave the Earth.
Google has let me down, so I thought I'd ask you wonderful people!

My question is this: Is there a better method for creating and animating sprites for 2D games?

Help me polycount, you're my only hope!

SirCalalot

It's probably also worth mentioning that I tried using Photoshop's "timeline animation" feature that interpolates between keyframes.
I even separated the cat into separate manipulatable components:



Before finding out that the animation feature doesn't work with rotations, only translations

odium

Could you not map each of these segments to a quad, and then hand animate them in Max or something? That way you get total control over them?

SirCalalot

That's quite a good suggestion, actually @odium!
At least it's something to fall back on if I can't find a decent 2D-based solution.

Does anyone know what animation methods that Ubisoft used in Rayman: Origins?
Or what Behemoth used for Alien Hominid and Castle Crashers?

glynnsmith

The animation tools in Photoshop are pretty bad.

Fireworks and Flash both have better animation tools, but you might want to give the beta build of Spriter a go: http://www.kickstarter.com/projects/539087245/spriter

Justin Meisse

What's your budget? I know Toon Boom is a big name in 2d animation - maybe give the trial a test run: Toon Boom Animate

SirCalalot

THIS, is why I love you guys!
Barely 25 mins from posting and I get three great answers!

I've just downloaded Spriter, so I'll let you guys know how I get on with it.
With regards to budget @Justin, the cheaper the better really (it's only a small project as of the moment).
That being said, I'm currently downloading the trial of Toon Boom Animate and if I really love it, I can see myself doing a lot more 2D projects.

Thanks again guys.

glynnsmith

I recall that Castle Crashers was animated in Flash, where the sprites were baked out and put into their engine. Not 100% sure - It was a long time ago :P

EDIT: Have a dig through this for more info: http://devblog.thebehemoth.com/

SirCalalot

Cheers Glyn!

It's likely that Alien Hominid used a similar method, as it started out life as a flash game on Newgrounds in the first place.
Obviously the dev's are comfortable with Flash, so it makes sense.

Looks like I have some bed-time reading to do :P

renderhjs

From my notes at work, its about solutions for these kind of things

Most of these build on Flash as the main animation package and then enable a bridge to bring it into the engine / platform. Just at Soap alone we have like 3 solutions from us Game devs everyone coming up with something that doesn't really exist yet on the market.


Soap Related

Beta: Digging Dogs
http://meanwhileatthelab.blogspot.com.au/2012/02/using-flash-for-in-game-animation-in.html

• frame by frame snapshots of the transform states (not the bitmap sprites)
• parses SWF (onRenderFrameLate)

Beta: Miles Animation exporter

• Extention for Starling
• Exports from within Flash IDE using JSX

Beta: ShoeBox
http://renderhjs.net/shoebox/extractSWF.htm

• parses live running SWF (including
• supports AVM1, AVM2, AVM3
• generates spritesheet

HTML Platforms

Stable: HTML Canvas: AI2Canvas
http://visitmix.com/labs/ai2canvas/

• Add plugin to illustrator > Export the animation to HTML5 >Use image Path as function or animation as function
• Used in Cut the rope HTML5 (Channel 9)

Stable: HTML Canvas: Sencha Animator
http://www.sencha.com/products/animator/demos/

• stand alone editor
• no sprite sheets (bandwidth overhead)

Stable: HTML Canvas: Adobe Edge
http://edge.adobe.com/

• feels more like After Effects than Flash

Stable: HTML Canvas, SVG: Flash CS6
http://helpx.adobe.com/flash/using/whats-new-cs6.html

• requires additional download:http://www.adobe.com/products/flash/flash-to-html5.html
• supports also export PNG sequence

Beta: HTML Canvas: Silenus
http://silenus.silenistudios.com/
http://code.google.com/p/silenus/

• example page to test FLA files is broken
• poor performance

Beta: HTML Canvas: Flump
https://github.com/threerings/flump#readme

• demo https://aduros.com/flambe/demos/monster/?flambe=html
• uses HAXE to communicate or script with the converted animation
• requirtes another python script to compile or convert the compiled Haxe script
• pretty damn fast even on mobile browsers
• Fla convertion app is written in AIR

Stable: Zo

monster

For Hero Academy we did as Odium suggested. I created a MaxScript that could import a folder of images as planes. Since we used a 2D game engine, I also created a MaxScript that exported the animations as 2D data. (Only XZ Position and Y rotations.)




Video
https://dl.dropbox.com/u/2904948/Sketches/jrm_Taunts.mov

seforin

monster wrote: »

For Hero Academy we did as Odium suggested. I created a MaxScript that could import a folder of images as planes. Since we used a 2D game engine, I also created a MaxScript that exported the animations as 2D data. (Only XZ Position and Y rotations.)




Video
https://dl.dropbox.com/u/2904948/Sketches/jrm_Taunts.mov

wait not to derail but do you mean you created a texture atlas exported out of max based on the animation frames you animated to in max? (like you basically puppet shopped animated the guy on 2D planes/cards, and then export out the full thing as a texture atlas?

monster

seforin wrote: »

wait not to derail but do you mean you created a texture atlas exported out of max based on the animation frames you animated to in max? (like you basically puppet shopped animated the guy on 2D planes/cards, and then export out the full thing as a texture atlas?

You're not derailing, that a valid method for exporting sprite animations. (And I used that method on other games.)

However, that's not what we did on Hero Academy.

1. We create several images with different parts of the body. (Head, arm, weapon, ect...) We use a photoshop layer exporter to speed this up.
2. Import all the images in 3ds Max, and put them on planes. (MaxScript)
3. Assemble and rig the character. (By "Assemble" I mean put all the images together so they look like the character.)
4. Animate the rig.
5. Manually create an XML that attaches images to bones in our 2D game engine.
6. Export animations to an XML that only has Time and Offsets of the bones.
7. The build process creates a texture atlas out of large groups of assets for the mobile builds.

It sounds like a lot of work, but most of it is automated with scripts. We spend most of our time on designing the characters and animating them.

If you own Hero Academy on Steam you can dig around in the data/Civ folder to see what I'm talking about.

SirCalalot

This stuff is great, thanks @renderhjs !
Also, @monster that is looking like a very appealing solution.
How do you go about setting up the rig for 2D specific animations?
I take it that you are using camera-facing planes for body parts?