前言

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

 

ch09_1
實作結果

開啟各位的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:)。

ch9_02
圖2 臉書開發者頁面

ch9_03
圖3 臉書開發者頁面

ch9_04
圖4 臉書開發者界面

ch9_05
圖5 解壓縮sdk

 

 

步驟2. 載入Android Facebook SDK

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

ch9_06
圖6 教學連結

 

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

ch9_07
圖7 Eclipse import FacebookSDK的操作

 

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

ch9_08
圖8 Eclipse 的 Package Explorer

 

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

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

ch9_09
圖9 臉書開發者頁面

ch9_10
圖10 臉書開發專案畫面

ch9_12
圖11 臉書開發專案設定頁

ch9_12
圖12 Eclipse,對應圖11之說明

 

步驟4. 編輯Eclipse,設定篇

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

ch9_13
圖13 Eclipse畫面

 

 

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

ch9_14
圖14 Eclipse

 

 

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

ch9_15
圖15 Eclipse畫面

 

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

ch9_16
圖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欄位中。

ch9_17

 

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

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

ch9_18  

 

回到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. 執行

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

 

 

 

 

 

 

 

 

 

 

文章標籤

全站熱搜

巴比特 發表在 痞客邦 留言(0) 人氣()