2013年10月10日

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

目次





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


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)