cocos2d-xでnendアイコン広告を表示させるサンプルゲーム (Android編)

【プロジェクト作成手順】

１．Cocos2d-xプロジェクト作成

作成するアプリ名は”TestGameNendIconAd”、パッケージは”com.MyCompany.TestApp”
フォルダは”~/cocos2d-x-2.2.2/”としています。
各自、自分の環境のパスに読み替えてください。

ターミナルを起動し、以下のコマンド実行

cd ~/cocos2d-x-2.2.2/tools/project-creator/
python create_project.py -project TestGameNendIconAd -package com.MyCompany.TestApp -language cpp

正常に各プラットフォーム全部Done!が表示されればOK
(失敗する場合は大抵パーミッション周りかpythonバージョンかpythonパス関連)

２．Nend SDKライブラリのコピー

cocos2d-x-2.2.2/projects/TestGameNendIconAd/ というフォルダができている。
その中に色々なプラットフォームのプロジェクトができているので、
proj.android 内に “libs” フォルダを作成して、
Nend SDKの環境内にある、nendSDK-2.3.2.jar をlibsフォルダにコピーする

３．Native(cpp)のビルド

Eclipse用のプロジェクトに組み込まれているので
Eclipseからできるみたいだけどよく分からないので手動で行った。

手動で./build_native.shを実行

    cd ~/cocos2d-x-2.2.2/projects/TestGameNendIconAd/proj.android
./build_native.sh

ビルドが走るのでしばらく待つ。

エラーが発生せず、

    Install        : libcocos2dcpp.so => libs/armeabi/libcocos2dcpp.so
make: Leaving directory(略

まで終わっていればNative側は正常終了している。

４． Eclipse起動、環境インポート(最初の１回のみ必要)

メニューのFile-Import選択、General-Existing Projects into Workspaceで
Select root directoryのBrowseボタンから、
~/cocos2d-x-2.2.2/projects/TestGameNendIconAd/proj.android のフォルダを指定。
自動的にTestGameNendIconAdプロジェクト環境が認識されるので、
Finishを押すと環境が読み込まれる。

５． ビルド設定

./build_native.sh を手動で実行しているので、Eclipseからはビルドしないよう、
Propatires – Builders から “CDT Builder”を外しておく。

ーーー【事前準備・組み込み手順】ここまで

以上で、サンプルのHelloworldが動く環境と、
Nendアイコンを表示できる環境が整いました。

Icon広告表示制御コード追加

使い回しができるように、広告表示専用のstatic Classを作成し、
さらに、cppファイルから制御するために、JNIを作成します。

JniHelperを使う方法は、おかひろさんの記事、zaruさんのコードを参考にさせていただきました。
Cocos2d-x上からObjective-C/Javaのコードを実行する – おかひろの雑記
zaru/Cocos2DX_AdStir · GitHub

static Classは、Activity起動時にそのActivityを登録する方法で保持し、
後々cppから呼ばれた時に、保持していたActivityオブジェクトを使って、
runOnUiThread()を使って制御する仕組みです。

com/MyCompany/NativeIF/IconAdMgr.java
・Activity登録用メソッド
ここでついでにアイコン周りの初期化もしています。
TestGameNendIconAdのonCreate()の中から、
IconAdMgr.setActivity(this);　のように呼び出します。

	public static void setActivity(Activity activity) {
mActivity = activity;
mDensity = activity.getResources().getDisplayMetrics().density;
_iconAdLayout = new RelativeLayout(mActivity);
RelativeLayout.LayoutParams rootParams = new RelativeLayout.LayoutParams(FP, FP);
rootParams.addRule(RelativeLayout.ALIGN_PARENT_TOP);
mActivity.addContentView(_iconAdLayout, rootParams);
initIconAdParameters();
}

・アイコンパラメータ初期化
IconViewの一つ一つを制御するのは非常に面倒で、
NendAdIconLayoutを使う方が格段に楽なのですが、
せっかく作りましたのでこれをサンプルコードに含んでいます。

	//initialize global icon params
private static void initIconAdParameters()
{
if(NEND_ICON_NUMS>4) {
ICNAD_SPACE = false;
ICNAD_WIDTH = 50;
ICNAD_HEIGHT = 50;
ICNAD_SHOW_TITLE = false;
}else{
ICNAD_SPACE = true;
ICNAD_WIDTH = 75;
ICNAD_HEIGHT = 75;
ICNAD_SHOW_TITLE = true;
}
//手動でIconViewを設定しておく
//(細かい配置にこだわらなければ、絶対にNendAdIconLayout使った方が楽！
// Nend SDK同梱サンプルソースやalbatrusさんのページが参考になります)
mIconViewArray = new NendAdIconView[NEND_ICON_NUMS];	//alloc array
for(int i=0; i<NEND_ICON_NUMS; i++) {
mIconViewArray[i] = new NendAdIconView(mActivity);	//initialize
mIconViewArray[i].setTitleColor(Color.WHITE);
mIconViewArray[i].setIconSpaceEnabled(ICNAD_SPACE);
mIconViewArray[i].setTitleVisible(ICNAD_SHOW_TITLE);
if(NEND_ICON_NUMS>4) {
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB){
//Honeycomb以降はsetScaleが使えるのでViewごと縮小する(それ以外は諦める)
float scaleX = (float)ICNAD_WIDTH/(float)NEND_DEFAULT_SIZE;
float scaleY = (float)ICNAD_HEIGHT/(float)NEND_DEFAULT_SIZE;
mIconViewArray[i].setScaleX(scaleX);
mIconViewArray[i].setScaleY(scaleY);
}
}
}
// get resolution
WindowManager wm = (WindowManager) mActivity.getSystemService(Context.WINDOW_SERVICE);
Display disp = wm.getDefaultDisplay();
// 手動で各アイコンのマージン計算する
mIconDispWid = ICNAD_WIDTH*mDensity;
mIconOffset = ((float)(disp.getWidth()/NEND_ICON_NUMS)- mIconDispWid)/2;
mIconMargin = (float)(disp.getWidth()/NEND_ICON_NUMS) - mIconDispWid;
}

