It’s actually quite simple to do using cocos2d’s CCSpriteSheet, CCSprite and CCAnimation classes. These classes take a texture atlas and switch between frames at regular intervals. In other words: animation!

Here is how to animate a sprite in cocos2d in 5 steps. You can also download the code for this blog post.

1. Create Your Animation Texture Atlas

First you need to combine all of the frames of your animation into a single graphic, called a texture atlas. You can do this by hand in an image editor like Photoshop, simply by copying and pasting all of the frames of your animation into a single file. Alternatively, there are atlas generating tools that will take a batch of image files and compile them into a texture atlas in just a couple of clicks.

I recommend using a Flash-based tool called Zwoptex because it is officially supported by cocos2d.

Once you’re done, you should have an image that contains all of the frames of your animation such as the one below:

Incidentally, this image is included in the cocos2d distribution.

2. Create a CCSpriteSheet

Once we have the texture atlas, it is time to get coding. The following code would go in the init method of a CCScene sub-class.

The first step in code is to create an instance of a CCSpriteSheet using your texture atlas and child it to a node in the scene. In this case we are childing it to the CCScene itself.

CCSpriteSheet *danceSheet = [CCSpriteSheet spriteSheetWithFile:@"grossini_dance_atlas.png"];
[self addChild:danceSheet];

3. Create a CCSprite Using Your CCSpriteSheet

Next we create a CCSprite that uses the texture of the CCSpriteSheet that we just created. We then child it to the CCSpriteSheet. The rect that we initialize the CCSprite with is the first frame of the animation.

CCSprite *danceSprite = [CCSprite spriteWithTexture:danceSheet.texture rect:CGRectMake(0, 0, 85, 121)];
[danceSheet addChild:danceSprite];

4. Create a CCAnimation

Next we need to create a CCAnimation instance and add all frames of the animation to it. In the case of this texture atlas, we know all of the frames are the same size and there are 14 of them, so we can use a nested loop to iterate through them all and break the loop when we finish adding frame #14.

CCAnimation *danceAnimation = [CCAnimation animationWithName:@"dance" delay:0.1f];
 
int frameCount = 0;
for (int y = 0; y < 3; y++) {
	for (int x = 0; x < 5; x++) {
		CCSpriteFrame *frame = [CCSpriteFrame frameWithTexture:danceSheet.texture rect:CGRectMake(x*85,y*121,85,121) offset:ccp(0,0)];
		[danceAnimation addFrame:frame];
 
		frameCount++;
 
		if (frameCount == 14)
			break;
	}
}

5. Run the CCAnimation on the CCSprite

Finally, we need to create a CCAnimate action instance which we can run on the CCSprite. Below, we also wrap the CCAnimate action in a CCRepeatForever action that does what you would expect: repeats the animation… forever.

The last line actually plays the animation on the sprite using the runAction message.

CCAnimate *danceAction = [CCAnimate actionWithAnimation:danceAnimation];
CCRepeatForever *repeat = [CCRepeatForever actionWithAction:danceAction];
[danceSprite runAction:repeat];

Putting it All Together

Here is what the above code looks like in a CCScene init method:

//
//  DanceScene.m
//  GrossiniDance
//
 
#import "DanceScene.h"
 
 
@implementation DanceScene
-(id)init {
	self = [super init];
 
	if (self) {
		// create the sprite sheet
		CCSpriteSheet *danceSheet = [CCSpriteSheet spriteSheetWithFile:@"grossini_dance_atlas.png"];
		[self addChild:danceSheet];
 
		// create the sprite
		CCSprite *danceSprite = [CCSprite spriteWithTexture:danceSheet.texture rect:CGRectMake(0, 0, 85, 121)];
		[danceSheet addChild:danceSprite];
 
		// position the sprite in the center of the screen
		CGSize s = [[CCDirector sharedDirector] winSize];
		danceSprite.position = ccp(s.width/2,s.height/2);
 
		// create the animation
		CCAnimation *danceAnimation = [CCAnimation animationWithName:@"dance" delay:0.1f];
 
		int frameCount = 0;
		for (int y = 0; y < 3; y++) {
			for (int x = 0; x < 5; x++) {
				CCSpriteFrame *frame = [CCSpriteFrame frameWithTexture:danceSheet.texture rect:CGRectMake(x*85,y*121,85,121) offset:ccp(0,0)];
				[danceAnimation addFrame:frame];
 
				frameCount++;
 
				if (frameCount == 14)
					break;
			}
		}
 
		// create the action
		CCAnimate *danceAction = [CCAnimate actionWithAnimation:danceAnimation];
		CCRepeatForever *repeat = [CCRepeatForever actionWithAction:danceAction];
 
		// run the action
		[danceSprite runAction:repeat];
	}
 
	return self;
}
@end

