北投玩家與大安巫醫 (Beitou Walker)

前言

一款遊戲除了遊戲內容，"社群"也是可以加進遊戲重要元素之一。現在大多登入都會綁上臉書或是g+，而這篇簡單介紹使用臉書登入與cocos2dx作一個結合的實作。網路上有人介紹EzSocial^[1]，而我在對EzSocial銜接時，及使是他本身的sample也無法執行。最後還是回到一開始，直接facebook sdk 3.0 結合Android JNI搭起對底層遊戲的橋梁。製作過程容易失敗且過程中會有很多煩雜的事情，至成功登入其實需要有一點耐心。實作上的遇到的問題也會一一列在本文。

實作結果

開啟各位的HelloCpp吧，我們要開始實做了喔！

開發環境

作業系統：windows 7

開發工具：Visual C++ Express，Eclipse 4.2.1

cocos2dx版本：2.2.0

facebook sdk版本：3.0

步驟1. 取得與安裝facebook sdk

稍微google一下"facebook developer"，就可以看到Facebook Developers的連結。點選文件(圖2)>Android Developers(圖3)>Download the SDK(圖4)進行sdk的下載。完成下載之後，sdk是一個.zip的解壓縮，解壓縮至你習慣的位置就可以了(圖5，本範例放至D:)。

圖2 臉書開發者頁面

圖3 臉書開發者頁面

圖4 臉書開發者界面

圖5 解壓縮sdk

步驟2. 載入Android Facebook SDK

這步驟基本上可以參考臉書的教學(圖6)，如果沒有英文障礙的話裡面應該講的都很清楚。這部分就不詳細說明，簡單的帶過步驟。我們跳過執行sample，若想體驗一下sample的朋友可以至官網文件參考。

圖6 教學連結

開啟Eclipse，開一個新workspace，完成之後點選File>Import進行Facebook SDK的載入(圖7)。

圖7 Eclipse import FacebookSDK的操作

在載入自己遊戲專案之前，請記得也要先import cocos2dx的java喔，全部import進來後，Eclipse左側Package Explorer會有三個package分別是FacebookSDK、libcocos2dx以及自己的由細專案(圖8)。

圖8 Eclipse 的 Package Explorer

步驟3. Facebook端，建立一個App

在上方藍色工具列中點選應用程式，會下拉一個選項叫"製作新應用程式"。繼續點選後會出現Create a New App的視窗，填寫專案內容後按下建立應用程式(圖9)，等待一下就會進入專案畫面(圖10)。應用程式編號後面會在Eclipse用到，左邊標籤點選"設定"會進入設定頁(圖11)。包裝名稱與班級名稱要回到Eclipse中去查詢(圖12)。

圖9 臉書開發者頁面

圖10 臉書開發專案畫面

圖11 臉書開發專案設定頁

圖12 Eclipse,對應圖11之說明

步驟4. 編輯Eclipse，設定篇

回到Eclipse，進入我們遊戲的專案。首先開啟res>values>string.xml 這個檔案(圖13)，點選Add..按鈕，開啟視窗後點選(S)String，再點選OK關閉視窗。此時會產生新的項目，點一下新的項目，右邊會顯示內容。Name請填寫 app_id (一字不差，請勿亂動)。Value請填入臉書的應用程式編號(請參考圖10綠色框框)。

圖13 Eclipse畫面

開啟AndroidManifest.xml檔案，點選Permissions標籤(圖14)，按下Add..按鈕，開新視窗後點選(U)Uses Permission後點OK關閉視窗。左邊點選新出來的項目，右邊內容選擇android.permission.INTERNET。

圖14 Eclipse

點選Application標籤(圖15)，下方Application Nodes區塊新增一些內容，按下Add..按鈕，開啟新視窗後點選(M)Meta Data後點OK關閉視窗。左邊出現新選項點選一下，右方會出現內容。Name：com.facebook.sdk.ApplicationId，Value：@string/app_id。

圖15 Eclipse畫面

接下來還要新增一個類別的Node(圖16)，同一區塊點選Add..按鈕，彈跳視窗點選(C)Activity後按OK關閉。左方新項目點一下，右方內容...Name：com.facebook.LoginActivity，Theme：@android:style/Theme.Translucent.NoTitleBar。

圖16 Eclipse畫面

步驟5. 編輯Eclipse，程式篇(1)，取得編碼KeyHash

開啟主程式部分，修改HelloCpp.java，最上方一定要include facebook sdk的內容(碼1)。

import com.facebook.*;
import com.facebook.model.*;

碼1 include facebook sdk

編輯onCreate(..)，增加顯示64位元的編碼Key的程式(碼2)

	protected void onCreate(Bundle savedInstanceState){
		super.onCreate(savedInstanceState);
		mInstance = HelloCpp.this;
	
	    // Add code to print out the key hash
	    try {
	        PackageInfo info = getPackageManager().getPackageInfo(
	                "idv.shutgun.bombcrash", 
	                PackageManager.GET_SIGNATURES);
	        for (Signature signature : info.signatures) {
	            MessageDigest md = MessageDigest.getInstance("SHA");
	            md.update(signature.toByteArray());
	            Log.d(TAG,"KeyHash: "+Base64.encodeToString(md.digest(), Base64.DEFAULT));
	            }
	    } catch (NameNotFoundException e) {

	    } catch (NoSuchAlgorithmException e) {

	    }		
	}

碼2 onCreate(..)

執行一下遊戲，看一下LogCat(圖17)，複製取得KeyHash。回到臉書的專案設定頁(圖11，綠框)，將KeyHash貼到Key Hashs欄位中。

步驟6. 編輯Eclipse，程式篇(2)，設定Android端JNI通道

我採用的方式是開啟遊戲後，讓遊戲端(cocos2dx層)透過JNI去呼叫Android中類別HelloCpp的loginFB()方法。

回到Eclipse中(碼3)，我在HelloCpp類別新增兩個方法分別為loginFB與initFB兩個方法，loginFB是static方法，連結JNI比較簡單，透過該方法去呼叫initFB()。初始與進行login的功能就寫在initFB()中。

    public static void loginFB(){
    	Log.d(TAG,"login FB");
    	mInstance.initFB();
    }
    
    public void initFB(){
        // start Facebook Login
        Session.openActiveSession(this, true, new Session.StatusCallback() {

          // callback when session changes state
          @Override
          public void call(Session session, SessionState state, Exception exception) {
            if (session.isOpened()) {
            	Log.i(TAG,"Session is open");
                // make request to the /me API
                Request.executeMeRequestAsync(session, new Request.GraphUserCallback() {

                // callback after Graph API response with user object
                @Override
                public void onCompleted(GraphUser user, Response response) {
                	Log.e(TAG,"OH! onCompleted!!");
                    if (user != null) {
                    	Log.e(TAG,"OH! user is null");
                    	//TextView welcome = (TextView) findViewById(R.id.welcome);
                    	//welcome.setText("Hello " + user.getName() + "!");
                    	Log.i(TAG,"Hello, "+user.getId());
                    	Toast.makeText(HelloCpp.this, "Hello, "+user.getName(), Toast.LENGTH_SHORT).show();
                    }
                }
              });
            }
          }
        });    	
    }

碼3 Eclise,HelloCpp類別中的loginFB()與initFB()

步驟7. 編輯C++端，新增JNI窗口

啟動VC，開啟遊戲專案。我們在HelloWorldScene.h新增jni的include。

#include <jni.h>

開啟HelloWorldScene.cpp，新增一個function叫loginFB()

void HelloWorld::loginFB()
{
	JniMethodInfo minfo;
	bool isHave = false;

	isHave = JniHelper::getStaticMethodInfo(minfo,"idv/shutgun/bombcrash/HelloCpp","loginFB","()V");
		
	if(isHave)
	{
		CCLog("showNativeIAP is Live");
		
		minfo.env->CallStaticObjectMethod(minfo.classID,minfo.methodID);
	}
	else
		CCLog("Call Function fail!!");	
}

碼4 VC,JNI連結Android端設計

第6列， getStaticMethodInfo(..)就是用來取得HelloCpp.loginFB()的門票。回傳的值只要為true，接下來就使用CallStaticObjectMethod(..)去執行HelloCpp.loginFB()。

步驟8. 執行

程式寫到這邊就要開始執行啦，第一次啟動時手機一定會彈跳出應用程式權限的同意視窗。按一下同意就可以成功登入嚕！