ANEなAdmobを使ってみる:FlashCCでiPhoneゲームアプリ制作

Picture 3
FlashCCでiPhoneのゲームアプリを制作している件です。
ゲームの流れが出来てきたので、Admobの表示に挑戦することにしました。

「挑戦する」と敢えて書いたのは、Admob自体はXcodeで扱った事があるのですが、ANE経由で扱うのは私にとって初めてだからです。
Flash CCでは、AdmobなどのiOSネイティブなSDKをFlashで使うには、ANE(AIR Native Extension)という仕組みを使う必要があります。

と言っても、いきなりANEを作るのは敷居が高すぎるので、まずは既に誰かが作ってくれたANEを使わせてもらう事にしました。
「ANE admob」ググってみると、こちらのページ(「flash-air-admob-ane-for-ios」)にそのまんまのANEがアップされていたので、有り難く使わせていただく事にしました。

ちなみに、先に言ってしまうと、このANEはムービープレビューはもちろん、iOSシミュレーターでも表示されませんでした。
昨年作ったネイティブアプリにadmob SDKを付けた時は、iOSシミュレーターでも表示できて便利だったのですが、FlashからはiPhone実機書き出しが必要ということになりますね。つまり、iOS Devの年会費を払う必要があるということになります。

まずは、「download:」のリンクから圧縮されたファイルをダウンロードします。
このファイルを展開して、「admob_demo_fla」というフォルダにある「admob.fla」がサンプルっぽいので、そのままダブルクリックで開いて試してみます。

130804 0001
Flash CCで開かれる際に、「Adobe AIR SDKのターゲットバージョン〜がありません。」とか警告が出ますが気にせずOKします。

130804 0002
サンプルなので動くだろうという推測の基に、まずはADLでムービープレビューします。
すると、「Scene 1, レイヤー ‘Layer 1’, フレーム 1、行 1、列 28 1172: 定義 so.cuo.anes.admob が見つかりません。」とかワラワラ〜っとエラーが出ます。。。
どうやら、外部クラス(as)が読み込めてないようです。

付属のファイルを隈無く探してみると、「admob_as_api」というフォルダの中の「src」というフォルダに「so」フォルダがありました。
あとは、エラーに表示されていた通りのパスでadmob.asがあったので、このsoフォルダごとadmob.flaと同じ階層に置く事にしました。

<追記>
これらのasはANEにインクルードされているので、何もする必要はありませんでした。後述のaneファイルへのパスだけ読み込み直せば、問題なく動作します。実際にhelloWorldなaneを作ってみて気付きました。
</追記>
以前、仕事で外注さんからもらったフォルダの階層がsrcとbuildで分かれていたので、こういう風に分けるのが業界では普通っぽいんですね。

再度、ADLでムービープレビューすると「Warning: ライブラリパス「/Users/li_li_li87222/Documents/admob_fla/admob_all_in_one.ane」が有効なファイルに解決されません。」というコンパイルエラーだけが残るようになりました。
見た事の無いパスなので、多分ANEを作って下さった方のローカルパスなのでしょう。これを、自分のものになるように、ファイルを読み込み直します。

130804 0003
ファイルメニューから「Action Script3.0の詳細設定」を開き、中段の「ライブラリパス」というタブを開いて、「admob_all_in_one.ane〜」とかかれた行をクリックして選択し、その上の「-」ボタンをクリックして削除します。

130804 0004
今度は、「+」ボタンをクリックして、ファイルリクエスタから「ext_ane」というフォルダの「admob_ios.ane」を開きます。
元々、サンプルには「admob_all_in_one.ane」が使われていましたが、私は一先ずiPhoneアプリしか作らないので、こちらのaneにしておきました。この方が、いくらか容量が軽いそうです。
ちなみに、「admob_all_in_one.ane」は、「admob_demo_flex」というフォルダの中の「anes」というフォルダに入っていました。
これで、ADLでムービープレビューをすると、エラーや警告が出なくなりました。
この状態で、iPhoneへ実機書き出ししてみると、、、

Picture 1
admobが表示されました!
でも、iPhoneのstatusバーが被ってしまっていますね。実機書き出しする際にフルスクリーンにチェックを入れないと、statusバーの分を考慮してadmobの表示を指定する必要があるようです。まぁ、私が今回作っているゲームはフルスクリーンにするので、ここは追求しないで放置します。
とりあえず、フルスクリーンでちゃんと表示されるようにだけします。

130804 0005
過去に4インチ画面に対応した時と同じ要領で、AIR for iOS設定の一般タブでフルスクリーンにチェックを入れて、画像サイズが640*1136pxなDefault-568h@2x.pngという名のファイルを追加します。
これで実機書き出しすると、、、

Picture 2
ちゃんと整った形でadmobが表示されました!
ただ、これだとadmobを上に表示したレイアウトしかできなくなってしまいます。
ネイティブアプリでやった時のように、admobを画面下に表示させたいという欲が出てきます。

幸い、このANEにはadmob.getScreenSize()というスクリーンサイズを取得するメソッドと、admob.getAdSize()というadmobの大きさを取得するメソッドがありました。これを使って、admob.flaのASを以下のように変えます。

admob.addToStage(0, 0);でadmobを画面に配置しているので、ここにメソッドを使って修正します。
ちなみに、admob.createADView(AdSize.BANNER, “XXXXXXXXXXXX”);のXXXX〜の部分を自分のadmobのパブリッシャーIDに変更するのを忘れないようにしましょう。そうしないと、自分のadmonの収入になりません。

Picture 3
これで画面の下にadmobを表示できるようになりました。
admob.addToStage(0, 0);の座標を変える事で、画面の好きな場所にadmobを表示させることができます。


こちらが完成したゲームです!