Animating images Objective-C

Question

I'm using an animation block to iterate through an array of .png images to make it look like a character is walking across the screen. However, the quality of the images blurs when I scale the image down. Currently I am testing the animation with 19 images all in 371 x 379 resolution. However, I need them to appear smaller on the screen so I scaled them to 64 x 65 on my app. When I do this, the lines distort a little bit and when I pause the game you can really tell that the image quality isn't where it should be. Below is the code I'm using to iterate through the images. Any help would be greatly appreciated.

[UIImageView animaiteWithDuration: 3.0
                            delay: 0
                          options: UIViewAnimationOptionBeginFromCurrentState
                       animations: ^{

 CABasicAnimation *mover = [CABasicAnimation animationWithKeyPath:@"position"];

 // Get the current presentationLayer of the object
 CALayer *currentLayer = self.layer.presentationLayer;

 // Get the current point of the presentationLayer
 CGPoint currentPoint;
 currentPoint.x = currentLayer.position.x;
 currentPoint.y = currentLayer.position.y;

 // Set the new point for the object to move to
 CGPoint newPoint;
 newPoint.x = currentLayer.position.x - 50;
 newPoint.x = currentLayer.position.y;

 // Set the from and to values of the animation
 [mover setFromValue: [NSValue valueWithCGPoint:currentPoint]];
 [mover setToValue: [NSValue valueWithCGPoint:newPoint]];
 [mover setDuration:3.0]; // Set the duration of the mover animation

 // Create the nine-teen UIImages for the array
 UIImage *image1 = [UIImage imageNamed:@"img1"];
 UIImage *image2 = [UIImage imageNamed:@"img2"];
 UIImage *image3 = [UIImage imageNamed:@"img3"];
 UIImage *image4 = [UIImage imageNamed:@"img4"];
 UIImage *image5 = [UIImage imageNamed:@"img5"];
 UIImage *image6 = [UIImage imageNamed:@"img6"];
 UIImage *image7 = [UIImage imageNamed:@"img7"];
 UIImage *image8 = [UIImage imageNamed:@"img8"];
 UIImage *image9 = [UIImage imageNamed:@"img9"];
 UIImage *image10 = [UIImage imageNamed:@"img10"];
 UIImage *image11 = [UIImage imageNamed:@"img11"];
 UIImage *image12 = [UIImage imageNamed:@"img12"];
 UIImage *image13 = [UIImage imageNamed:@"img13"];
 UIImage *image14 = [UIImage imageNamed:@"img14"];
 UIImage *image15 = [UIImage imageNamed:@"img15"];
 UIImage *image16 = [UIImage imageNamed:@"img16"];
 UIImage *image17 = [UIImage imageNamed:@"img17"];
 UIImage *image18 = [UIImage imageNamed:@"img18"];
 UIImage *image19 = [UIImage imageNamed:@"img19"];

 // Populate the animation array
 NSArray *walkingAnimation = [NSArray arrayWithObjects: img1, img2, img3, img4, img5, img6, img7, img8, img9, img10, img11, img12, img13, img14, img15, img16, img17, img18, img19, nil];

 [self setAnimationImages: walkingAnimation]; // Set the animation images to the array
 [self setAnimationRepeatCount:3]; // Repeat the animation every second
 [self setAnimationDuration:1.0]; 

 [self startAnimating]; // Start the animation
 [[self layer] addAnimation:mover forKey:@"position"]; // Add the mover animation to the layer
 [UIImageView commitAnimations];

 [[self layer] setPosition:newPoint]; // Set the position to avoid bounce back

 } completion:nil];

So if anyone can tell me if there is something extra I need to be doing to keep the images from distorting, or maybe it's the images themselves, I could really use some tips while I read everything in Apples API and check every forum on the internet.

Answer 1

Your issue should be nothing to do with code. You are resizing the images to a different aspect ratio. You should be very careful with image resizing as the image will naturally blur.

Your best option is to create accurate (sharp) images, purpose made for the size at which you will use them.