Sharing on Facebook and Twitter (and more)

Sharing games on social media is very common these days. Our game will not be an exception to that. It's not only an effective marketing tool for your game, as users promote the game for you on their social media pages, but also a great way for engagement to rise, as humans love competition. Being able to share and compare their scores (and indirectly compete) makes users want to play the game even more, which makes it a win-win situation for both the developers and players.

Using the built-in share feature

The easiest way to integrate Facebook, Twitter, messaging, e-mail, and other sharing options is through the UIActivityView object. It's the same sharing you'll see when you press the button in the bottom-left corner of the photos app.

Basically, all we need to do is tell the ActivityView object what we want to display and what activity types we want to exclude, and then present the view controller over the CCDelegate.

First, we need to create the Share button.

Creating the Share button

In GameOverScene.m, add the following block of code to the initWithScoreData method. This will create a Share button at the bottom center of our game over screen:

//add share buttons
CCButton *btnShare = [CCButton buttonWithTitle:@"" spriteFrame:[[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:@"btnShare.png"]];

[btnShare setTarget:self selector:@selector(openShareView)];
btnShare.position = ccp(winSize.width/2, winSize.height * 0.1);
[self addChild:btnShare];

Then, create the method that the share button will call when it is pressed (this must be added now, or else the game will crash when you reach GameOverScene):

-(void)openShareView
{

}

Run the game, and when you get to the game over screen, you'll see the share button in the bottom center. Right now, it doesn't do anything, so let's display the activity view.

Creating a variable for the current score

We need a way to track the player's current score and the score of the most recent play. Even though we can pass that information to the game over scene, unless we store that value in an instance variable, we won't be able to use it in our sharing.

So, in GameOverScene.h, add a variable for the current score, like this:

@interface GameOverScene : CCScene <CCTableViewDataSource>
{
  CGSize winSize;
  NSArray *arrScores;
  NSInteger highScoreIndex;
  
  //add this:
  NSInteger numCurrentScore;
}

Then, in the initWithScoreData method, we add the following line so that we can grab the total score that was passed to the scene:

numCurrentScore = [dict[DictTotalScore] integerValue];

Now we're ready to actually use the score in the text that we share.

Creating the UIActivityView object

In the openShareView method you just created, add these few lines of code (explanation afterwards):

NSString *textToShare = [NSString stringWithFormat:@"I scored %d in MathGame! See if you can beat me!",numCurrentScore];

NSString *appID = @"123456789"; //change to YOUR app's ID
NSURL *appStoreURL = [NSURL URLWithString:[NSString stringWithFormat:@"https://itunes.apple.com/app/id%@", appID]];

NSArray *objectsToShare = @[textToShare, appStoreURL];

UIActivityViewController *activityVC = [[UIActivityViewController alloc] initWithActivityItems:objectsToShare applicationActivities:nil];

First comes the text that we're going to display. We need to keep it short for a few reasons. The most important reason is that Twitter allows only 140 characters, so we need to make sure we don't cross that. The second reason is that our potential future players might not read it if it's longer than a sentence or two. Finally, we want the generic message that's going to be sent to at least feel personal. It has to be like reading a conversation between two best friends.

Next is the link to the App Store, which also takes in the app's ID. Notice the appID variable is just 1 through 9. This isn't the exact app ID at the moment (not even for the book's project), so what we're going to do is modify this line of code when we create the app in iTunes Connect (or if you already have an app created, you can use that app ID now).

After that is the array of objects to be included in the share. Simply add them to an array.

Finally, we create the UIActivityViewController object with the objectsToShare array.

But it's not yet displaying anything, so let's handle that.

Displaying UIActivityViewController

After you've initialized the activityVC variable in the openShareView method, add the following block of code. It will ensure that the activity view doesn't show certain activities, and then present the view controller over the shared CCDelegate:

NSArray *excludeActivities = @[UIActivityTypeAirDrop,
    UIActivityTypePrint,
    UIActivityTypeAssignToContact,
    UIActivityTypeSaveToCameraRoll,
    UIActivityTypeAddToReadingList,
    UIActivityTypePostToFlickr,
    UIActivityTypePostToVimeo];

activityVC.excludedActivityTypes = excludeActivities;

[[CCDirector sharedDirector] presentViewController:activityVC animated:YES completion:nil];

Since we don't want the user to print anything, assign anything to a contact, or add it to their reading list (Flickr, Vimeo, and so on), we need to exclude these activities, which basically means they won't show up on the view that appears when the user taps the share button.

This is a list of all the possible UIAcitivityTypes:

  • UIActivityTypeAddToReadingList;
  • UIActivityTypeAirDrop;
  • UIActivityTypeAssignToContact;
  • UIActivityTypeCopyToPasteboard;
  • UIActivityTypeMail;
  • UIActivityTypeMessage;
  • UIActivityTypePostToFacebook;
  • UIActivityTypePostToFlickr;
  • UIActivityTypePostToTencentWeibo;
  • UIActivityTypePostToTwitter;
  • UIActivityTypePostToVimeo;
  • UIActivityTypePostToWeibo;
  • UIActivityTypePrint;
  • UIActivityTypeSaveToCameraRoll;

So, for your own projects, feel free to include or exclude as many or as few of these as you wish. For example, if you're sharing a video, you can very easily allow Vimeo or saving the photos.

That's it! If you run the game at this point and click on the Share button, you'll see the activity view pop up, along with the various buttons for messaging, e-mail, Facebook, and Twitter. Clicking on any of these will load the respective view, along with the message and URL that was added.

Tip

When adding this to your own project, the key thing to note is the exclusion list.

Here's what the final version looks like:

Displaying UIActivityViewController

Adding a screenshot to the share

Even though we're adding some text and including a link to the game on the App Store, we should probably also include a screenshot because it's more likely someone will at least check out the game if there's a screenshot attached.

That being said, we don't really want a screenshot from the game over screen, so we'll have to grab a screenshot of the game right before we transition to GameOverScene.

So, open up MainScene.m and add the following method. It will take a screenshot of the game:

-(UIImage*)screenshot
{
  [CCDirector sharedDirector].nextDeltaTimeZero = YES;
  
CCRenderTexture* rtx =
[CCRenderTexture renderTextureWithWidth:winSize.width
  height:winSize.height];
[rtx begin];
  [[[CCDirector sharedDirector] runningScene] visit];
[rtx end];
  
return [rtx getUIImage];
}

Then, in the endGame method, let's call the preceding method and store it in a local variable so that we can pass it to the GameOverScene data:

UIImage *image = [self takeScreenshot];
  
NSDictionary *scoreData = @{DictTotalScore : @(numTotalScore),
    DictTurnsSurvived :@(numTurnSurvived),
    DictUnitsKilled :@(numUnitsKilled),
    DictHighScoreIndex :@(hsIndex),  
    @"screenshot" : image};

Notice the addition of the @"screenshot" key to the scoreData dictionary. This will pass our UIImage so that we can grab it in GameOverScene.

Next, in GameOverScene.h, add a variable for the screenshot, like this:

@interface GameOverScene : CCScene <CCTableViewDataSource>
{
  CGSize winSize;
  NSArray *arrScores;
  NSInteger highScoreIndex;
  NSInteger numCurrentScore;
  
  //add this:
  UIImage *screenshot;
}

Then in our initWithScoreData method in GameOverScene.m, we want to store the screenshot in the variable from the dictionary using the @"screenshot" key:

screenshot = dict[@"screenshot"];

Finally, in our openShareView method of the game over scene, all we need to do is add the screenshot variable to the objectsToShare array, and it will be automatically included:

NSArray *objectsToShare = @[textToShare, myWebsite, screenshot];

And that's it! By running the game now and getting to the share button, you'll see the image, whether you share via Facebook, Twitter, messages, or e-mail.

Tip

If you really want to get fancy, you can allow users to save the image just in case they want to keep it for their own records. To do that, just remove the SaveToCameraRoll option from the exclusion array in the openShareView method.

Here's what your game looks like with the screenshot added (sharing via Facebook):

Adding a screenshot to the share
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.147.77.208