PDA

View Full Version : What Program To Create Animation ?


onion
02-09-2010, 06:34 PM
Hi,

Apologies if this is posted in the wrong section ?

I am creating artwork and characters currently in Illustrator for a game concept, and I now need to move onto creating some basic animations, obviously Illustrator can't do direct animation, so, I was wondering what most devs / artists, etc who have already developed animated characters, etc for the iphone platform would recommend software wise, I have a couple of ideas, but I would like to seek out what the industry 'norm' would be for creating 2d animation from illustrator based artwork ?

Flickitty
02-09-2010, 07:35 PM
I think I am confused by this question, only because Illustrator is a sufficient tool for me to animate with. No, it doesn't do frame-by-frame animation, but I don't need that kind of ability and I don't need an onion-skin reference to animate.

Normally, I don't even know what the final animation looks like until I actually get it in the game.

Illustrator should export nicely to Flash. Furthermore, you can keep the vector graphics fully intact, and animate per frame, and scrub the frames to ensure smooth animation. DO NOT use interpolation, each frame should be a keyframe.

onion
02-09-2010, 07:52 PM
Hi, Flickitty

Thanks for your reply.

I suppose, essentially, I do need to be able to see my animation there and then when creating it, so I can tweak it as needs be, onion skinning would be nice, I did consider flash, but wondered what other options people were / are already using.

The vector aspect doesn't matter too much, as I will export .PNGs in the final version.

I should receive my iMac soon ( PC atm ), and I intend to create my game concept using GameSalad, after looking through their Wiki, I came across this : -

http://gamesalad.com/wiki/how_tos:gsc_images_for_animation

it recommends exporting sequential PNGs from the package of choice for use within the Gamesalad engine, I cannot for the life of me figure out how to do this ? I tried a animated gif in photoshop, exported as png, nothing but 1 frame, would love to know how to actually get a sequential PNG image exported, can flash do this ?

I'm still interested to hear what other devs have used for animation also, would like to research all possibilities. :)

MidianGTX
02-09-2010, 08:09 PM
Flash will export sequential image files, I can't say I've specifically seen .png in the list, but I've never looked. I don't see why it wouldn't be an option.

Edit: just booted my laptop and yes, you can export sequential .png images, and a bunch of other formats.

simplymuzik3
02-09-2010, 08:20 PM
Flash will export sequential image files, I can't say I've specifically seen .png in the list, but I've never looked. I don't see why it wouldn't be an option.

When people say they use flash to make the animations in their game, is this what they are doing? They export each frame as an image and they run them in order so it looks like an animation? Wouldn't this take lots of CPU power if you're even doing more than a few animations at the same time, since it has to keep changing the picture each frame for each different animation?

MidianGTX
02-09-2010, 08:23 PM
When people say they use flash to make the animations in their game, is this what they are doing? They export each frame as an image and they run them in order so it looks like an animation? Wouldn't this take lots of CPU power if you're even doing more than a few animations at the same time, since it has to keep changing the picture each frame for each different animation?

I have no idea. I've only ever used it for turning a few flv's into animated gifs. They weren't terribly big but I had to sit through a few seconds of progress bar.

simplymuzik3
02-09-2010, 08:27 PM
I have no idea. I've only ever used it for turning a few flv's into animated gifs. They weren't terribly big but I had to sit through a few seconds of progress bar.

Yeah, because I know that PG devs say they use flash to make all their animations, but I don't know how they are exporting them from flash so they run on the iPhone. I doubt their doing it frame by frame. If anyone knows how to do this, Im sure lot's of people would appreciate it!

lazypeon
02-09-2010, 08:31 PM
When people say they use flash to make the animations in their game, is this what they are doing? They export each frame as an image and they run them in order so it looks like an animation? Wouldn't this take lots of CPU power if you're even doing more than a few animations at the same time, since it has to keep changing the picture each frame for each different animation?
Yes, I believe this is what they mean. I've done it before and it works well. You can certainly use Photoshop and Illustrator to draw all the frames, and I frequently do do this. However, Flash has some great capabilities, namely the way to quickly prototype/view your animation in action which I haven't seen in Illustrator/PS. I would draw frames in Photoshop, import into Flash and put them sequentially on the timeline to see how the animation looks. I'm not an artist so I don't know if this is the most efficient way of going about things, but I found Flash to be really helpful in that regard. If you like drawing directly in Flash, look up 'onion skinning' as a technique to help you animate.

