Cocos2d-x(JS) + SDKBOXで簡単Facebook連携

5792 ワード
cocos2d-x cocos2d-JS cocos2d-iphone cocos2d-x テキストリンク

はじめに

Cocos2d-x用にSDKBOXというライブラリが提供されています。
SDKBOXを使うことで、Cocos2d-xを使ううえで、ネイティブ連携で苦労していた
課金まわりや、広告、分析(Analytics)といった機能を簡単に構築することができるようになりました。
http://www.cocos2d-x.org/sdkbox

JSでも使える? Web版では?

今回試したかったのはJSとの連携。C++のdocumentが多いようなのですが、
"cocos2d-x that you are using, C++ or Javascript or Lua, SDKBOX will... "
とあるので、JavaScriptでも問題なく使えます。
ただし、Web版に書き出した場合には使用できません。(iOSやAndroidアプリとして書き出した場合に使用できる）

version

Cocos2d-x の2系、3系ともに使えるようですが、今回使用したのは、3.6を利用しました。

ログイン〜シェアまでの流れ

1)新しいアプリを作成する(今回はjsで作ります）

cocos new sdkbox_demo -p com.your_company.mygame -l js -d /Users/user_name/workspace
cd sdkbox_demo/

2) SDKBOXをインストールする

python -c "import urllib; s = urllib.urlopen('https://raw.githubusercontent.com/sdkbox-doc/en/master/install/install.py').read(); exec s"

3)facebook-apiをインストール

cd (自分のワークスペース)
sdkbox import facebook

4)facebookにログインした状態で、下記にアクセスする

5)add Platformで iOS を追加し、バンドルIDを入力する

(ストアIDは空欄で大丈夫そう)

(BundleIDの確認/変更はXCodeから..)

6) app.jsでsdkboxを読み込み、設定する

    sdkbox.PluginFacebook.init();
    sdkbox.PluginFacebook.setListener({
        onLogin: function(isLogin, msg) {
          if(isLogin){
            cc.log("login successful");
          }
          else {
            cc.log("login failed");
          }
        },
        onAPI: function(tag, data) {
        },
        onSharedSuccess: function(data) {
        },
        onSharedFailed: function(data) {
        },
        onSharedCancel: function() {
        },
        onPermission: function(isLogin, msg) {
          if(isLogin) {
            cc.log("request permission successful");
          }
          else {
            cc.log("request permission failed");
          }
        }
    });

7 buttonを押下した時にloginやshareが発動するようにする

var loginItem = new cc.MenuItemImage(
    res.CloseNormal_png,
    res.CloseSelected_png,
    function () {
        sdkbox.PluginFacebook.login();
...

var shareItem = new cc.MenuItemImage(
    res.CloseNormal_png,
    res.CloseSelected_png,
    function () {
        var info = new Object();
        info.type  = "link";
        info.link  = "http://www.cocos2d-x.org";
        info.title = "cocos2d-x";
        info.text  = "Best Game Engine";
        info.image = "http://cocos2d-x.org/images/logo.png";
        sdkbox.PluginFacebook.dialog(info);
...

8.info.plistにAppIDを入力する

(AppIDはFacebookのappページに記載されている）
vim /frameworks/runtime-src/proj.ios_mac/ios/Info.plist

<string>1.0</string>....

<key>FacebookAppID</key>
<string>150000000000000</string>
<key>FacebookDisplayName</key>
<string>test</string>
<key>LSApplicationQueriesSchemes</key>

...<key>LSRequiresIPhoneOS</key>
<true/>

9 .xcodeproj　をXCodeで開き、シュミレーターで実行する

/hoge/frameworks/runtime-src/proj.ios_mac/hoge.xcodeproj

10 シェアする

シュミレーターからシェアしてみると..

このようにShareされました。

最後に

IAPやADなども同じように簡単に実装できるらしいです。
これまでネイティブ連携はなかなか大変だったので、このように楽に実装できるようになると使い方広がりそうです。

参考

インストール
http://docs.sdkbox.com/en/installer/#sdkbox-installing-sdkbox-plugins-using-the-installer
Facebook使い方
http://docs.sdkbox.com/en/plugins/facebook/v3-js/