0
\$\begingroup\$

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.

\$\endgroup\$
  • \$\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\$ – MarcClintDion Jun 27 '14 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\$ – MarcClintDion Jun 27 '14 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\$ – P.Brian.Mackey Jun 27 '14 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\$ – MarcClintDion Jun 27 '14 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\$ – MarcClintDion Jun 27 '14 at 19:25
1
\$\begingroup\$

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

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.