I read what the PG guys were doing, and I got the impression they were using Flash to export essentially animation 'tweens', which is the translation/rotation of objects over time. In this case, you'd craft your animation in Flash, and you'd write a script that would analyze each frame of the animation and record the position/rotation at each point. The output would be (just for an example) an XML file, describing the position/rotation of a sprite(s) over time. You'd parse this file in your iPhone app to recreate the same animation in Flash. This works when the animation can be described as above. For something where the sprite itself is changing, you generally can't use tweens (it doesn't make any sense). You can write Javascript scripts that Flash reads to accomplish this -- it's really easy. You can Google docs on it.

I don't think it's too slow, because frankly, how else would you do it. Whether I'm drawing frame1 on the screen vs frame2 on the screen, I don't expect to see any difference in terms of performance hit. Switching between images in memory is not going to be a big deal. Obviously if you're loading images from disk for each frame (which makes no sense) you would get a performance hit, but you are probably not doing this. You may see some performance gain by using a spritesheet instead of individual frames, but I don't know how much. This is because if you have a sprite that is not a power of 2, it allocates a texture the size of the next power of 2. For instance, if I have a 90x90 texture, it has to allocate a 128x128 texture, which causes more of a performance hit. Using sprite sheets, I can create a large texture (say 1024x1024) and pack a bunch of sprites onto it efficiently.

simplymuzik3
02-09-2010, 09:04 PM
Yes, I believe this is what they mean. I've done it before and it works well. You can certainly use Photoshop and Illustrator to draw all the frames, and I frequently do do this. However, Flash has some great capabilities, namely the way to quickly prototype/view your animation in action which I haven't seen in Illustrator/PS. I would draw frames in Photoshop, import into Flash and put them sequentially on the timeline to see how the animation looks. I'm not an artist so I don't know if this is the most efficient way of going about things, but I found Flash to be really helpful in that regard. If you like drawing directly in Flash, look up 'onion skinning' as a technique to help you animate.

I read what the PG guys were doing, and I got the impression they were using Flash to export essentially animation 'tweens', which is the translation/rotation of objects over time. In this case, you'd craft your animation in Flash, and you'd write a script that would analyze each frame of the animation and record the position/rotation at each point. The output would be (just for an example) an XML file, describing the position/rotation of a sprite(s) over time. You'd parse this file in your iPhone app to recreate the same animation in Flash. This works when the animation can be described as above. For something where the sprite itself is changing, you generally can't use tweens (it doesn't make any sense). You can write Javascript scripts that Flash reads to accomplish this -- it's really easy. You can Google docs on it.

I don't think it's too slow, because frankly, how else would you do it. Whether I'm drawing frame1 on the screen vs frame2 on the screen, I don't expect to see any difference in terms of performance hit. Switching between images in memory is not going to be a big deal. Obviously if you're loading images from disk for each frame (which makes no sense) you would get a performance hit, but you are probably not doing this. You may see some performance gain by using a spritesheet instead of individual frames, but I don't know how much. This is because if you have a sprite that is not a power of 2, it allocates a texture the size of the next power of 2. For instance, if I have a 90x90 texture, it has to allocate a 128x128 texture, which causes more of a performance hit. Using sprite sheets, I can create a large texture (say 1024x1024) and pack a bunch of sprites onto it efficiently.

Wow thanks for the reply! Im pretty good with flash and have made a few games with it, so Im going to try out exporting each frame and then re-creating the animation in Xcode. Hopefully it turns out well! Thanks again, really appreciate you taking the time to help other developers!

lazypeon
02-09-2010, 09:42 PM
Glad to help. You may consider looking at the following, which I found useful as someone doing Flash development (AS3), then moving to iPhone:

Cocos2D iPhone
http://code.google.com/p/cocos2d-iphone/
Great framework for getting started with 2D game dev for iPhone

Zwoptex
http://zwoptex.zwopple.com/
Load a bunch of single sprite frames, and it generates a sprite sheet for you. If you use Cocos above, you can load this VERY easily.

Getting Started with Flash Javascript API
http://livedocs.adobe.com/flash/9.0/main/flash_cs3_extending.pdf
Straight from Adobe

SiafuPhil
02-09-2010, 10:16 PM
I give a BIG +1 to cocos2d ;)

We used it to create Forest Folk (www.forestfolk.net / http://bit.ly/forestfolk-trailer)

Matt, the (amazing) illustrator/animator I work with uses Flash to design and create the characters and animations (using whatever techniques he wants), and we export the animations into a series of pngs, as mentioned above.

I then turn these into spritesheets, currently using a script in Photoshop, but we're just upgrading to the latest version of cocos2d so we can make use of the new zwoptex system.

Our main issue with this is texture memory, due to the large amounts of sprite sheets we already have, & the many more we want to add in updates. In which case, we may need to look at a similar system to what lazypeon mentioned about PG. I've already got a script to export tweens from Flash from another project, but am putting off implementing it all until we really need it ;) (got much more exciting things I'd rather be adding to the game!)

Most small-regular games shouldn't have any real issue with texture memory, so it should be fine for most projects...

The prez 12521
02-09-2010, 10:24 PM
I give a BIG +1 to cocos2d ;)