・アイコン広告の作成・表示

	// ---------------- For Native Methods ---------------
// C2dxのNativeから呼ばれるもの
public static void createView(float yPos)
{
if(_iconAdLoader!=null)
return;
final float mYPos = yPos;
mActivity.runOnUiThread(new Runnable() {
@Override
public void run() {
DbgLogD(TAG, "createView:"+mYPos);
_iconAdLoader = new NendAdIconLoader(mActivity, ICON_SPOT_ID, ICON_API_KEY);
//一個一個追加していく
for(int i=0; i<NEND_ICON_NUMS; i++) {
//位置調整は手動
NendAdIconView iconView = mIconViewArray[i]; //temp obj pointer
RelativeLayout.LayoutParams iconParam = new RelativeLayout.LayoutParams(WC, WC);
iconParam.setMargins((int)mIconOffset+(int)(mIconMargin+mIconDispWid)*i, (int)mYPos, 0, 0);
iconView.setLayoutParams(iconParam);
_iconAdLayout.addView(iconView);
_iconAdLoader.addIconView(iconView);
}
_iconAdLoader.loadAd();
}
});
}

・アイコン位置変更

    public static void locateView(float yPos)
{
if(_iconAdLoader==null)
return;
final float mYPos = yPos;
mActivity.runOnUiThread(new Runnable() {
@Override
public void run() {
DbgLogD(TAG, "locateView:"+mYPos);
//一個一個変更
for(int i=0; i<NEND_ICON_NUMS; i++) {
NendAdIconView iconView = mIconViewArray[i]; //temp obj pointer
RelativeLayout.LayoutParams iconParam = new RelativeLayout.LayoutParams(WC, WC);
iconParam.setMargins((int)mIconOffset+(int)(mIconMargin+mIconDispWid)*i, (int)mYPos, 0, 0);
iconView.setLayoutParams(iconParam);
}
}
});
}