Less Yap, More Tip

Today’s advent tip is how to open the Messages app (aka the SMS app) with a specific phone number populated in the To: field. This is accomplished with great ease because the iPhone has implemented the sms: URI scheme. Therefore, we can use the UIApplication class’ openURL method, which we have seen before when we discussed how to dial a phone number, pre-compose an email, and yes, even open a URL.

So here it is: the one line of code you need to pop open the SMS app with a phone number:

[[UIApplication sharedApplication] openURL:[NSURL URLWithString:@"sms:5555555555"]];

We had a number of cases like this when developing Addicus. In particular, because we have both the game and game over screens operating in a single cocos2d scene, we were noticing some bugs that occurred because of the way we handled input. This was solved by suspending input for brief periods of time.

Input Goes Off

Here’s how to tell your iPhone app to stop responding to touch events in just one line of code:

[[UIApplication sharedApplication] beginIgnoringInteractionEvents];

Input Goes On

And as you might expect, resuming responding to touch input events is similarly easy:

[[UIApplication sharedApplication] endIgnoringInteractionEvents];

NSLog

Logging statements to the console is just as easy as you would expect it to be in iPhone app development. Just run the NSLog function like so:

NSLog(@"hello world");

Format Specifiers

The NSLog statement also supports string formatting specifiers, so you can also output the values of variables to the console with just one line. Below are some examples:

NSString * str = @"hello world";
NSLog(@"%@", str);
 
int num = 10;
NSLog(@"%i", num);
 
float price = 1.99;
NSLog(@"%f", price);

If you are upgrading to OpenFeint 2.4 from a previous version, then it is not as easy as replacing the source code. However, it is still quite easy to make the upgrade if you just keep a few things in mind. Here’s what you need to know:

Disabling Chat

If you were previously disabling the chat feature in order to meet a certain parental ratings requirement, then you would be doing so by passing the OpenFeintSettingDisableChat setting into the initializeWithProductKey method. Since chat is not the only user-genereated content in OpenFeint 2.4, this setting name has been changed to OpenFeintSettingDisableUserGeneratedContent. Below is the new way to initialize OpenFeint with chat (and all user-generated content) disabled:

NSDictionary* settings = [NSDictionary dictionaryWithObjectsAndKeys:
			[NSNumber numberWithInt:UIInterfaceOrientationLandscapeRight], OpenFeintSettingDashboardOrientation,
			@"Addicus", OpenFeintSettingShortDisplayName,
			[NSNumber numberWithBool:YES], OpenFeintSettingDisableUserGeneratedContent,
			nil];
 
OFDelegatesContainer* delegates = [OFDelegatesContainer containerWithOpenFeintDelegate:self
								andChallengeDelegate:self
								andNotificationDelegate:self];
 
[OpenFeint initializeWithProductKey:@"MY_PRODUCT_KEY"
			andSecret:@"MY_PRODUCT_SECRET"
			andDisplayName:@"Addicus"
			andSettings:settings
			andDelegates:delegates];

New Library Dependencies

If you replaced OpenFeint 2.3.x in your project with the new 2.4 source, you might have gotten a bunch of nasty errors upon building it. This is because the OpenFeint 2.4 requires more libraries to be added to your target. You need to add the following 3 frameworks to your target to get your OpenFeint 2.4 game to build successfully:

