初めてcocos2d for iPhoneでアプリを作った時に役に立ったリンクまとめ

目次

• 最初に目を通したチュートリアルなど
• ARCを使うための設定
• 色々なコーディングTips
• ユニバーサル対応
• モーダルダイアログを表示する
• UIWebViewを使ってHTMLを表示する
• AdMobの広告を表示する
• 買って良かった本

最初に目を通したチュートリアルなど

Cocos2D 2.XでシンプルなiPhoneゲーム開発チュートリアル | Ray Wenderlich 

iPhoneゲーム：スペース・シューターの作成チュートリアル | Ray Wenderlich 

cocos2d for iPhone: Class Hierarchy 

ARCを使うための設定

基本的には、cocos2dのソースコードを除外して自分で作成するファイルだけをARC対応にすれば良い。

cocos2dのテンプレートから作ったプロジェクトに対してXCodeのメニューから「Convert to Objective-C ARC」を選べば、かなりの部分を自動でやってくれる。

Cocos2D 2.X プロジェクトをARCに対応させる方法 | Ray Wenderlich 

下はcocos2dの部分をスタティックライブラリにしてリンクする方法。

【cocos2d, Objective-C】Cocos2でARCを使う。ハマりましたー！ - 夏までにiPhone アプリつくってみっか！ 

色々なコーディングTips

最初は基本的な画面遷移やボタンの作成方法でとまどったけれど、調べながらなんとかやるうちに慣れてきた。

cocos2d入門編 ボタンの作り方（CCMenuItem, CCMenu） | Learn iPhone, iOS, Objective-c, cocos2d and ....?  

ハマケン100%開発: cocos2d: <初級>スコア表示をローカライズしてみよう  

cocos2d でボタンを押して画面遷移をする | EUI - iPhoneやandroidスマートフォンアプリの開発を教えるスクール  

cocos2d - Changing the image of a CCSprite - Stack Overflow  

cocos2dでスケジューラを使う - 一定時間ごとや毎フレームごとに実行する処理を書く方法 | thaty 

ユニバーサル対応

iPhoneだけでRetina、非Retinaの違いと縦長サイズへの対応があるので3種類の画面がある。iPadにも対応しようとするとさらにRetina、非Retinaの2種類があるので合計5種類の画面サイズを考慮して開発しないと行けない。

この辺はAndroidだともう無限に近いぐらいのバリエーションがあるので、むしろあきらめて単に一つの画像を拡大/縮小してやり過ごしてしまうのだけれど、iOSだと「5種類しかないなら頑張って対応しないと行けないかも」という気持ちになってしまう。

その結果、背景画像の様に画面枠にきっちり合わせたい画像については同じ画像でも5つのバージョンを作って対応するような事になってしまう。(ものすごく面倒...)

各種ボタンやダイアログの背景の様なものについては、試行錯誤した結果、

• iPhone 非Retina用
• iPhone Retina / iPad非Retina用
• iPad Retina用

の3種類のバージョンで済ませることにした。iPhoneのRetinaとiPadの非Retinaは画素数がそれほど変わらないので同じ画像を使ってもほぼ違和感がないのだ。(3種類作るのも結構面倒だけど。)

実際の画像ファイル名はそれぞれ

• aaa.png
• aaa-hd.png
• aaa-ipadhd.png

の様にしておけばプログラムからは意識しなくてもcocos2dが上手く使い分けてくれる。

あとは、オブジェクトを画面に配置する時の座標指定を画面サイズに対する相対指定で行う様にしておけば iPhone 5の縦長画面にも対応出来る。

ただ、CocosBuilderの様なツールを使えばもっと楽になる事に気付いたのは開発がほぼ終わってからだった。最初から使っておけば良かった。


その他解像度関係で参考になったリンクはこの辺り。

cocos2dアプリをiPhone5の解像度に対応させる | mooapp  

【Objective-C】iPhoneとiPadを判別判定し処理分けする方法 | 和洋風KAI 

モーダルダイアログを表示する

アプリの設定画面がそれなりにかっこいいモーダルダイアログになる様にしたかったので色々試した。結局ゲーム本体よりもこの辺にかなり時間を費やしてしまった。

モーダルダイアログを表示するのは、下のページに載っている ModalAlertクラスを参考にして出来た。

Modal Alerts for Cocos2D | The Rombos-Blog 

ただ、これだとアニメーション中などに内容がダイアログの範囲外にはみ出した時にそのまま表示されてしまって非常に具合が悪い。ダイアログの枠から出たら表示されない様にクリッピングして欲しい。

そこで下のページで見つけたClippingNodeクラスを組み合わせて使う事にした。

Simple Masked Sprite | Obj-C based 2D engine for iOS, OSX and Android  

