Sunday, January 29, 2012

Tutorial - Integrate Nextpeer v0.0.10c to Cocos2D game

As I mentioned in my last post, I am going to talk about my experience with integrating Nextpeer v0.0.10c to my test Cocos2D game. Also added a short video at the end to show what it looks like after the integration.

Don't forget that you should always refer to their web site, the SDK and the sample project for the most accurate information. Any way, hope you find the following information helpful.

Please note that:
a) You should have a working game project before you start.
==> If you don't, you may use the Puff Puff 1.1 following this post, make sure you got it running ok in simulator first. And you can also refer to the tutorial video on Nextpeer site as it's also using Puff Puff, but with an older version of SDK.

b) Your game must have separated "Menu" and "Game" sections.
==> If your game doesn't have a "Menu" section (similar to my Dice in Cup test game),  you have to manually add one first.
==> In the "Menu" section you should have at least one normal "single player" menu option for your users to play the game normally without Nextpeer
==> Later we will add a new "multi players" menu option. When the "multi players" option been selected, it will call/load your "Game" section

Here are the steps I used:

1. Register and sign in to the Nextpeer developer web site

2. Download the latest SDK (mine is v0.0.10c) and sample project

3. Follow the "Tutorial -> Prepare" section to setup "build flag", add the "NPResources_iPhone_Landscape.bundle resource configuration" and import all required frameworks

4. Create an entry for your game in "Games -> Game Details"
==> for "Bundle Identifier", enter the settings of "Identifier" under "iOS Application Target" in your Xcode Project Summary
==> you will need the auto-generated "Game Key" later

5. Create one tournaments in "Games -> Manage Tournaments"

6. In your AppDelegate.h (Header file) add the import and "NextpeerDelegate" as shown below


#import "Nextpeer/Nextpeer.h"

@interface AppDelegate : NSObject <UIApplicationDelegate, NextpeerDelegate


7. In your AppDelegate.m add the followings line to the end of "applicationDidFinishLaunching" to initialise Nextpeer (will add that method in next step)


//------------------------------- Nextpeer SDK ---------------------------------//
// Nextpeer: Initialize the Nextpeer SDK once the game finished his splash screen
[self initializeNextpeer];
//------------------------------------------------------------------------------//



8. This is the longest step. Also in AppDelegate.m, copy and past the following methods, and then change those areas I marked as "TODO" including Game Key info, methods to load your "Game" section, ...etc accordingly to match your game project. You may also remove those "CCLOG" lines, I added them just to help me understand which one get calls at different situations.


#pragma mark NextpeercDelegate methods

//------------------------------- Nextpeer SDK ---------------------------------//
// STEP2 - PART 2
// Nextpeer: Initialize Nextpeer with your product key and the display name.
- (void)initializeNextpeer
{
    CCLOG(@" into initializeNextpeer ");

//TODO - replace the Key with your GameKey
[Nextpeer initializeWithProductKey:@"c32895fe65141e7f308519ea43699d2533f2843d" andDelegates:[NPDelegatesContainer containerWithNextpeerDelegate:self]];
    
}
//------------------------------------------------------------------------------//

//------------------------------- Nextpeer SDK ---------------------------------//
// STEP2 - PART 2
// Nextpeer: This delegate method will be called once the user is about to start a
//            tournament with the given id.
// @note: If your game supports more than one type of tournament, you should use tournamentUuid to start the right one.
-(void)nextpeerDidTournamentStartWithDetails:(NPTournamentStartDataContainer *)tournamentContainer {
    CCLOG(@"nextpeerDidTournamentStartWithDetails");


    // TODO - replace the following line with the methods to start your game. this is how 
    // Cocos2D loads my "Game" section called "GameLayer"
    //  ccSkyBlue is just a colour constant defined as
    //  static const ccColor3B ccSkyBlue = {176,226,255};
    //
    [[CCDirector sharedDirector] replaceScene
[CCTransitionFade transitionWithDuration:1.0 
scene:[GameLayer node]
withColor:ccSkyBlue]];
}
//------------------------------------------------------------------------------//

//------------------------------- Nextpeer SDK ---------------------------------//
// STEP2 - PART 2
// Nextpeer: This delegate method will be called once the time for the current ongoing game is up. 
// You should stop the game when this method is called.
-(void)nextpeerDidTournamentEnd {

CCLOG(@"nextpeerDidTournamentEnd");

        // TODO - replace the following line with the method to call your "Menu" section
[[CCDirector sharedDirector] pushScene:[MainMenu node]];

}
//------------------------------------------------------------------------------//

