Introduction

Cocos2d-x is a very popular game engine and has been turning into a choice for many game developers. Cocos2d-x is a variant of a famous game engine, Cocos2d for iOS. Cocos2d-x itself has become so popular that many of its variant are also appearing. The team behind Cocos2d-x itself has created two variants of Cocos2d-x. One is Lua based and other uses Javascript.

Here in this tutorial, we will be focusing on Cocos2d-JS version. Cocos2d-JS again has two versions. One uses JS binding and can target native platforms like Android, iOS etc. and the other one is HTML5 version, which can be used to make games for the web. We are going to use HTML5 in the following tutorial.

In the following tutorial, we will be using Cocos2d-JS and Facebook along with AppWarp to create a sample application to get the list of all online players in your App.

The new version of Facebook SDK only gives the list of friends that are also using your App but it will not matter much to us as we are going to see only who all are online in our App.

Step 1: Assemble requirements

You will need to download the Cocos2d-JS SDK from here. You will also need to download the AppWarp JS SDK from AppWarp’s Download page hosted here.

Step 2: Create App in AppHQ and generate keys

Go to AppHQ once you have registered with us. Create a new App of type AppWarp. Once your app is created you will get API key and Secret Key.

Step 3: Create App in  Facebook

Since we are going to use Facebook App, we also need to create a new app in Facebook’s developer page. Click here to go to FB’s dashboard.

Under the Apps menu, click on the Add a New App Button. Choose Website as App type. Once you have created your App , you will get App ID in dashboard of your App.

Go to the settings page of your App and beneath the section of website, enter the URL of your App. Since we are testing it on localhost, we use our local IP address.

Step 4: Get started with Cocos2d-JS

Once you have downloaded Cocos2d-JS SDK as defined in step 1, extract it. The Cocos2d-JS package contains a Cocos command tool inside tools folder that we will need to create a new project. Assuming you have extracted the Cocos2d-JS zip in C:\Apps folder, you will need to run the following command.

c:\Apps\Cocos2d-JS-v3.1\tools\cocos2d-console\bin\cocos new -p com.shephertz.test -l js -d c:\test --no-native testGame

The above command will create a testGame project. Here -p describes the package name, -l is the language, which in our case is JS and -d is the output directory. We are using –no-native argument because we are only going to concentrate on web build.

Step 5: Set up your Game

Open the package.json file present in your newly created project. Under the “modules” section, you need to add two more modules – “pluginx” and “plugin-facebook”. These two plugins will add support for Facebook. Now, you need to add a new section called plugin in package.json file and define your FB’s App ID. Your package.json should look like this.

"modules" : ["cocos2d","pluginx", "plugin-facebook"],
"plugin" : {
       "facebook": {
           "appId" : "Your FB App Id",
           "xfbml" : true,
           "version" : "v2.0"
       }
},

We also need to add two more files. One is the AppWarp SDK itself and the other one is a Cocos2d-x scene file that will contain our main logic. So, now you need to copy the appwarp.min.js in src folder. Also create a new js file in src folder. Let’s call it fbList.js. Add these new files in package.json’s jsList section. Your final package.json should look like this.

{
    "project_type": "javascript",

    "debugMode" : 1,
    "showFPS" : true,
    "frameRate" : 60,
    "id" : "gameCanvas",
    "renderMode" : 0,
    "engineDir":"frameworks/cocos2d-html5",

    "modules" : ["cocos2d","pluginx", "plugin-facebook"],

	"plugin" : {
        "facebook": {
            "appId" : "Your FB App Id", 
            "xfbml" : true,
            "version" : "v2.0"
        }
    },

    "jsList" : [
		"src/appwarp.min.js",
		"src/fbList.js",
        "src/resource.js",
        "src/app.js"
    ]
}

Step 6: Login with Facebook

Our next step is to create a Login button and let users Login to your app with their Facebook account. For this we are simply going to create a new button in app.js file and request Facebook for login permission when someone hits the button.

           
    var fbLoginBtn = new cc.MenuItemImage(
    res.SignInWithFB,
    res.SignInWithFB,
    function () {
        this.fb = plugin.FacebookAgent.getInstance();
	this.fb.login(["email","user_friends"], function(code, response){
	    cc.director.runScene(new FBListScene());
	});
    }, this);

Here while logging in we ask Facebook to give use “email” and “user_freinds” permissions. “Email” is required for logging in and “user_friends” permission is required to get the user’s friend list.

Once we are successfully logged in we switch to scene “FBListScene” defined in fbList.js file.

Step 7: Connect With AppWarp

In fbList.js file we created a new cc.Layer called FBListLayer that we further used to create FBListScene. In the constructor of FBListLayer, we are initializing AppWarp with the keys got in step 2. We also need to add listeners. For this sample, we only required onConnectDone and onGetOnlineUsersDone listeners.

We will use Facebook’s user ID to connect with AppWarp. For this, first you need to get the User ID from FB SDK. Use following code to get the User ID.

this.fb = plugin.FacebookAgent.getInstance();
this.fbID = this.fb.getUserID();

Now, you can connect with AppWarp.

AppWarp.WarpClient.initialize(this.apiKey, this.secreteKey);

this.warpclient = AppWarp.WarpClient.getInstance();
this.warpclient.setResponseListener(AppWarp.Events.onConnectDone, function(result, reason){});
this.warpclient.setResponseListener(AppWarp.Events.onGetOnlineUsersDone, function(_users){});
this.warpclient.connect(this.fbID);

Step 8: Query the friend List

Once you have been connected successfully, we will get the friend list from FB SDK.

var that = this;
this.warpclient.setResponseListener(AppWarp.Events.onConnectDone, function(result, reason){
	cc.log("onConnectDone : "+result+" - Reason : "+reason);
	if(result == AppWarp.ResultCode.Success)
	{
		that.msgLabel.setString("Connected. Getting online friends ...");
		that.fb.api("/me/friends", plugin.FacebookAgent.HttpMethod.GET, function(code, response){
			that.fbFriendsList = response.data;
			that.warpclient.getOnlineUsers();
		});
	}
	else
		that.msgLabel.setString("Connection Error : "+result);
});

fb.api can be used to call the Facebook API. Since we need friend list, we will use  “me/friends” as first argument in fb.api method. The second argument tells that we will use GET method to call the API. The third argument is the callback function where we are going to save the friend list. Friend list will be presented in response.data. This will give the list of all the friends that are using our app. Now, we need to call AppWarp’s getOnlineUsers() to get the all online users.

Step 9: Create list of all online friends

The core concept of this sample is to get the list of all friends and then get the list of all online users. Then, we will compare these lists to get the data of online friends. Once we have received the friend list and also called getOnlineUsers in step 8, we now will compare the two results.

this.warpclient.setResponseListener(AppWarp.Events.onGetOnlineUsersDone, function(_users){
	var onlineUsers = "";
	for (var i = 0; i < _users.getUsernames().length; ++i) {
		var user = _users.getUsernames()[i];

		for(var j=0; j<that.fbFriendsList.length; ++j)
		{
			if(that.fbFriendsList[j].id == user)
			{
				onlineUsers = that.fbFriendsList[j].name + "\n" + onlineUsers;
			}
		}
	}
	that.msgLabel.setString("Online Friends : \n"+onlineUsers)
});

In the code put above, we simply compared the friend list and online users. The result is provided in onlineUsers variable.

Conclusion

In above sample, we showed you how to use Facebook and AppWarp together in Cocos2d-JS SDK. Also, we showed how to get the list of all online friends in our App. The full source code can be downloaded from our github repo