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

We also managed to get our hands on an actual iPad, despite being a Canada-based shop. After getting to test Addicus HD on the iPad, we have already submitted an update to fix a couple of issues. Look for that and also an update to Poptweets HD coming soon.

Here are some photos of the games running in all their glory:

Poptweets is near completion and we’ll have plenty more information on it over the next few days!

1. How to Open a URL in Safari
2. How to Show an Alert with UIAlertView
3. How to Display an Activity Indicator with UIActivityIndicatorView
4. Eliminating class dependencies on your app delegate
5. How to Load a UIImage From a URL
6. How to Open the Mail App With a Pre-Composed HTML Email
7. How to Get the Current Time With NSDate
8. How to Get the Platform Name
9. How to Set Your App’s Splash Screen
10. String Comparison Using NSString
11. How to Hide (and Show) the Status Bar
12. How to Dial a Phone Number
13. How to Get Your App’s Display Name and Version
14. How to Retrieve Your App Delegate Singleton Instance
15. How to Make the iPhone Vibrate
16. How to Show the Network Activity Indicator
17. How to Prevent the iPhone From Sleeping
18. How to Take the Shine off Your App’s Icon
19. How to Format an NSString
20. How to Play a Video With MPMoviePlayerController
21. How to Upgrade Your iPhone Game to OpenFeint 2.4
22. How to Log to the Console Using NSLog
23. How to Suspend Touch Input
24. How to Open the SMS App With a Phone Number

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: