WonderPlanet DEVELOPER BLOG

ワンダープラネットの開発者ブログです。モバイルゲーム開発情報を発信。

cocos2d-xでアイコン型広告(アスタ)を実装してみる iOS編

今回のエンジニアブログの担当の近藤です。

無料アプリの多くは、アプリの画面内に広告が表示してあります。
無料アプリでは広告を載せることで開発者が収入を得ています。
今回は数あるアドネットワークの中からアスタというアイコン型広告サービスの
cocos2d-xでの実装方法を紹介します。

事前準備

まずはアスタのユーザー登録と広告枠タグを取得しておく。
登録についてはアスタのウェブサイトをご参照ください。
http://www.astrsk.net/

(1)cocos2d-xのプロジェクトの作成

まずはcocos2d-xプロジェクトを作りましょう。

[参考]cocos2d-xの開発環境の設定〜プロジェクト作成まで(iOS篇)

(2)SDKのダウンロード

アスタの登録が完了するとSDKをダウンロードできるので、ダウンロードしましょう。

(3)SDKのインポート

xcodeの「Linked Frameworks and Libraries」の画面よりSDKをインポートします。
「+」ボタンを押し、ダウンロードしたSDKの中から、「MrdIconSDK.framework」を選択します。
画像1
画像2

SDKインポート完了!
画像3
ここまでできたら準備OK!

(4)実装

アスタのサンプルコードを参考に、
以下のようにAppController.mの「didFinishLaunchWithOptions」メソッドの中に書いてみましょう。
その他、関連する部分のヘッダの設定や、変数の宣言もしておきましょう。

【AppController.h】

#import <UIKit/UIKit.h>  
#import <MrdIconSDK/MrdIconSDK.h>  // asterのSDKをインポート  
  
@class RootViewController;  
  
@interface AppController : NSObject <UIApplicationDelegate,MrdIconLoaderDelegate> {  
    UIWindow *window;  
    RootViewController    *viewController;  
}  
@end  

【AppController.m】

#import "AppController.h"  
#import "EAGLView.h"  
#import "cocos2d.h"  
#import "AppDelegate.h"  
#import "RootViewController.h"  
#import <MrdIconSDK/MrdIconSDK.h>  // asterのSDKをインポート  
  
//アスタの広告枠タグを設定。広告枠タグはアスタのウェブサイトで取得しましょう。  
#define kMEDIA_CODE    @"xxxxxxxx"  
#define IF_NO_ARC(x) {x}  
  
@interface AppController()  
  
@property (nonatomic, retain) MrdIconLoader* iconLoader;  
  
- (void)setUpControls;  
  
@end  
  
@implementation AppController  
@synthesize iconLoader = _iconLoader;  
  
#pragma mark -  
#pragma mark Application lifecycle  
  
// cocos2d application instance  
static AppDelegate s_sharedApplication;  
  
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {  
  
    // Override point for customization after application launch.  
  
    // Add the view controller's view to the window and display.s  
    window = [[UIWindow alloc] initWithFrame: [[UIScreen mainScreen] bounds]];  
  
    // Init the EAGLView  
    EAGLView *__glView = [EAGLView viewWithFrame: [window bounds]  
                                     pixelFormat: kEAGLColorFormatRGB565  
                                     depthFormat: GL_DEPTH24_STENCIL8_OES  
                              preserveBackbuffer: NO  
                                      sharegroup: nil  
                                   multiSampling: NO  
                                 numberOfSamples: 0];  
    [__glView setMultipleTouchEnabled:YES];  
  
    // Use RootViewController manage EAGLView  
    viewController = [[RootViewController alloc] initWithNibName:nil bundle:nil];  
    viewController.wantsFullScreenLayout = YES;  
    viewController.view = __glView;  
  
    // Set RootViewController to window  
    if ( [[UIDevice currentDevice].systemVersion floatValue] < 6.0)     {  
    // warning: addSubView doesn't work on iOS6  
        [window addSubview: viewController.view];  
    } else {  
    // use this method on ios6  
        [window setRootViewController:viewController];  
    }  
    [window makeKeyAndVisible];  
    [[UIApplication sharedApplication] setStatusBarHidden:true];  
    cocos2d::CCApplication::sharedApplication()->run();  
  
//↓アスタのサンプルコードを参考にこんな感じで実装。  
  
    MrdIconLoader* iconLoader = [[MrdIconLoader alloc]init];  
    self.iconLoader = iconLoader;  
    iconLoader.delegate = self;  
    IF_NO_ARC([iconLoader release];)  
  
    const CGFloat viewWidth = kMrdIconCell_DefaultViewSize.width;  
  
    // The array of points used as origin of icon frame  
    CGPoint origins[] = {  
        {50, 230},  
        {200, 230},  
        {350, 230},  
    };  
  
        for (int i=0; i < 3; i++)   {  
            CGRect frame;  
            frame.origin = origins[i];  
            frame.size = kMrdIconCell_DefaultViewSize;  
            MrdIconCell* iconCell = [[MrdIconCell alloc]initWithFrame:frame];  
            [iconLoader addIconCell:iconCell];  
            [viewController.view addSubview:iconCell]; //aster  
            IF_NO_ARC([iconCell release];)  
        }  
    [_iconLoader startLoadWithMediaCode:kMEDIA_CODE];//aster  
  
//↑アスタのサンプルコードを参考にこんな感じで実装。  
  
    return YES;  
}  
  
- (void)applicationWillResignActive:(UIApplication *)application {  
    /*  Sent when the application is about to move from active to inactive state.  
        This can occur for certain types of temporary interruptions  
        (such as an incoming phone call or SMS message) or  
        when the user quits the application and it begins the transition to the background state.  
        Use this method to pause ongoing tasks, disable timers, and throttle down OpenGL ES frame rates.  
        Games should use this method to pause the game.  
    */  
     cocos2d::CCDirector::sharedDirector()->pause();  
}  
  
- (void)applicationDidBecomeActive:(UIApplication *)application {  
    /*  
     Restart any tasks that were paused (or not yet started) while the application was inactive.  
     If the application was previously in the background, optionally refresh the user interface.  
     */  
    cocos2d::CCDirector::sharedDirector()->resume();  
}  
  
- (void)applicationDidEnterBackground:(UIApplication *)application {  
    /*  
     Use this method to release shared resources, save user data,  
    invalidate timers, and store enough application state information to  
    restore your application to its current state in case it is terminated later.  
     If your application supports background execution, called instead of  
    applicationWillTerminate: when the user quits.  
     */  
    cocos2d::CCApplication::sharedApplication()->applicationDidEnterBackground();  
}  
  
- (void)applicationWillEnterForeground:(UIApplication *)application {  
    /*  
     Called as part of  transition from the background to the inactive state:  
    here you can undo many of the changes made on entering the background.  
     */  
    cocos2d::CCApplication::sharedApplication()->applicationWillEnterForeground();  
}  
  
- (void)applicationWillTerminate:(UIApplication *)application {  
    /*  
     Called when the application is about to terminate.  
     See also applicationDidEnterBackground:.  
     */  
}  
  
#pragma mark -  
#pragma mark Memory management  
  
- (void)applicationDidReceiveMemoryWarning:(UIApplication *)application {  
    /*  
     Free up as much memory as possible by purging cached data objects that can be recreated (or reloaded from disk) later.  
     */  
}  
  
- (void)dealloc {  
    [window release];  
    [super dealloc];  
}  
@end  
  
//以下、広告のロード成功時、失敗時などに呼び出されるメソッドたち  
#pragma mark -  
@implementation AppController(MrdIconLoaderDelegate)  
  
- (void)loader:(MrdIconLoader*)loader didReceiveContentForCells:(NSArray *)cells  
{  
    for (id cell in cells) {  
        NSLog(@"---- The content loaded for iconCell:%p, loader:%p", cell,  loader);  
    }  
}  
  
- (void)loader:(MrdIconLoader*)loader didFailToLoadContentForCells:(NSArray*)cells  
{  
    for (id cell in cells) {  
        NSLog(@"---- The content is missing for iconCell:%p, loader:%p", cell,  loader);  
    }  
}  
  
- (BOOL)loader:(MrdIconLoader*)loader willHandleTapOnCell:(MrdIconCell*)aCell  
{  
    NSLog(@"---- loader:%p willHandleTapOnCell:%@", loader, aCell);  
    return YES;  
}  
  
- (void)loader:(MrdIconLoader*)loader willOpenURL:(NSURL*)url cell:(MrdIconCell*)aCell  
{  
    NSLog(@"---- loader:%p willOpenURL:%@ cell:%@", loader, [url absoluteString], aCell);  
}  
@end  

(5)実行

上記のコード実装をしたらxcodeで実行してみましょう。
アイコン型の広告が表示されたら完成です!
画像4

※ #define kMEDIA_CODE の定義を広告枠タグを正式なものにしていれば、
実際のアプリのアイコン広告が出ます。
今回はテスト用のIDを使用しているので、テスト用のアイコン広告が出ています。

これを実装してアプリをリリースすれば、チャリンチャリンお小遣いが稼げますね!