トップページへ戻る
つくれる?iPhoneアプリ
cocos2dを使ったiPhoneアプリ制作を解説してみる

その8


どのページでも
ご自由にリンクしてください。

感想ご要望はお気軽に!
info@taskinteractive.com


■順番に解説
・導入
その1
導入


その2
HelloWorld


その3
わからない単語でも安心


その4
いじるファイルと画面構成


その5
ソースにある単語を手探る


その6
実行の順を追って手探る


その7
クラスの名前と素性を手探る


・サンプル1
その8 ボール遊び1
Scene/Layer/Sprite


その9 ボール遊び2
ファイル名を変えてみる


その10 ボール遊び3
ソースをいじってみる



■項目ごとに解説
クラスの解説
その1 クラスって何?


クラスの解説
その2 インスタンスって何?


クラスの解説
その3 オブジェクト指向って何?




企画・販売元タスクインタラクティブ


サンプルを改造してボール遊びまで行ってみる

ここからは、改めてcocos2dのテンプレートから新規プロジェクトを作成して、それをそのまま改造して、ボール遊びが出来るところまで行ってみましょう。

具体的には、ボールが画面上に表示されていて、デバイスを傾けると下に向かって転がり、指を置くとそこに近づいてくる、というアプリにしたいと思います。


サンプルを改造する場合のライセンスについて

ちょっとだけ頭の片隅においておいていただきたいのは、GPL v2 ライセンスで頒布されているプロジェクトを改造するため、場合によってはライセンスの問題が発生するかもしれないということ。
今回のサンプル改造程度では問題になることはありませんが、今後自分でゲームなどを作って広く販売しようと思っているような場合、どこが境目ということがわからずに、ライセンス違反をする一線を越えてしまわないとも限りません。

そういう点は、ちょっと頭の隅においておいてください。






新規プロジェクトの作成

まずは最初と同じように、iPhoneアプリのSDKである、Xcodeを起動して『新規プロジェクトの作成』で、cocos2dのテンプレートを選択します。



その2でも書きましたが、選択するテンプレートで何が違うかというと、最初から読み込まれているテンプレートやライブラリなどが異なります。
逆に言えば、どのテンプレートから作り始めても、必要なライブラリの読み込みなどを行えば、出来ることは一緒です。


今回はcocos2dでつくるボール遊びのアプリのため、[cocos2dBall]という名前にします。

そのままビルドしてみると、やはり同じように『HelloWorld』が表示されます。




シーン/レイヤー/ラベル・スプライト

その2からの一連の解説で、このサンプルアプリを起動すると、HelloWorldScene.h/HelloWorldScene.m に定義された『HelloWorld』というクラスの『scene』が実行されること、また、HelloWorld クラスは Layer であるということが判ったと思います。


ざっくり言うと、cocos2dを使ったアプリの画面構成はこんな感じになっています。
キャラクターを置く Layer を設置して、そこにテキストのオブジェクトである Label や、画像のオブジェクトである Sprite を設置するような感じです。

(1)Director   → まだ無視。
 →(2)Scene   → 映画のワンシーンのシーン。一場面
  →(3)Layer   → キャラクターを設置する面。階層をつけて奥行きを表現できる。
    →(4)Label → テキスト
    →(4)Sprite → 画像


テンプレートのままの例で言うと、

 →Scene = [scene]
  →Layer = [HelloWorld]
   →Label = [label]
です。
それぞれこんな感じで、HelloWorldScene.m に定義されていましたね。
Scene *scene = [Scene node];
HelloWorld *layer = [HelloWorld node];
Label* label = [Label labelWithString:@"Hello World" ..... ]


そして、見ていただきたいのはこんな記述があることです。
[scene addChild: layer];
[self addChild: label];

ここで self と書かれているのは、Layer の HelloWorld を指しています。
この記述についてはまた別で詳しく書きますが、ここでは、addChiled という表記を使い、それぞれに子要素として足しているということ、

scene ← addChiled Layer ← addChiled Label

という階層上の構造があることを覚えてください。
シーンにレイヤーを設置し、レイヤーにラベルやスプライトを設置します。



ということで、まずはBallを設置するためのレイヤーを作ってみます。