I am learning the basics of iPhone frame animation. I have code that loops through 15 images to do an animation:

- (void)viewDidLoad
    [super viewDidLoad];
    UIImageView *iv = [[UIImageView alloc] initWithFrame:CGRectMake(40, 40, 95, 70)];
    NSMutableArray *arr = [[NSMutableArray alloc] init];
    for(int i = 1; i <=15; i++){
        UIImage *img = [UIImage imageNamed:[NSString stringWithFormat:@"someImage_%02d", i]];
        [arr addObject:img];
    iv.animationImages = arr;
    iv.animationDuration = 1.0 / 2;

    [self.view addSubview:iv];
    [iv startAnimating];

I want to load images of Link from a picture I found on the internet. How can I take this image (available as a png) and load the unique parts of the image? I have heard of people putting multiple images into a single PNG to improve performance. How do I extract the individual images into an array for use in code like the above?

Please keep in mind this is my first time doing frame animation. I realize this code can likely be improved. I'm trying to keep things simple.

  • \$\begingroup\$ To use a sheet of images, you may have to manipulate the UV coordinates in the shader to access the proper character pose for each frame. I'll put some thought into how you can extract the images before I try and provide an answer. In the mean time, you might want to grab yourself a copy of Blender since my answer will definitely require this. \$\endgroup\$ Commented Jun 27, 2014 at 18:11
  • \$\begingroup\$ I have this partially working already using Blender so I think you should start a question on the Blender Stack Exchange forum that is mostly the same, but leave out the code part since that will confuse people there. I will add the solution that I'm working on now, and maybe someone else will have an even better solution. Basically I've set up the camera to zoom into one of the link images and I'm setting up an animation for the camera that will move along the image and render out each component as a separate image. At this point, it's just a matter of getting the accuracy down. \$\endgroup\$ Commented Jun 27, 2014 at 18:35
  • \$\begingroup\$ Is this the "normal" way of doing things if you will? Or are individual images more common? Using blender and all that seems like a lot of effort. \$\endgroup\$ Commented Jun 27, 2014 at 18:47
  • \$\begingroup\$ Those animation sheets are set up for efficiency and ease of use as you've already stated. You may have to ask another question here about how to write a shader that can alter the UV coordinates per frame to select the proper image sequence but that is going to be a tricky situation since the ordering of those images seems kindof all over the place. You will need a fairly complicated setup to select the proper UV coordinates for each of the animations available in that set. Anyways, I was planning on adding the .blend file setup and all the individual images to the answer I provide. \$\endgroup\$ Commented Jun 27, 2014 at 19:08
  • \$\begingroup\$ I have the first row rendered out but I'm concerned that I may be off by a few fractions of pixels by the time the camera moves across the whole sheet so I'm working on refining this a bit. Even though StackExchange forums are not about doing other people's work for them I don't mind doing this set to help you get started. However, you are going to run into problems here when you start doing all of the other characters because you will have several thousand images to load and keep track of. Separating them all is the easy part here. \$\endgroup\$ Commented Jun 27, 2014 at 19:25

1 Answer 1


Well I finally got it done and learned a few things in the process but teaching you how to use a bunch of Blender features is beyond the scope of this question so I'll just give you the results.

First, here is the .zip archive that contains all 405 animation components in the form of .png with alpha transparency. I removed the purple color-key since all modern hardware supports transparency. http://www.filedropper.com/toprow

I tried to retain the old school blockiness in case that's what you are going for but for some reason I could not coax Blender into doing this so the edges are soft.

Second, here is a video file that shows all the animations one after the other. I tested the video with Windows Media player with a stock build of Win7 that has no updates and it worked fine. http://www.filedropper.com/linkvideoxvid0000-0405 Use the following settings to have media player run the video at 16x16 pixels.
enter image description here

And here is the first frame so you can see what you have.

enter image description here

Also, here is the blender project in case you would like to figure out what I did here. If the other animation sheets have the exact same dimensions then you can just swap the images and press Animation in the Render tab.(Hopefully that's the case or you'll have some easy but very repetitive math to deal with) http://www.pasteall.org/blend/30072


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .