What limitations of an iPad 4 should I take into account when working with an array of images to produce an animation?

Question

Here is what I'm trying to do: I want to have an app that displays a full-screen image and have that image animate by sliding a UISlider. A changing slider value will sequence through images of an array creating an animation. This animation is a single character on a turn-table. The character looks as though he is rotating around the turn table as the slider changes value.

This project is a portfolio piece for a 3D artist. The artist gave me a sequence of 180 images of the character rendered at the full screen retina resolution. He also gave be an additional 180 images rendered at the non-retina full screen resolution. The idea is that when somebody is viewing his character from any angle on a retina iPad, they can toggle using a UISwitch between retina and non-retina display. The code posted below works fine on the simulator.

However when running this code on an iPad 4, it works for a bit, then I get a memory warning. Then it crashes. I'm assuming having that many images of that size being displayed as fast as somebody wants to move a slider is too much for the iPad 4 to handle.

I'm curious what limitations I should take into account when working with images like this. Is 180 images way too many? What is a reasonable amount? Is there a more efficient way of producing my desired result? Instead of resorting the guess-and-check method of how many images would not cause it to crash, I figured somebody might have some useful insight on my issue.

@implementation RBViewController

- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.

_imageDisplay.image = [UIImage imageNamed:@"HyperReal_0.png"];

_arrayRetina = [[NSMutableArray alloc] initWithCapacity:180];
_arrayNormal = [[NSMutableArray alloc] initWithCapacity:180];

for(int i = 0; i < 179; i++)
{
    NSString *myImageString = [[NSString alloc] initWithFormat:@"HyperReal_%i.png", i];
    UIImage *myImageGraphic = [UIImage imageNamed:myImageString];
    [_arrayRetina addObject:myImageGraphic];
}

for(int i = 0; i < 179; i++)
{
 NSString *myImageString = [[NSString alloc] initWithFormat:@"lameHyperReal_%i.png", i];
    UIImage *myImageGraphic = [UIImage imageNamed:myImageString];
    [_arrayNormal addObject:myImageGraphic];
}
}

- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}

- (IBAction)switchButton:(id)sender {

if (_switchOnForRetina.isOn == YES)
{
    _imageDisplay.image = [_arrayRetina objectAtIndex:_sliderBar.value];
}
else
    _imageDisplay.image = [_arrayNormal objectAtIndex:_sliderBar.value];

}

- (IBAction)changeSlider:(id)sender {

if (_switchOnForRetina.isOn == YES)
{

_imageDisplay.image = [_arrayRetina objectAtIndex:_sliderBar.value];
}
else

_imageDisplay.image = [_arrayNormal objectAtIndex:_sliderBar.value];
}



@end

Answer 1

Instead of loading all 180 images at once into an array, couldn't you instantiate the current image to be displayed during the slider's continuous UIContolEventValueChanged event?

Create the slider

UISlider *slider = [[UISlider alloc] initWithFrame:CGRectMake(0, 0, 155, 20)];
slider.continuous = YES;
slider.value = 0.0f;
slider.minimumValue = 0.0f;
slider.minimumValue = 179.0f;
[slider addTarget:self action:@selector(handleContinuousSlider:) forControlEvents:UIControlEventValueChanged];

Handle it's continuous change event

- (void)handleContinuousSlider:(UISlider *)slider {
    //create a UIImage with file name that makes the current integer value of the slider
    NSString *myImageString = [[NSString alloc] initWithFormat:@"HyperReal_%i.png", slider.value];
    UIImage *myImageGraphic = [UIImage imageNamed:myImageString];

   //I assume this is a UIImageView
   [_imageDisplay setImage:myImageGraphic];

   [myImageGraphic release];
}

Answer 2

I'm not quite sure why you need to programmatically switch between Retina and non-Retina, as @2x handles that really well, but I'll assume there is a usage case I'm not familiar with and will leave it at that.

Regarding the memory usage, we're working on an app with similar functionality, and our solution was to populate an array with strings that refer to the image names (or file paths) of all the individual frames. In your case, you would store the reference myImageString rather than myImageGraphic.

Then when you drag your slider, you'd use something like this:

- (IBAction)changeSlider:(id)sender
{
    if (_switchOnForRetina.isOn == YES)
        _imageDisplay.image = [UIImage imageNamed:[_arrayRetina objectAtIndex:_sliderBar.value]];
    else
        _imageDisplay.image = [UIImage imageNamed:[_arrayNormal objectAtIndex:_sliderBar.value]];
}

One additional point, we use imageWithContentsOfFile due to lower memory usage as per this post, though imageNamed's caching may help in this case.

EDIT:

As mccrager pointed out, the above method only changes on touch up. Here's an example I'm using, though I'm using UIGestureRecognizer on a UIView to send a percent to the method rather than relying on a slider.

- (void)dragPosition:(float)myPercent
{
    NSInteger index = (self.images.count - 1) * myPercent;
    NSString *imageName = [self.images objectAtIndex:index];
    NSString *imagePath = [[NSBundle mainBundle] pathForResource:imageName ofType:@"jpg"];
    self.image = [UIImage imageWithContentsOfFile:imagePath];
}

Hope this helps!

Answer 3

Prebuffering memory cost is roughtly:

((2048*1536*4 + 1024*768*4)*180)/1024/1024/1024 = 2.63671875 giga bytes

Even if there some underground optimisation going on, your iPad dont have enough memory to safely run that program.

As a work around your crashes, dont preload all images and instead just load required one

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    [ self changeSlider: nil ];
}


- (IBAction)changeSlider:(id)sender {

    if (_switchOnForRetina.isOn == YES)
    {
        _imageDisplay.image =   nil;
        NSString*   pResourcePath   =   [ [ NSBundle mainBundle ] pathForResource: [ NSString stringWithFormat: @"HyperReal_%i", ( int )_sliderBar.value ] ofType: @"png" ];
        _imageDisplay.image =   [ UIImage imageWithContentsOfFile: pResourcePath  ];
    }
    else
    {
        _imageDisplay.image =   nil;
        NSString*   pResourcePath   =   [ [ NSBundle mainBundle ] pathForResource: [ NSString stringWithFormat: @"lameHyperReal_%i", ( int )_sliderBar.value ] ofType: @"png" ];
        _imageDisplay.image =   [ UIImage imageWithContentsOfFile: pResourcePath ];
    }
}

A better solution here would be to create 2 h264 movies from your images sequence

one in forward animation order, second in backward animation order

then play right movie depending on slider animation

Of course that's a lot more work.

Cheers