We used it to create Forest Folk (www.forestfolk.net / http://bit.ly/forestfolk-trailer)

Matt, the (amazing) illustrator/animator I work with uses Flash to design and create the characters and animations (using whatever techniques he wants), and we export the animations into a series of pngs, as mentioned above.

I then turn these into spritesheets, currently using a script in Photoshop, but we're just upgrading to the latest version of cocos2d so we can make use of the new zwoptex system.

Our main issue with this is texture memory, due to the large amounts of sprite sheets we already have, & the many more we want to add in updates. In which case, we may need to look at a similar system to what lazypeon mentioned about PG. I've already got a script to export tweens from Flash from another project, but am putting off implementing it all until we really need it ;) (got much more exciting things I'd rather be adding to the game!)

Most small-regular games shouldn't have any real issue with texture memory, so it should be fine for most projects...

If you use cocos2d can you implement things like openfeint? im looking into using cocos2d then will i need flash/illustrator/ and photochop?

SiafuPhil
02-09-2010, 10:31 PM
If you use cocos2d can you implement things like openfeint? im looking into using cocos2d then will i need flash/illustrator/ and photochop?

Sure can!

cocos2d is a base framework which saves you the hassle of writing all the OpenGL ES code, and other building blocks for a 2d game engine. You can add in any other 3rd party code you wish, and as its open source, edit/extend it how you like as well (although its best not to directly edit their source files, to keep updates easy. You can easily extend pretty much any aspect of the engine, without the need to directly tinker inside).

You could use other free apps like GIMP for photo editing. Not sure of a good alternative to Flash I'm afraid. Theres probably some about...

The prez 12521
02-09-2010, 10:32 PM
Sure can!

cocos2d is a base framework which saves you the hassle of writing all the OpenGL ES code, and other building blocks for a 2d game engine. You can add in any other 3rd party code you wish, and as its open source, edit/extend it how you like as well (although its best not to directly edit their source files, to keep updates easy. You can easily extend pretty much any aspect of the engine, without the need to directly tinker inside).

You could use other free apps like GIMP for photo editing. Not sure of a good alternative to Flash I'm afraid. Theres probably some about...

Trust me, i know my free good alternatives ive been searching and looking around quite a bit. now how much c/c++/objective c will me/developer need to know?

SiafuPhil
02-09-2010, 10:37 PM
Trust me, i know my free good alternatives ive been searching and looking around quite a bit. now how much c/c++/objective c will me/developer need to know?

;)

That depends on what you want to make!

If you've got some programming experience, then it shouldn't take too long to pick up with a good objective-c book & the Apple docs.

If this is your first attempt, I'd suggest starting small, prepare for lots of reading and learning, and be patient!

You could also take a look at some of the GUI based game builders, although I can't vouch for any, as I only tried one a year ago, and was very, very disappointed. Since finding cocos2d, I haven't look back.

Good luck with your learning, its a fun process to go thorugh :D

The prez 12521
02-09-2010, 10:43 PM
;)

That depends on what you want to make!

If you've got some programming experience, then it shouldn't take too long to pick up with a good objective-c book & the Apple docs.

If this is your first attempt, I'd suggest starting small, prepare for lots of reading and learning, and be patient!

