What's the easiest frame by frame animation technique in the iPhone sdk?

Question

i've been developing for the iphone platform for about 3 weeks now, and I'm trying to set up a frame by frame animation with 16 1000x1000 png images (with transparency) and plan on animating with around 100 later, so first I tried using imageNamed to animate all the images like this

-(IBAction)startClick1:(id)sender { cloud.animationImages = [NSArray arrayWithObjects: [UIImage imageNamed: @"g0000.png"], [UIImage imageNamed: @"g0001.png"], [UIImage imageNamed: @"g0002.png"], [UIImage imageNamed: @"g0003.png"], [UIImage imageNamed: @"g0004.png"],

Now this worked fine in the simulator, but when it came to the device the device just reboots when it first attempts the animation, probably from the known memory issues with imageNamed, so after doing some research I found out that imageWithContentsOfFile is supposed to not cache the images and hopefully won't cause the iphone to reboot when the animation is requested to play so I changed my code to something like this:

- (IBAction)startClick:(id)sender { gordon.animationImages = [NSArray arrayWithObjects: [UIImage imageWithContentsOfFile: [[NSBundle mainBundle] pathForResource:@"g0001.png" ofType:nil] ], [UIImage imageWithContentsOfFile: [[NSBundle mainBundle] pathForResource:@"g0002.png" ofType:nil] ], [UIImage imageWithContentsOfFile: [[NSBundle mainBundle] pathForResource:@"ge0003.png" ofType:nil] ], [UIImage imageWithContentsOfFile: [[NSBundle mainBundle] pathForResource:@"g0004.png" ofType:nil] ], [UIImage imageWithContentsOfFile: [[NSBundle mainBundle] pathForResource:@"g0005.png" ofType:nil] ], [UIImage imageWithContentsOfFile: [[NSBundle mainBundle] pathForResource:@"g0006.png" ofType:nil] ],

Now this runs buggy in the simulator and doesn't work on the device in the same way the imageNamed method did. So, what's the best and easiest way to animate a sequence of images that will run fine on the device? Oh and when answering remember that I'm new to this platform.

Answer 1

I used this code which runs nicely - www.mode(no space here)jong.com/iPhone/ - Search for "PNG Animation" (SO wouldn't let me add the exact link)

It loads the PNG files as they are needed, and not in advance.

This solves the memory issue (you could even use the 1000x1000 frames) - However you still face a disk-space issue. The program will be huge for large/many animations.

HTH,

Oded.

Answer 2

Apple recommends always using an image program to resize your images, instead of the device. This takes a fair amount of processing power to do. That could be a major slow down, resizing 24 images in under a second.

Answer 3

One major difference between imageNamed: and imageWithContentsOfFile: is that imageNamed returns an image that has been pre-decompressed.

You can create your own "optimized" version without requiring the images to be cached by looking at this answer.

Now, I notice you're loading 1000x1000 images, but the screen size is only 320x480. Are you downscaling the image, cropping, or what? If you are downscaling, consider pre-downscaling the image. Also, is your animation meant to be 30fps, or is it more like a slideshow animation?

Finally, I would recommend loading up the frames of animation on demand. As you can see, 1000x1000 images take up too much memory to keep loaded optimized. If you only keep one in memory at a time, you won't crash, but you then have to be very careful about any pauses in your code. If you're doing a slideshow "ken burns" type effect, you can pre-optimize (decompress) one image for drawing for the duration of the slide.

If you're going for 30fps, you need to cut down the image size to get the speed up.

Answer 4

I had issues getting 3 transparent layers of 400x400 On the iphone, there is no way you can get 16 images of that size to work, so reassesing that should be first, second as for animation I use a repeating timer that calls every 24 seconds to render and set the rerender on the surface.