★ TouchArcade needs your help. Click here to support us on Patreon.

What Program To Create Animation ?

02-09-2010, 06:34 PM
#1
Junior Member [Original Poster]
Joined: Feb 2010
Posts: 22
What Program To Create Animation ?

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 ?
02-09-2010, 07:35 PM
#2
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.

A ragdoll physics platformer:Flickitty
The artist: randall schleufer
Twitter: @FlickittyiPhone

02-09-2010, 07:52 PM
#3
Junior Member [Original Poster]
Joined: Feb 2010
Posts: 22
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 : -

HTML Code:
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.
02-09-2010, 08:09 PM
#4
Joined: Jun 2009
Location: London, UK
Posts: 3,741
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.

  /l、
゙(゚、 。 7 ノ
 l、゙ ~ヽ
 じしf_, )ノ

Last edited by MidianGTX; 02-09-2010 at 08:19 PM.
02-09-2010, 08:20 PM
#5
Quote:
Originally Posted by MidianGTX View Post
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?

I make games at PixelCUBE Studios! Follow me @naveen_pcs
02-09-2010, 08:23 PM
#6
Joined: Jun 2009
Location: London, UK
Posts: 3,741
Quote:
Originally Posted by simplymuzik3 View Post
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.

  /l、
゙(゚、 。 7 ノ
 l、゙ ~ヽ
 じしf_, )ノ
02-09-2010, 08:27 PM
#7
Quote:
Originally Posted by MidianGTX View Post
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!

I make games at PixelCUBE Studios! Follow me @naveen_pcs
02-09-2010, 08:31 PM
#8
Joined: Feb 2009
Location: San Jose, CA
Posts: 546
Quote:
Originally Posted by simplymuzik3 View Post
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.

Last edited by lazypeon; 02-09-2010 at 08:36 PM.
02-09-2010, 09:04 PM
#9
Quote:
Originally Posted by lazypeon View Post
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!

I make games at PixelCUBE Studios! Follow me @naveen_pcs
02-09-2010, 09:42 PM
#10
Joined: Feb 2009
Location: San Jose, CA
Posts: 546
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/..._extending.pdf
Straight from Adobe