You could also take a look at some of the GUI based game builders, although I can't vouch for any, as I only tried one a year ago, and was very, very disappointed. Since finding cocos2d, I haven't look back.

Good luck with your learning, its a fun process to go thorugh :D

Thanks :D my developer was banned here on TA and we havent talked in a little and im still trying to make my game happen. It will be a huge game. I know how you will all respond, but if it comes out like expected and it is advertised, it will be a hit

onion
02-10-2010, 03:47 AM
Thanks for the replies everyone, very much appreciated.

It seems flash would be the ideal choice when animating, and it plays well with illustrator.

I need to look into it's sequential PNG export, and do some tests. I tried a demo of Gif Movie Gear : -

http://www.gamani.com/

and this seems to work really well for exporting sequential pngs, which essentially is just a strip of frames, for some reason I was expecting something similar to an animated gif.

NickFalk
02-10-2010, 05:16 AM
Just to throw an alternative on the table: I use a combination of old fashion hand-drawing cell animations and Anime Studio (http://my.smithmicro.com/mac/animepro/index.html). I can really recomend the program and it's a lot cheaper than Flash.

knighty
02-11-2010, 03:38 AM
Yeah, because I know that PG devs say they use flash to make all their animations, but I don't know how they are exporting them from flash so they run on the iPhone. I doubt their doing it frame by frame. If anyone knows how to do this, Im sure lot's of people would appreciate it!

You import the file into flash, then export it as a PNG sequence. This does not take much memory if you use a sprite sheet for your animations, that way it loads it in Cache and uses very little memory.. There are tools to create sprite sheets out there: Try Zwoptex. http://zwoptex.zwopple.com/

This is the process we are using to make our Iphone game. Which by the way will be announced soon, and you will be very excited :D

Hope that helps!

kohjingyu
02-11-2010, 04:24 AM
Yeah, because I know that PG devs say they use flash to make all their animations, but I don't know how they are exporting them from flash so they run on the iPhone. I doubt their doing it frame by frame. If anyone knows how to do this, Im sure lot's of people would appreciate it!

They're doing it frame by frame and via a sprite sheet. The only way I know how to animate is frame by frame. The iPhone doesn't support .gif files if I'm not wrong.

eJayStudios
02-11-2010, 05:09 PM
Good info in this thread!

So just to confirm - you can create animations in Flash, export as series of png files then import into Zwoptex which makes a sprite sheet out of this.

Then animate with Cocos2D? Did I understand workflow correctly?

ylyu5
02-20-2010, 06:50 AM
Just a alternative solution

Have anyone heard about MotionWelder (http://www.motionwelder.com/)? It is actually a solution for J2ME developers to create animiation. As memory available in mobile phone is much more smaller than iphone, this software allows developer to slice images into more smaller pieces and organizes them in the software

the software is actually free. But it can only supports java at this moment. I think maybe we can make a reader to read the data from its exported files.

lazypeon
02-20-2010, 06:31 PM
Good info in this thread!

So just to confirm - you can create animations in Flash, export as series of png files then import into Zwoptex which makes a sprite sheet out of this.

Then animate with Cocos2D? Did I understand workflow correctly?
Yes, this is 100% correct. You don't HAVE to create them in Flash; you can create the frames in any program (Paint, Photoshop, etc... ) Flash is good for previewing the animation in progress, though.

And yes, then you import into Zwoptex. It assembles into a sprite sheet. The name you give the individual frames is important, because that is how you will reference them in Cocos2D. You might call them, for instance, "stickman_run_0.png", "stickman_run_1.png", etc...

Please refer to the 0.99 release notes for Cocos to see how you can use the CCSpriteFrameCache to do animation -- it's really easy and integrates perfectly with Zwoptex:

http://www.cocos2d-iphone.org/wiki/doku.php/release_notes:0_99_0

(Scroll to "CCSpriteFrameCache / Zwoptex support")

ex:

// loads the sprite frames from a Zwoptex generated file
[[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"animations/grossini.plist"];

NSMutableArray *animFrames = [NSMutableArray array];
for(int i = 0; i < 14; i++) {
CCSpriteFrame *frame = [[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:[NSString stringWithFormat:@"grossini_dance_%02d.png",(i+1)]];
[animFrames addObject:frame];
}

CCAnimation *animation = [CCAnimation animationWithName:@"dance" delay:0.2f frames:animFrames];