Sprite Animation

CSE 391 Fall 2012Tony Scarlatos

Getting started

• The goal of this demo is to show you how to create an animation loop inside of an image object, and to then animate that image object across the screen.

• To do this we’ll need to learn how to create and then populate an array of images. We’ll also learn how to force an iPhone app to display in landscape mode.

Develop resources

• For this demo I created an animation of a walk cycle for a character using Poser, a 3D character animation software package. The animation was rendered as 15 still images at 320 X 240 resolution (.png format) with an alpha (transparent) background.

• I also chose a background that was 640 X 480.

Create the project

1. In Xcode create a Single View Application, name it and save it (I named my project Boneyard).

2. In the Summary tab deselect the Portrait orientation icon.3. Drag and drop your images to the Supporting Files folder,

remembering to check that they should be copied to the destination folder. I had to rename the animation frames b01.png, b02.png, b03.png … for a reason I’ll explain later.

4. To clean up the Supporting Files folder select File > New > New Group. Now you can place all the images in that folder. You can name it “images”.

Adding assets

Define a method headerIn the ViewController.h file (from the Classes folder) I defined an image object (walk) and an array (anim), and established their properties. I also defined a method for moving the object called move. The NSMutableArray class simply means the dimensions of the array can change. The code looks like this:

#import <UIKit/UIKit.h>@interface boneyardViewController : UIViewController {

}

//Properties... @property (nonatomic, strong) IBOutlet UIImageView *walk;@property (nonatomic, strong) NSMutableArray *anim;

// A method to move the animated object...- (void) move;

@end

Set up the interface

1. Click the Main.storyboard file to open Interface Builder (IB).2. Rotate the View window to landscape mode. You can do this by

choosing Orientation > Landscape in the View Attributes tab of the Inspector window.

3. Bring in the background image object by dragging it from the Library to the View, and let it fill the View. You can add an image to it by selecting the image from the dropdown list in the Image View Attributes tab of the Inspector.

4. Add a second UIImage object to the View. I set the size of the object at 240 X 180 in the View Size tab of the Inspector. The default image for the object was b01.png which I selected from the dropdown list in the Image View Attributes tab of the Inspector.

Connect the method to the object

Select File’s Owner from the Document window. From the Outlets tab in the Inspector, drag a line from the circle to the right of the name of your outlet (I called mine walk) to the image object that will display your animation (not the background image). The setting for the image object should be “Scale To Fill”. In my case, the “Opaque” setting for the image had to be unchecked, so that the image’s alpha channel would reveal the background.

Populate the image array

• In order to execute the code that will populate the image array and play the images sequentially we need an event. Like we did before, we will use the viewDidLoad method, and that will act as our trigger.

• We begin by initializing the array in the first line of code. In the second line of code we create a for loop that will iterate through our array. The third line of code creates a string that substitutes the value of i for the %d variable in the image name (@“b%d.png”). Thus it will generate b01.png to b15.png. The fourth line of code assigns those items to the UIIMage object, and the fifth line of code imports the images to the array. The code is on the following slide.

The for loopanim=[[NSMutableArray alloc] init];

// A for loop is used instead of a list of each picture in the array.

for(int i=0;i<15;i++){

NSString *pic=[NSString stringWithFormat:@"b%d.png", i];UIImage *img=[UIImage imageNamed:pic];if (img)[anim addObject:img];

}

Play the images

The next three lines of code do the animating. They are added below the code we just inserted in the viewDidLoad method. In my example, the first line assigns the array of images (anim) to the UIImage object (walk). The second line sets the duration of each image’s display. Larger values display each image for longer, slowing the animation down. Smaller values speed the animation up. The last line starts the animation. The code is below:

[_walk setAnimationImages:_anim];[_walk setAnimationDuration:.75];[_walk startAnimating];

Move the image objectacross the screen

• To move the object across the screen continuously we’ll need to set a timer as we did before. The timer will spawn a thread that will execute the move method defined in the .h file.

• Right above the code we wrote in the viewDidLoad method (where we initialized the array) we will add 2 more lines of code. The first line sets the duration of the timer and triggers the move method at the end of the timer. It also tells the timer to repeat indefinitely. The second line of code just executes the move method the first time so there is no delay starting the animation. The value of the duration of the timer, of course, will vary with the animation you intend to do. The code is on the following slide.

Timer code[NSTimer scheduledTimerWithTimeInterval:17 target:self

selector:@selector(move) userInfo:nil repeats:YES];[self move];

Implement the move method

Finally, in the .m file, just above the @end statement we can implement the move method. The first and fifth lines of code define the start and end points of the animation, by defining the CGRect (window) of the animation. The first 2 values are the position of the window (x and y), and the second two values are the dimensions of the window. The third line of code sets the duration of the animation (which of course will vary depending on the project), and the last line of code commits the animation. Note the timer value in my project was 17, and the animation duration in the move method is 16.5. The code appears on the next slide.

The move method- (void) move{walk.frame=CGRectMake(-140,80,240,180);[UIView animateWithDuration:16.5 animations:^{ _walk.frame=CGRectMake(self.view.frame.size.width-60,80,240,180);}];}

Success!