・アイコン広告の表示・解放
VisibleをGONEでも良いかもしれないがなんとなく・・・

    public static void releaseView()
{
if(_iconAdLoader==null)
return;
mActivity.runOnUiThread(new Runnable() {
@Override
public void run() {
DbgLogD(TAG, "releaseView");
//IconView解放
_iconAdLayout.removeAllViews();
_iconAdLoader.pause();
_iconAdLoader = null;
}
});
}

C++コードから呼び出すためのJNIとC++ラッパー追加

cppファイルの中身は同じような物が長くなりそうなので割愛します・・・
下側のgithub内に全く同じコードがありますので、
興味がある方はご覧ください。

IconAdNative.h
ここで定義されているメソッドを他のコードから呼び出す。

namespace Cocos2dExt {
class IconAdNative
{
public:
static void createView(float yPos);
static void locateView(float yPos);
static void releaseView();
static void pauseView();
static void resumeView();
static void refreshView();
};
}

IconAdNative.cpp
完全にただのラッパー

namespace Cocos2dExt
{
void IconAdNative::createView(float yPos)
{
IconAdNative_createViewJNI(yPos);
}
void IconAdNative::locateView(float yPos)
{
IconAdNative_locateViewJNI(yPos);
}
void IconAdNative::releaseView()
{
IconAdNative_releaseViewJNI();
}
void IconAdNative::pauseView()
{
IconAdNative_pauseViewJNI();
}
void IconAdNative::resumeView()
{
IconAdNative_resumeViewJNI();
}
void IconAdNative::refreshView()
{
IconAdNative_refreshViewJNI();
}
}

IconAdNativeJni.h

extern "C"
{
extern void IconAdNative_createViewJNI(float yPos);
extern void IconAdNative_locateViewJNI(float yPos);
extern void IconAdNative_releaseViewJNI();
extern void IconAdNative_pauseViewJNI();
extern void IconAdNative_resumeViewJNI();
extern void IconAdNative_refreshViewJNI();
}

IconAdNativeJni.cpp
createのところだけ

	void IconAdNative_createViewJNI(float yPos)
{
JniMethodInfo methodInfo;
if (!getStaticMethodInfo(methodInfo, ADMANAGER_CLASS, "createView", "(F)V"))
{
return;
}
methodInfo.env->CallStaticVoidMethod(methodInfo.classID, methodInfo.methodID, (jfloat)yPos);
methodInfo.env->DeleteLocalRef(methodInfo.classID);
}

これで、”IconAdNative.h”をcppからincludeして、
Cocos2dExt::IconAdNative::createView(100);
と実行すると、上から100pixelの所からアイコン広告が表示される。
みたいなのが実現できます。

【アレンジ】
・消去前にアイコン位置を画面外に
なんかのバグで万が一アイコンが消えなかった事を考えて、
アイコン位置を画面外にずらしてから消去処理をすると、
万が一の時のユーザークレームを防げるかも

・表示前にアイコン位置を画面外に
広告表示まで、ロード時間がどうしてもかかるため、
表示するタイミングより早い段階で
アイコン位置を画面外にして「先読み」をしておく。
そして、実際の表示したいタイミングではアイコン位置をずらすだけ。
すると、ロード時間無く表示されているように見える。

サンプルコード

よくある使い方として、上記のコードを使った、
サンプルのゲームを作りました。
１〜５の何が出るか当てるだけの数当てゲームです。
超能力の調査みたいな感じで。

下のgithubからどうぞ。

MaxiGundan/TestGameNendIconAd · GitHub

ページ右メニューの”Download ZIP”から、一式ZIPでダウンロードできます。

組み込み手順、ビルド手順は、README.md(テキストファイル)に書いてありますので、
一つ一つ、実行してみて下さい！

以下のようなゲームができていればOK!（下はiOSのもの）

以上、つらつら書きましたが、我流ですので、
こうした方がいいよ！これダメだよ！っていうのがあれば、
教えて頂けると大変うれしいですm(_ _)m

ではでは。

ブログだけ見て帰るん？（´・ω・`）
↓いつでもフォローしてくれていいねんで？
twitter: @maxigundan
facebook: マキシぐんだん | Facebook