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

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

１．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パス関連)

２．iOSのプロジェクトを実行、XCode起動

Finderから、ホーム以下
cocos2d-x-2.2.2/projects/TestGameNendIconAd/ というフォルダができている。
その中に色々なプラットフォームのプロジェクトができているので、
proj.iosフォルダ内から、TestGameNendIconAd.xcodeprojを実行

３．プロジェクトにNend SDKライブラリ追加

Finderから、
~/NendSDK_iOS-2.3.2/Nend/NendAd/
をフォルダごとドラッグ＆ドロップ

４．必要なframework追加

Target-Build Phases-Link Binary With Librariesから、
Security.framework
AdSupport.framework
の２つを追加。
この辺りは、Cocos2d-xとNend SDKのバージョンによって変わりうる。

ビルド時にリンクエラーが出たら大抵この辺の設定か、
cocos2d-xの元々のリンクエラー。
TARGETをios7にしている→とりあえずビルド通すためにios6以前で。。。
(libstdc++.6.0.9.dylibを追加したりで解消できた記憶がありますが、
ちょっと改善手順覚えてません申し訳ないです。。。)
lcurlとかlwebsocketsでリンクエラーが出る場合は、
たぶんもともとcocos2d-xのパスが違っているので、一旦消して
cocos2d-xのソース内からXcodeにドラッグ&ドロップで。

cocos2d-x-2.2.2/cocos2dx/platform/third_party/ios/libraries/libcurl.a
cocos2d-x-2.2.2/external/libwebsockets/ios/lib/libwebsockets.a
とか

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

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

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

IconAdManager.h

 #define ICNAD_NUMS     (4)         //アイコン個数
#define ICNAD_SPACE    (TRUE)      //アイコン余白あり
#define ICNAD_WIDTH    (75)        //アイコン幅
#define ICNAD_HEIGHT   (75)        //アイコン高さ
#define ICNAD_SHOW_TITLE (TRUE)    //タイトル表示
@interface IconAdManager : NSObject {
NADIconLoader* nadIconLoader;
NSMutableArray* nadIconViewArray;
}
@end

IconAdManager.mm

・初期化部分

@implementation IconAdManager
- (id)init {
[super init];
nadIconLoader = nil;
nadIconViewArray = nil;
return self;
}

・アイコン作成／表示

-(void)createView:(UIView*)rootView yPos:(float)yPos
{
if (nadIconLoader!=nil) {
return;
}
nadIconLoader = [[NADIconLoader alloc] init];
nadIconViewArray = [[NSMutableArray alloc] init];
#ifdef DEBUG_PRINT
nadIconLoader.isOutputLog = YES;
#endif
//ウィンドウ幅取得
CGRect screenRect = [[UIScreen mainScreen] bounds];
const CGFloat windowWidth = screenRect.size.width;
const CGFloat iconWid = ICNAD_WIDTH;
const CGFloat iconHei = ICNAD_HEIGHT;
//表示させる幅をウィンドウ幅全般に均等割り当てするための、マージン＆オフセット計算
//図 → [(a)■(b)■(b)■(b)■ ] ■:アイコン (a):offset (b):margin []:ウィンドウサイズ全域とする
//(任意幅・任意の場所に表示したい時はこのあたりの数値を引数にして上位からセットする等)
const CGFloat offset = ((windowWidth/ICNAD_NUMS)-iconWid)/2;
const CGFloat margin = (windowWidth/ICNAD_NUMS) - iconWid;
//アイコンの表示位置を、一つずつセット
for (int i=0; i < ICNAD_NUMS; i++)
{
CGRect iconFrame;
iconFrame.origin = CGPointMake(offset+(iconWid+margin)*i, yPos);
iconFrame.size = CGSizeMake(iconWid, iconHei);
NADIconView* iconView = [[NADIconView alloc]initWithFrame:iconFrame];
if (!(ICNAD_SHOW_TITLE)) {
iconView.textHidden = YES;
}else{
iconView.textHidden = NO;
}
if (ICNAD_SPACE) {
iconView.iconSpaceEnabled = YES;
}else{
iconView.iconSpaceEnabled = NO;
}
iconView.tag = i;
[iconView setTextColor:[UIColor whiteColor]];   //文字色設定
[nadIconLoader addIconView:iconView];
[nadIconViewArray addObject:iconView];
[rootView addSubview:iconView];
[iconView release];
}
//loaderへの設定
[nadIconLoader setNendID:kNEND_ID spotID:kSPOT_ID];
[nadIconLoader setDelegate:self];
//開始
[nadIconLoader load];
}

・アイコン位置変更

-(void)locateView:(float)yPos
{
if (nadIconViewArray==nil) {
return;
}
int itemsize = [nadIconViewArray count];
//アイコンの表示位置を、一つずつ再設定
for (int i=0; i < itemsize; i++)
{
//保存されているNADIconView取り出し
NADIconView* iconView = (NADIconView*)[nadIconViewArray objectAtIndex:i];
CGRect iconFrame;
iconFrame.origin = CGPointMake(iconView.frame.origin.x, yPos);
iconFrame.size = iconView.frame.size;
[iconView setFrame:iconFrame];
}
}

・アイコン消去／解放
(Visibilityを変えるだけで良いかもしれないが一応・・・)

-(void)releaseView
{
if (nadIconLoader==nil) {
return;
}
int itemsize = [nadIconViewArray count];
//ここでアイコン一個ずつ明示削除しておく
//(SDK任せで一気にやっても良いけど広告受信とかレジューム処理とかタッチ処理とかGCとか絡むと
//排他タイミングシビアなので各社不具合出やすいように思えるので念のため←憶測)
for (int i=0; i < itemsize; i++) {
NADIconView* iconCell = (NADIconView*)[nadIconViewArray objectAtIndex:i];
[nadIconLoader removeIconView:iconCell];
[iconCell removeFromSuperview];
}
[nadIconLoader setDelegate:nil];
nadIconLoader = nil;
if (itemsize>0) {
[nadIconViewArray removeAllObjects];
}
nadIconViewArray = nil;
}

上で作った関数を、cコードでWrapする

// ------ C codes -------
static IconAdManager *iconAdMgr = nil;  //Singleton
void IconAdCreateView(float yPos)
{
if (iconAdMgr!=nil) {
return;
}
UIView *rootView = [UIApplication sharedApplication].keyWindow.rootViewController.view;
iconAdMgr = [[IconAdManager alloc] init];
[iconAdMgr createView:rootView yPos:yPos];
}
void IconAdLocateView(float yPos)
{
if (iconAdMgr!=nil) {
[iconAdMgr locateView:yPos];
}
}
void IconAdReleaseView(void)
{
if (iconAdMgr==nil) {
return;
}
[iconAdMgr releaseView];
iconAdMgr = nil;
}

外部公開関数定義

IconAdManagerC.h

//アイコン広告作成・表示
// yPos   :表示位置y座標(UIView座標系 注：Cocos2dとy軸が上下逆)
void IconAdCreateView(float yPos);
//アイコン広告位置変更
// yPos   :表示位置y座標(UIView座標系 注：Cocos2dとy軸が上下逆)
void IconAdLocateView(float yPos);
//アイコン広告解放
void IconAdReleaseView(void);

これで、”IconAdManagerC.h”をincludeして、C関数呼び出しする事で、
cocos2d-xのcppコードからある程度制御できるようになります。

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

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

サンプルコード

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

下のgithubからどうぞ。

MaxiGundan/TestGameNendIconAd · GitHub

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

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

以下のようなゲームができていればOK!

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

ではでは。

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