iPhone Programming Tutorial: Animating A Game Sprite

One thing I have noticed about many of the games in the app store is they lack animation. Of course, the huge companies like Sega and PopCap have some pretty amazing animation, but what about us indie iPhone game developers?

Well, Apple has made it quite simple to do animations. I really feel this method is often overlooked. I will show you in just a few lines of code, how to completely animate your game images. I will walk you through creating a simple application that uses animation. If you don’t care about creating the app and just want the animation code, you can skip to this step.  We will be making an animation of Ryu throwing some punches.

1. Create A View Based Application

I’m not going to explain this one…

2. Add These Images To Your Resources Folder

Downloadryu.zip and unzip it. Then drag the unzipped files into your Resources folder. Note: Sprite sheet downloaded from http://panelmonkey.org/. This file contains 12 images of Ryu from Street Fighter punching. It also has the background to Blanca’s stage just for fun.

3. Create The Background

You don’t have to do this step, it’s just to make it pretty.

Double click on whateveryoucalledyourapplicationViewController.xib to open it in Interface Builder. Click the arrow button on the view to rotate it. If you don’t what I am talking about, check out this post.

Drag a UIImageView on to the screen and stretch it to fill the entire iPhone screen. In the Attributes inspector select sfst-blanka.jpg. Make sure mode is set to center as this image has very low resolution. It should look something like this (I have added a black background color).

4. Creating The Animation

Open up yourApplicationViewController.m and add the following code to the viewDidLoad method.

- (void)viewDidLoad {
    [super viewDidLoad];
	NSArray * imageArray  = [[NSArray alloc] initWithObjects:
							[UIImage imageNamed:@"1.png"],
							[UIImage imageNamed:@"2.png"],
							[UIImage imageNamed:@"3.png"],
							[UIImage imageNamed:@"4.png"],
							[UIImage imageNamed:@"5.png"],
							[UIImage imageNamed:@"6.png"],
							[UIImage imageNamed:@"7.png"],
							[UIImage imageNamed:@"8.png"],
							[UIImage imageNamed:@"9.png"],
							[UIImage imageNamed:@"10.png"],
							[UIImage imageNamed:@"11.png"],
							[UIImage imageNamed:@"12.png"],
							nil];
	UIImageView * ryuJump = [[UIImageView alloc] initWithFrame:
		CGRectMake(100, 125, 150, 130)];
	ryuJump.animationImages = imageArray;
	ryuJump.animationDuration = 1.1;
	ryuJump.contentMode = UIViewContentModeBottomLeft;
	[self.view addSubview:ryuJump];
	[ryuJump startAnimating];
}

For all of you “1337″ coders that are going to post in the comments telling me “Why don’t you use a for loop to load the images” (very nerdy voice): I am doing it like this, so it is obvious what is going on.  I want to show that you must populate the array with images.

So here is what is going on in this code:

We first create an array of UIImages.  Next, we allocate our UIImageView. The next part is where the magic happens… Apple has given you a property of UIImageView that is an array of images.  The UIImageView class has a built in functionality to cycle through images at a given interval (hence animating them).

The next variable we see is the animation duration.  This is the number of seconds it takes to cycle through all of the images.  The default value for this is the number of images multiplied by 1/30.  This will give you a 30 fps frame rate.  Since we have 12 images and not 30, this duration would make our Ryu look like he was on crack.

In our case, the default would be 12 * (1/30) or .4 . We are going to slow this down significantly to 1.1.  Go ahead and play with this number when creating your animation.

The next variable is the contentMode.  The content mode determines how the image will fit inside the UIImageView frame.  Since our animation images vary in size, we just make the frame as large as the largest image and set the contentMode to UIViewContentModeBottomLeft.  What this means is, draw the image withough scaling and place it in the bottom left of the UIImageView.  Read up on contentMode to figure out what will be right for your applicaiton.

Finally, we just add the UIImageView to our main view and call the startAnimating method on it.  This will start the animation of these images.  There are also some other helpful methods you might use when doing animation.  They include stopAnimating and isAnimating.

5. Make Sure The Device Starts In Landscape Mode

In this example, we assumed that the device was in landscape mode.  Again, read this post to see how to do this.  It involves adding Initial interface orientation to the info.plist file and adding this code to your viewController.m file.

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
    // Return YES for supported orientations
    return (interfaceOrientation == UIInterfaceOrientationLandscapeLeft);
}

That concludes our simple animation tutorial. Post a question or ask me on Twitter if you need help.  You can download the source for this tutorial here. Happy iCoding!