ClippingNode/ClippingNode.m at master · njt1982/ClippingNode · GitHub 

これでなんとか無事にイメージ通りのモーダルダイアログを表示する事が出来た。

正直言ってこれぐらいのコンポーネントはcocos2d自体かcocos2d-extensionsに入っているものだろうと思っていたけれど甘かった。

UIWebViewを使ってHTMLを表示する

設定画面の次は、アプリの「使い方」的な情報を表示する画面でUIWebViewを使ってHTMLを表示する必要が出てきた。ただcocos2dの画面にUIWebViewをどうやったら組み込めるのかが全く分からなかった。

ここでかなりつまづいてしまった。

UIWebView を使ってリソースバンドル内の HTML ファイルで、外部 JavaScript や CSS を読み込む - 24/7 twenty-four seven  

Cocos2dとStoryboardを組み合わせる - なんかの Log  

cocos2dのレイヤーへUIKitを追加、削除する方法。 « なんかもう実験場  

Cocos2dでWebViewを利用する - 自堕落なぺぇじ  

CCUIViewWrapper – wrapper for manipulating UIViews using Cocos2D  

結局、上の最後のリンクに載っているCCUIViewWrapperクラスを使う事にして上手く行った。

AdMobの広告を表示する

AdMob広告を表示する方法については、下の2つのやり方を見つけた。

cocos2dでAdMobを実装する « なんかもう実験場  

ios - Admob banner integration in Cocos2d 2.0 / Admob banner in iphone games - Stack Overflow 

比べてみるとどうも見た感じ後者の方がスマートな気がしたので、こちらの方法で実装した。ここは特に問題もなくさらっと実装出来た。

買って良かった本

実は最初に挙げたチュートリアルよりも前にまずこの本を読んだ。ひとつのゲーム(15パズル)を最初から作りこんでいく過程が丁寧に説明されているので、全体の流れをつかむのに最適だと思う。

cocos2dでつくるiPhoneゲーム―自由で速い、ゲーム用フレームワークを使う! (I・O BOOKS)

　

Android 4.3でSurfaceViewを使うアプリがランダムにクラッシュする件

Google Playで公開しているあるアプリを更新しようと思ってテストしていると、なぜか数回に一度の割合でクラッシュする事に気付いた。

エラーの内容はこんな感じ。

java.lang.IllegalArgumentException
: at android.view.Surface.nativeUnlockCanvasAndPost(Native Method)
: at android.view.Surface.unlockCanvasAndPost(Surface.java:255)

そういえば最近Google Playの管理画面で報告されるエラーが増えてきていた。自分のテスト端末(初代Nexus7)で出ているエラーと同じものだ。

エラーが起きている端末は全てNexus7。おそらく Android 4.3 を搭載している端末で問題が発生している様な気がする。


エラーが起きるのは、SurfaceViewを使ったActivityから一旦別のActivityを起動して、また元のActivityに戻ってきた瞬間だ。毎回というわけではなく大体5回に1回ぐらいの頻度なのでやっかいだ。

Backキーでホーム画面に戻ってからまたアプリを起動した時やタスク一覧から戻ってきた時は全く問題は起きない。


調べてみると下のスレッドが見つかった。

Issue 58385 - android - android 4.3 - IllegalArgumentException at SurfaceHolder.unlockCanvasAndPost(canvas) - Android Open Source Project - Issue Tracker - Google Project Hosting 

やっぱりAndroid 4.3 のSurfaceView にはバグがあるようだ。

しかも現状では回避策は無さそう。。。

SurfaceView を使っているアプリ全てが影響を受けるとすると、結構大きな問題になるのではないだろうか。

SurfaceViewを使うのを止めて View の Canvas に描画する様に書き直して対策した、という書き込みはあった。しかも皮肉な事にハードウェアアクセラレーションのおかげでかえってFPSが改善されたとの事。

とりあえず View.isHardwareAccelerated() の戻り値を見て、trueならView+Canvasを使って、false (かつOSが4.3より前) なら SurfaceView を使う様にすればなんとかなるかも知れない。

でも、同じ事をするのに2種類の方法で実装しないと行けないとなると、これは面倒だなー。

4.3を搭載した端末が一般的になる前になんとか早く解決してくれないかな〜。




2013/09/29  追記:

そういえば、4.0以降なら TextureView があった。これを使おう！

if(Build.VERSION.SDK_INT >= Build.VERSION_CODES. ICE_CREAM_SANDWICH){
　　　　//TextureViewを生成
} else {
　　　　//SurfaceViewを生成
}

テストしてみた所上手く行っているみたい。
これで今回は一応解決！








　　

iOSアプリとAndroidアプリを同時に開発する方法

最近はいろんな開発環境やツールがあるけれど、とりあえず以下のような選択肢で検討している。

• Cocos2d-x
• Xamarin + Cocos2d-XNA
• Corona
• Unity
• Herlock
• Titanium Mobile
• Apache Cordova (PhoneGap)
• Monaca

ガシガシ動くゲームを作るなら

Cocos2d-x

ようやくcocos2d for iPhoneで簡単なゲームアプリを作れる様になった自分としては、次はこれでAndroid版とiOS版の同時開発かなと思っている。

cocos2d for iPhoneで得た知識も使えるし、CocosBuilderなどの周辺ツール類も豊富なのが魅力。

最初は「AndroidではNDKが必要」というのを聞いただけで尻込みしていたけれど、採用事例は結構多そうで、ネットでの情報も増えてきつつあるみたいだ。

今この本を読みながら次のアプリ開発に向けて準備しているところ。

cocos2d-xによるiPhone/Androidアプリプログラミングガイド

Xamarin + Cocos2d-XNA

意外なところでは、C#で開発するという手法もある。XamarinとCocos2d-XNAというライブラリを組み合わせれば2Dゲームアプリも作れるみたいだ。

普段仕事で使っている言語はC#なので、本当に使い物になるのならぜひ使いたい。Windowsストアアプリの開発も出来るし、有料版ならVisual Studioとの統合も可能なのでかなり興味を惹かれる。

Xamarin StudioというIDEの無料版をとりあえずインストールしてぼちぼち試しているところ。

Corona

2Dゲームに特化した「エレガントなAPIで従来より10倍速く開発出来る」というのが売り文句の開発環境。Luaというスクリプト言語を使う。デモなどを見るかぎりでは確かに簡単に2Dゲームが作れそうだ。

ただ、プロプライエタリなソフトウェアなのであまり依存したくはないかな、と思ってしまう。

Unity

とりあえずインストール しては見た。面白そうな解説本も買って積んであるのだけれど、まだじっくり触る事が出来ていない。

次のバージョン（4.3）ではなんと2Dゲームに特化した機能も追加されてますますパワーアップするらしい。

Unity - Unity PRESS RELEASE – Unity、2D向けゲーム開発機能とクラウドサービスを新たに提供 

もしかするとこれからのゲームアプリ開発の大本命になるのではないかとも思ってしまうほど高機能。

ちょっと高機能過ぎて初心者は慣れるまでが大変。それにしてもUnityのアセットストアは強力。

Herlock

今日、こんなのも見つけた。国産の新しいクロスプラットフォーム統合開発環境。JavaScriptで開発出来る。だからBackbone.jsやTweenJSなどと言った既存のJSライブラリも使える。 しかもOpenGLで高速なグラフィック処理も可能。

iOS/AndroidアプリをJavaScriptで開発、OpenGL対応で高速描画の「Herlock」、クローズドβリリース － Publickey 

『FlashライクなコードでOpenGLの処理を記述できるため、高速なグラフィック処理を実現する点も大きな特徴です。ゲームなど高速な画面書き換えなどを要求するアプリケーションに対応します。』 

Herlockの紹介動画 

これは期待大。早速クローズドベータ版の利用申請をしておいた。

ゲーム以外なら

Titanium Mobile

クロスプラットフォーム開発の老舗。

Xamarin

Xamarin Studio または Visual Studioを使ってC#で開発が可能。個人的にはかなり興味あり。

Apache Cordova (PhoneGap)

HTML5 + JavaScriptのアプリをラップしてネイティブアプリを作成するツール。

Apache CordovaとPhoneGapの関係が分かりにくい事になっているけれど、今の所は結局同じモノみたいだ。

Cordova(PhoneGap) とりあえずどんなものか | MUSHIKAGO APPS MEMO 

AdobeがApache Cordovaの私家版PhoneGapの3.0をリリース, APIをプラグイン化してより身軽に | TechCrunch Japan 

Monaca

内部的にはPhoneGapを利用しているらしい。ブラウザ上で利用出来るIDEが秀逸。Monacaデバッガというのもちょっと試してみたけれど、とても便利で感動した。

なんとなくApache Cordova(PhoneGap)を使うのであればこっちの方が生産性が高そうな気がしている。HTML5での実装に適したアプリを作る機会があったらぜひ使いたい。

今日の結論

この他にも色々な開発環境やツールがあると思うけれど、次は

Cocos2d-x
Unity

の順でやって行こうかなと思っている

余裕が出来たら、

Monaca
Xamarin

あたりにも手を伸ばしたい。

あとHerlockにはぜひとも頑張って完成度を高めて行ってもらいたい。応援してます!