• CFNetwork
• CoreLocation
• MapKit

Achievements and Social Networks

In OpenFeint 2.4, unlocking an achievement no longer prompts the user to notify their friends on Twitter and Facebook by default. However, you can restore this behaviour by setting the OpenFeintSettingPromptToPostAchievementUnlock setting to be true at the time of initialization. Below is how to initialize OpenFeint 2.4 with prompts to post achievements to social networks enabled:

NSDictionary* settings = [NSDictionary dictionaryWithObjectsAndKeys:
			[NSNumber numberWithInt:UIInterfaceOrientationLandscapeRight], OpenFeintSettingDashboardOrientation,
			@"Addicus", OpenFeintSettingShortDisplayName,
			[NSNumber numberWithBool:YES], OpenFeintSettingPromptToPostAchievementUnlock,
			nil];
 
OFDelegatesContainer* delegates = [OFDelegatesContainer containerWithOpenFeintDelegate:self
								andChallengeDelegate:self
								andNotificationDelegate:self];
 
[OpenFeint initializeWithProductKey:@"MY_PRODUCT_KEY"
			andSecret:@"MY_PRODUCT_SECRET"
			andDisplayName:@"Addicus"
			andSettings:settings
			andDelegates:delegates];

1. Add the MediaPlayer framework to your target.

2. Import the MediaPlayer header file in the file you intend to begin playing the video in, like so:

#import <MediaPlayer/MediaPlayer.h>

3a. Now we can stream a video from the internet like so:

NSURL *url = [NSURL URLWithString:@"http://www.example.com/myvideo.m4v"];
MPMoviePlayerController *player = [[MPMoviePlayerController alloc] initWithContentURL:url];
[player play];

3b. Alternately, we can stream a video that you include in your app bundle. To stream a file called myvideo.m4v, you would run the following code:

NSString *path = [[NSBundle mainBundle] pathForResource:@"myvideo" ofType:@"m4v"];
NSURL *url = [NSURL fileURLWithPath:path];
 
MPMoviePlayerController *player = [[MPMoviePlayerController alloc] initWithContentURL:url];
[player play];

String formatting allows you to build a string based on a template and varying types of values. For example, if I am keeping track of a player’s score as an integer and I want to display a string to the player that celebrates their score by saying “You scored 2600! Way to go!”, then I need string formatting to get the correct score in the middle of that string.

How to Do It

Below is an example of how to build the above NSString. This example formats a string with an integer in it using the %i format specifier.

int score = 2600;
NSString * scoreString = [NSString stringWithFormat:@"You scored %i! Way to go!",score];

Format Specifiers

But string formatting doesn’t stop at putting integers in strings. Below are some of the most common format specifiers for other value types:

Left idle, the iPhone goes into sleep mode after about a minute. This narcoleptic behaviour saves on battery life, but there are situations where you would not want the device to go to sleep. For instance, in the middle of a multiplayer game that is turn-based, such as chess. You could wait for longer than a minute for your opponent to make make their move and you wouldn’t want to miss it when they did.

To keep the iPhone awake and alert, simply run the following line of code:

[UIApplication sharedApplication].idleTimerDisabled = YES;

Do use this tip sparingly though. The iPhone’s power is unmatched, to be sure, but unfortunately it is not unlimited.

Show It

If you would like to let your users know that your iPhone app is currently swapping data with the network, you can do so with this simple line of code:

[UIApplication sharedApplication].networkActivityIndicatorVisible = YES;

Hide It

You guessed it: once you’re done showing it, to hide it again, just set the same UIApplication property to NO like so.

[UIApplication sharedApplication].networkActivityIndicatorVisible = NO;

We actually use the Audio framework to vibrate device. Here is how to do it in 3 simple steps:

1. Add the AudioToolbox framework to your target.

2. In the file you intend to trigger a vibration, import the AudioToolbox header file:

#import <AudioToolbox/AudioToolbox.h>

3. Finally, call the following line to make the device vibrate:

AudioServicesPlaySystemSound(kSystemSoundID_Vibrate);