//------------------------------- Nextpeer SDK ---------------------------------//
// STEP2 - PART 2
// In order to improve rendering performance we will need to pause the CCDirector prior to the dashboard launch
- (void)nextpeerDashboardWillAppear {
    CCLOG(@"nextpeerDashboardWillAppear");
[[CCDirector sharedDirector] pause];
}
//------------------------------------------------------------------------------//

//------------------------------- Nextpeer SDK ---------------------------------//
// STEP2 - PART 2
// We can now resume the CCDirector as the dashboard disappeared
- (void)nextpeerDashboardDidDisappear {
    CCLOG(@"nextpeerDashboardDidDisappear");
[[CCDirector sharedDirector] resume];
}
//------------------------------------------------------------------------------//

//------------------------------- Nextpeer SDK ---------------------------------//
// STEP2 - PART 2
-(void)nextpeerDidReceiveTournamentCustomMessage:(NPTournamentCustomMessageContainer*)message{
    CCLOG(@"nextpeerDidReceiveTournamentCustomMessage");
}
//------------------------------------------------------------------------------//




9. Next, update your "Menu" section with extra "Multi Player" menu option. In my project it's in the "init" method of a separate class called "MainMenu". Only part of the code shown below.


-(id) init {
if( (self=[super init] )) 
{
[CCMenuItemFont setFontName:@"Marker Felt"];
[CCMenuItemFont setFontSize:35];
CCMenuItem *singlePlayerItem = [CCMenuItemFont itemFromString:@"Single Player" target:self selector:@selector(startSinglePlayerGame:)];
        
        //------------------------------- Nextpeer SDK ---------------------------------//
        // STEP3 - PART 1
        // Nextpeer: Add the "Multiplayer" menu option, this is the entrance to Nextpeer
        CCMenuItem *multiplayerItem = [CCMenuItemFont itemFromString:@"Multi Players" target:self selector:@selector(startMultiplayerGame:)];
        
         CCMenu *menu = [CCMenu menuWithItems:singlePlayerItem, multiplayerItem,nil];
        
        [menu alignItemsVerticallyWithPadding:10];
        
        
        [self addChild:menu];

}
return self;

}



- (void) startMultiplayerGame: (NSNotification *) notification {
    CCLOG(@"in MainMenu.m - startMultiplayerGame - calling Nextpeer launchDashboard");
//------------------------------- Nextpeer SDK ---------------------------------//
// STEP3 - PART 1
// Nextpeer: When the player taps the multiplayer button, launch Nextpeer's dashboard
// @note: This might pop up the initial sign-on screen.
[Nextpeer launchDashboard];
//------------------------------------------------------------------------------//
}




10. At the place where your game score get updated, add the following line with "score" as an integer (should be able to accept other value?) Oh, don't forget to add the Nextpeer import (similar to #7 above) too. Mine is shown below.


-(void)displayLevelAndScore {
    
    CCLabelTTF *label = (CCLabelTTF *)[curLayer getChildByTag:kLabelTagLevel];
    
    label.string = [NSString stringWithFormat:@"Level:%d  Score:%d",[self curLevel],[self curScore]];
    
    //------------------------------- Nextpeer SDK ---------------------------------//
// STEP2 - PART 3
//Nextpeer: This is where the score is being reported (live) to Nextpeer
[Nextpeer reportScoreForCurrentTournament:[self curScore]];
//------------------------------------------------------------------------------//

}


That's it! There are still a few other functions which I haven't tried yet. The above mentioned should be sufficient to at least get you started and have a play with it.

A few screen dumps shown below:

(1) a pop-up shows some info about other players at the top of the screen during the game

(2) Another pop-up example

(3) This is the result screen after the tournament ended

(4) I also tested the scenario where there's no network connection. This is the screen you get.

Short video as below, first I play it with "multi players", also browsed through a few options in Nextpeer dashboard, then in the end tried "single players" from the menu.



Please let me know if you have any problem or anything still unclear. If you have any other better ideas/tips, most welcomed to share your experience.

Further Questions:
After all above, are you still interested in integrating Nextpeer to your game?
I still have a few questions waiting to be answered:
1) Need further information about how to setup multiple tournaments
2) Like to see example of setting up Netxpeer with non-Cocos2D projects
3) How is the gold coins been handled? What if I run out of coins, how do I get more? Is that through in-app purchase or some other methods? How is the profit distributed between Nextpeer and the developer?

[Update 03/02/2012] Please see this post which Shai/Nextpeer kindly answered some of the questions I mentioned.

0 comments:

Post a Comment