Adding iOS5 native Twitter support to your cocos2d app

In iOS5, Apple introduced native Twitter integration via the "Tweet Sheet" (aka TWTweetComposeViewController), allowing you to easily implement Twitter in your iOS app without worrying about all the heavy lifting. If you tried implementing Twitter support in the past and found yourself lost in a sea of OAuth source files, trying to handle authentication yourself, and banging your head over what to do with various responses, you'll know how much of a relief it is that this now "just works."

This is great for UIKit, but what if you want to implement the same simple Twitter sharing functionality in your cocos2d game? Luckily, it's nearly as easy!

Note: You should have the latest version of Xcode installed (as of this writing I'm using 4.3.1), at least cocos2d 0.99.5 installed and working, and you should know how to create a new project with the "Hello World" cocos2d template. If you don't, you might want to take care of this before proceeding or check out some of our previous cocos2d tutorials.

Create a new project

Create a new cocos2d application and call it TweetMe. Run the application in the iOS Simulator to make sure it's working. You should see this:

Add the Twitter framework

Next, we'll need to add the Twitter framework to our project. To do this:

1. Click on the project icon in the leftmost pane (the blue icon that says "TweetMe").
2. Under Targets select "TweetMe"
3. Tap on the "Build Phases" tab.
4. Expand "Link Binary with Libraries"
5. Click the "+"

Search for "Twitter.framework", select it, and click "Add". Here is a little guide (click to enlarge):

Finally, in your HelloWorldLayer.m file, add the following import statement at the top:

  1.  
  2. #import <Twitter/Twitter.h>
  3.  

Create a view controller

To display the Tweet Sheet, we'll need a view controller to contain it, and then add it as a subview to the CCDirector's OpenGL view.

In your HelloWorldLayer.h interface file, create a UIViewController property:

  1.  
  2. #import "cocos2d.h"
  3.  
  4. // HelloWorldLayer
  5. @interface HelloWorldLayer : CCLayer
  6. {
  7. UIViewController *viewController;
  8. }
  9.  
  10. // returns a CCScene that contains the HelloWorldLayer as the only child
  11. +(CCScene *) scene;
  12.  
  13. @property (nonatomic, retain) UIViewController *viewController;
  14.  
  15. @end
  16.  

In the implementation file, synthesize it and release it in dealloc (if you're running one of the latest versions of cocos2d that supports ARC, you won't need to do this):

  1.  
  2. // ...
  3. // HelloWorldLayer implementation
  4. @implementation HelloWorldLayer
  5.  
  6. @synthesize viewController;
  7. // ...
  8.  
  1.  
  2. // ...
  3. - (void) dealloc
  4. {
  5. [viewController release];
  6. [super dealloc];
  7. }
  8. // ...
  9.  

Create a tweet button

Next, let's create a button the user can tap to trigger the Tweet Sheet. You can use these two images for the button's selected/unselected state:

tweet.png
tweetSelected.png

If you've checked out our previous tutorial on creating simple menus in cocos2d, this code should be pretty self-explanatory. Your init method should look like this:

  1.  
  2. // on "init" you need to initialize your instance
  3. -(id) init
  4. {
  5. // always call "super" init
  6. // Apple recommends to re-assign "self" with the "super" return value
  7. if( (self=[super init])) {
  8.  
  9. viewController = [[UIViewController alloc] init];
  10.  
  11. CCMenuItemImage *tweetButton = [CCMenuItemImage
  12. itemFromNormalImage:@"tweet.png"
  13. selectedImage:@"tweetSelected.png"
  14. target:self
  15. selector:@selector(tweetButtonTapped)];
  16.  
  17. CCMenu *menu = [CCMenu menuWithItems: tweetButton, nil];
  18. [self addChild: menu];
  19. }
  20. return self;
  21. }
  22.  

First we're initializing our viewController (to be used later), Next, we create a button with normal and selected state images, and have it trigger a "tweetButtonTapped" method (that we need to create) when tapped by the user. Finally, we create a menu with the button and add it to our scene.

Tweet me!

Ok, now for the fun stuff! Here is the method we'll trigger when the user taps the tweet button:

  1.  
  2. - (void) tweetButtonTapped
  3. {
  4.  
  5. if ([TWTweetComposeViewController canSendTweet]) // Check if twitter is setup and reachable
  6. {
  7. TWTweetComposeViewController *tweetViewController = [[TWTweetComposeViewController alloc] init];
  8.  
  9. // set initial text
  10. [tweetViewController setInitialText:@"Greetings Twitterverse!"];
  11.  
  12. // setup completion handler
  13. tweetViewController.completionHandler = ^(TWTweetComposeViewControllerResult result) {
  14. if(result == TWTweetComposeViewControllerResultDone) {
  15. // the user finished composing a tweet
  16. } else if(result == TWTweetComposeViewControllerResultCancelled) {
  17. // the user cancelled composing a tweet
  18. }
  19. [viewController dismissViewControllerAnimated:YES completion:nil];
  20. };
  21.  
  22. // present view controller
  23. [[[CCDirector sharedDirector] openGLView] addSubview:viewController.view];
  24. [viewController presentViewController:tweetViewController animated:YES completion:nil];
  25.  
  26. }
  27. else
  28. {
  29. // Twitter account not configured, inform the user
  30. NSLog(@"NO TWITTER ACCOUNT CONFIGURED. DO SOMETHING");
  31. }
  32. }
  33.  

If you've used the Tweet Sheet in a UIKit-based app before, this should all look pretty familiar and pretty similar to Apple's documentation. The key here is that we're adding the Tweet Sheet to CCDirector's openGLView:

  1.  
  2. [[[CCDirector sharedDirector] openGLView] addSubview:viewController.view];
  3.  

To test, you'll first want to configure a Twitter account in Settings on your device (or the Simulator). Otherwise, when you tap "Tweet!" nothing will happen. (Note: You'll want to handle this somehow, e.g. a message asking the user to configure a Twitter account to tweet from your app).

Build and run the app, tap "Tweet!", and you should see see the Tweet Sheet:

For fun, try changing up the message, adding a URL, and attaching an image. And of course, follow @reigndesign and @reigngames on Twitter! 😀

Stephen Ceresia

Stephen Ceresia is Marketing Manager at ReignDesign. Stephen is from Canada and is currently based in Shanghai.

5 comments

  1. Yes, it would be nice to have a similar tutorial for Facebook. Also, you imply that you can setup a Twitter account on the simulator but I don’t think this is possible (you should edit your statement). If it is possible, please explain.

Leave a Reply

Your email address will not be published. Required fields are marked *