Cocos2d-JS で広告を表示する (iOS編) その１で単純な表示の方法を紹介したので、今回は位置の調整、表示／非表示を行う手順をまとめます。
Cocos2d-JS が生成するプロジェクトファイルは Interface Builer / Storyboard を使用していないので、ここでも使用しませず、ソースコードのみで実現します。
使用した環境
OS: Mac OS X 10.10.3
Xcode: 6.3.2
Cocos2d-JS: v3.6.1
Google Mobile Ads SDK iOS: 7.3.1
位置の調整
固定の位置で良い場合は、GADBannerView の frame プロパティ を設定すれば反映されます。以下は、画面の下部中央に配置する場合の例です。
<./ios/AppController.mm>
{
GADBannerView *gadView = [[GADBannerView alloc] initWithAdSize:kGADAdSizeBanner];
gadView.adUnitID = @"ca-app-pub-3940256099942544/2934735716"; // Official Test ID
gadView.rootViewController = viewController;
[gadView loadRequest:[GADRequest request]];
[viewController.view addSubview:gadView];
// gadView を画面下部の中心に配置
CGRect contentFrame = viewController.view.bounds;
CGRect bannerFrame = gadView.frame;
bannerFrame.origin.y = contentFrame.size.height - bannerFrame.size.height;
bannerFrame.origin.x = contentFrame.size.width / 2 - bannerFrame.size.width / 2;
gadView.frame = bannerFrame;
}
ただし画面回転に対応したり、親ビューがレイアウトを変更したりする場合、ビューコントローラーの viewDidLayoutSubviews メソッドをオーバーライドするなどの対処が必要ですが、ここでは省略します。
うまく動作すれば、広告が画面の下部中央に表示されます。
実行結果
表示／非表示
やっと Cocos2d-JS 特有の話になります。
ゲームなどで、タイトル画面では広告を表示し、ゲーム中は広告を非表示にしたりしたいことがあると思います。そのために、まずは JavaScript から C++ の関数を呼ぶ必要があります。Cocos2d-JS では JavaScript 側に jsb.reflection.callStaticMethod という関数が用意されています。名前の通り、スタティックメソッドしか呼びだせません。
C++側
まずC++側で、任意のクラスのスタティックメソッドを用意します。
そのためのクラスを作っても良いですが、ここでは変更を少なく抑えるため既存のクラス AppController に isAdVisible と setAdVisible というスタティックメソッドを追加します。
C++側では、戻り値、引数として BOOL, 数値 (NSNumber), 文字列 (NSString) が使用できます。ただし現在の Cocos2d-JS の実装の制限として、BOOL の引数を受ける場合、NSNumber* で受けて boolValue に変換しないとうまく動作しないので注意してください。（将来改善されるかもしれません）
<./ios/AppController.h>
@interface AppController : NSObject <UIAccelerometerDelegate, UIAlertViewDelegate, UITextFieldDelegate,UIApplicationDelegate>
{
UIWindow *window;
RootViewController *viewController;
}
// 追加
+ (void) setAdVisible:(NSNumber*) isVisible;
+ (BOOL) isAdVisible;
@end
<./ios/AppController.mm>
// gadView をローカル変数ではなくスタティック変数にする
static GADBannerView* gadView = nullptr;
@implementation AppController
:
(中略)
:
+ (void) setAdVisible:(NSNumber*) isVisible {
gadView.hidden = ([isVisible boolValue] == false);
}
+ (BOOL) isAdVisible {
return gadView.hidden == false;
}
@end
JavaScript側
Cocos2d-JSのサンプルのメニューボタンを押したときに、先ほど作成したC++ のメソッドを呼び出し、表示／非表示をトグルできるようにします。
<./src/app.js>
var HelloWorldLayer = cc.Layer.extend({
sprite:null,
ctor:function () {
//////////////////////////////
// 1. super init first
this._super();
/////////////////////////////
// 2. add a menu item with "X" image, which is clicked to quit the program
// you may modify it.
// ask the window size
var size = cc.winSize;
// add a "close" icon to exit the progress. it's an autorelease object
var closeItem = new cc.MenuItemImage(
res.CloseNormal_png,
res.CloseSelected_png,
function () {
cc.log("Menu is clicked!");
// 現在の表示状態を取得
var isVisible = jsb.reflection.callStaticMethod(
"AppController",
"isAdVisible"
);
// 表示／非表示を設定
jsb.reflection.callStaticMethod(
"AppController",
"setAdVisible:",
isVisible == false
);
}, this);
closeItem.attr({
x: size.width - 20,
y: 20,
anchorX: 0.5,
anchorY: 0.5
});
var menu = new cc.Menu(closeItem);
menu.x = 0;
menu.y = 0;
this.addChild(menu, 1);
うまくいけば右下のメニューボタンを押すたびに広告の非常／非表示が切り替わります！
参考
HOW TO CALL OBJECTIVE-C FUNCTIONS USING JS ON IOS/MAC
http://cocos2d-x.org/docs/manual/framework/html5/v3/reflection-oc/en
