IPhone Dev: Animating PNG Sequences

Question

What is the best or recommended method for animating PNG sequences.
Here is what I learned:

Do it manually
Using MutableArrays containing strings, you can animate a UIImageView with a timer that increments the index number

UIImage - animation methods
This works, the only problem is to find if the image has completed the animation, you have to check isAnimating BOOL, and for that you need a timer.

Which is better and recommended?

Looking at an Oldschool-style sprite animation, that is:

Idle animation
Attack animation
Walk animation
Ect ...



Let me know if anyone has something.

@lessfame

Answer 1

Arrow animation example

UIImage* img1 = [UIImage imageNamed:@"fleche1.png"]; UIImage* img2 = [UIImage imageNamed:@"fleche2.png"]; NSArray *images = [NSArray arrayWithObjects:img1,img2, nil]; UIImageView* imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0.0, 0.0, 160.0, 160.0)]; [imageView setAnimationImages:images]; [imageView setAnimationRepeatCount:100]; [imageView setAnimationDuration:3.0]; imageView.center = myView.center; [imageView startAnimating]; [myView addSubview:imageView]; [imageView release]; 

Answer 2

The easiest way is to use Core Animation layers to create sprite animations:

• Make a "multi-cell" strip of the image (maybe PNG or JPG) of all the different movements for the sprite. Make each cell a fixed height or width.

• Put the image in a UIImageView.

• Take the CALayer in the view and set the contentsRect property of this layer. This acts as a cropping rectangle for the sprite. To animate a sprite, all you have to do is move the contentsRect to the next cell position in the image strip.

Something like this will do it (if you have already calculated newSpritePosition.

  [CATransaction begin]; [CATransaction setDisableActions:YES]; spriteLayer.contentsRect = newSpritePosition; [CATransaction commit]; 

(If you do not execute the second line, then you will get a default slide animation instead of "going" to the next state.)

With this technique, you can rotate through all sprite frames - like flip books. CALAyer operations are optimized, so you should get a pretty fast frame rate. You can set the animationDidStop completion handler to go to the next sprite or loop state back to the start frame.

Answer 3

It depends on how you are going to use sprites. If you just need a simple loop, then the UIImage method is great. If you need more granular control, you'll be happier by loading images into an array and looping them using NSTimer to handle time. Personally, I use the array method most often because it leaves me with more options in the future (for example, detection when the animation is complete). Another suggestion is to check out the cocos2d project. Its sprite is much more efficient than any of these suggestions.

Answer 4

As I said in another answer , I found this in a good way: PNG Animation method of Moses Dejon

From his words:

This example implements an animation-oriented view controller that just waits to read the PNG image data for the frame until it is needed. Instead of allocating a lot of megabytes, this class works in about half a megabyte of memory with about 5-10% of the processor load on the second-generation iPhone.

I'm still not sure how to do this. I find that I mainly use UIImageView to cache AVAudioPlayer.