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

その2


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

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


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


その2
HelloWorld


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


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


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


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


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


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


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


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



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


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


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




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


macのMacOS10.5以降で開発環境を

iPhoneアプリを開発するには、macのMacOS10.5以降に同梱されているXcodeの開発環境を用意する必要があります。
windows機ではできません。



cocos2dインストール

ここでは、Cocos2dのテンプレートをインストールして、そのテンプレートから新規プロジェクトを始めるところから書きたいと思います。

そして、難しいことは後回し、目で見てわかるところから少しずつなじめるように書いていきたいと思います。



ここからcocos2dのテンプレートをダウンロードしましょう。


cocos2d-iphone Project Home
cocos2d-iphone Downloads ダウンロードページ



ここで使っているのは、0.8.1です。
ダウンロードするのは、一番新しいうちの、 beta がついていないものです。
beta とついているものは、まだ開発途中の、安定していないかもしれない先行公開版なので、通常は正式公開されている、 beta のついていないものを選びます。


インストールは展開した圧縮ファイルにあるinstall_template.sh を実行するだけです。

インストールについて

例えば、『cocos2d-iphone-0.8.1.tar.gz』をダウンロードすると、デフォルトではそのユーザーの[Downloads]ディレクトリに保存されます。
applicationから『ターミナル(bash)』を起動して、次のようにします。
$ cd ~/Downloads
$ tar xzvf cocos2d-iphone-0.8.1.tar.gz
$ cd cocos2d-iphone-0.8.1
$ ./install_template.sh

これで、次回Xcodeを起動したときからテンプレートが使えるようになります。


Xcodeを起動すると、テンプレートの選択画面にcocos2dのテンプレートがあることがわかると思います。




これを選択して、今回はcocos2dTestという名前で新規プロジェクトを作りましょう。



ちなみに、選択するテンプレートで何が違うかというと、最初から読み込まれているテンプレートやライブラリなどが異なるだけで、作れるものは同じです。

逆に言えば、どのテンプレートから作り始めても、必要なライブラリの読み込みなどを行えば、出来ることは一緒です。

適切なテンプレートを選ぶと、後々作業が楽、ぐらいに思っておきましょう。




展開したプロジェクトのファイルを見る

まず、展開したプロジェクトの『グループとファイル』をざっとみてみます。

すごい数のファイルがありますが、いじるのはこのうちほんのいくつかのファイルです。


例えば「cocos2d Sources」というグループはcocos2dのクラスファイルが収められているので、基本的にはいじりません。

(修正を加える場合、ライセンスの関係を事前に確認しましょう。)



ビルドしてみる

とりあえず、ビルドして進行 をクリックしてみましょう。




Hello World という文字と、左下に数字が表示されました。
何も作っていないのになぜこんな実行結果が得られるかというと、簡単なサンプルがテンプレートに同梱されていて、何も変更せずにビルドするととりあえずそのサンプルコードが実行されるようになっているからです。
まずは、このサンプルコードを手がかりにcocoa+cocos2dの世界に入って行きたいと思います。

この Hello World という文字を、ゲームキャラクター画像にしてみたり、動かしてみたりして、ゲームを作りたい訳です。

なので、まずはこの Hello World という文字の正体を突き止めましょう。



ソースを見て『HelloWorld』を変更するところまで一気にいってみる

最初に実行されるのは main.m ですが、これはいじる必要はありません。

今のところこれは単に、cocos2dTestDelegate.m を呼び出している、程度に思っておいて大丈夫です。



cocos2dTestDelegate.m のソース抜粋。



cocoTestAppDelegate.m

- (void) applicationDidFinishLaunching:(UIApplication*)application

{

[[Director sharedDirector] setDeviceOrientation:CCDeviceOrientationLandscapeLeft];

[[Director sharedDirector] setAnimationInterval:1.0/60];

[[Director sharedDirector] setDisplayFPS:YES];

[[Director sharedDirector] runWithScene: [HelloWorld scene]];

}





そのソースの、この行を見てください。

- (void) applicationDidFinishLaunching:(UIApplication*)application

{

}

この{} に囲まれた部分が、起動時に実行される命令です。

詳しいことはここでは省きますが、applicationDidFinishLaunching アプリケーションの起動が完了したら実行する、という意味です。



その中には、cocos2dというフレームワークを使用するために必要なことや設定がいろいろ書かれていますが、いまはそれは読み飛ばして、

[[Director sharedDirector] runWithScene: [HelloWorld scene]];

という行を見てください。


意味はさっぱりわからなくて大丈夫です。

大事なのは、Director というのを頭の片隅においた上で、runWithScene: [HelloWorld scene] というメッセージが何かを実行させてる、ということです。


じゃあその HelloWorld なんていうものがどこにあるかとみてみると、ファイル一覧のClassesの中に、HelloWorld.h HelloWorld.m というのがあるのがわかります。

これは、cocos2dのサンプルプログラムのようなもので、実行時に表示していたHelloWorldの文字はこの中にいます。



まず、HelloWorldScene.h をみると、こんな感じになっています。



// When you import this file, you import all the cocos2d classes

#import "cocos2d.h"

// HelloWorld Layer

@interface HelloWorld : Layer

{

}

// returns a Scene that contains the HelloWorld as the only child

+(id) scene;

@end



大事なのは、

#import "cocos2d.h"

cocos2d の機能が使えるように必要なファイルを読み込んでいること。


@interface HelloWorld : Layer

{

}

で、HelloWorld というクラスを定義しているということ。

次に、


+(id) scene;


で、受け取るメッセージを定義しているということ。

このクラスではこのメッセージを受け取ることができますよ、ということです。

クラスの中で定義される関数みたいなもんだと思えば、今のところは大丈夫です。



この HelloWorld と scene は、前に出てきた「runWithScene: [HelloWorld scene] 」の中の[HelloWorld scene] この部分です。

HelloWorldというオブジェクトに、sceneというメッセージが送られてきています。

PHPとかのクラスと関数でいうと、HelloWorld->scene(); こんな感じです。


なんで表記の仕方が全然違うかというと、一つの理由としては、CとObjective-Cが同居しているソースの中で、[ ] の中はCではなく、Objective-Cだぞ、ということです。

でももっと大きな理由というか、感じとしては、Objective-Cの文化や感性が、Cの文化や感性と違うぞ、ということを頭のすみに置いておいた方が、後々しっくりくるかもしれません。




次に見るのは HelloWorldScene.m のほうです。

ここで気になるのは、なんで .h と .m があるかということですが、とりあえずは、ヘッダーファイルと実際の命令が書かれたファイル、ぐらいに思っておきましょう。

ヘッダーファイルには、オブジェクトの定義や他のオブジェクトに情報を渡したりするための重要な設定などが記載されますが、それは後々。

いまはとにかく、画面に表示されたHelloWorldの正体を突き止めましょう。








HellowWorldScene.m のソース。コメントの位置など変えて、コンパクトに記載しています。


// Import the interfaces

#import "HelloWorldScene.h"


// HelloWorld implementation

@implementation HelloWorld


+(id) scene

{

Scene *scene = [Scene node]; // 'scene' is an autorelease object.

HelloWorld *layer = [HelloWorld node]; // 'layer' is an autorelease object.

[scene addChild: layer]; // add layer as a child to scene

return scene; // return the scene

}



-(id) init

{

if( (self=[super init] )) {

Label* label = [Label labelWithString:@"Hello World"

? ? fontName:@"Marker Felt"

fontSize:64]; // create and initialize a Label

CGSize size = [[Director sharedDirector] winSize]; // ask director the the window size

label.position = ccp( size.width /2 , size.height/2 ); // position the label on the center of the screen

[self addChild: label]; // add the label as a child to this Layer

}

return self;

}


- (void) dealloc

{

[super dealloc];

}

@end



このソースは大事なことだらけなのですが、とりあえずぱっと目についた、文字っぽいものをいじってみましょう。


-(id) init

{

}

この中にある、


Label* label = [Label labelWithString:@"Hoge World"

fontName:@"Marker Felt"

fontSize:64];


これですね。

ちょっと改行を変更してあります。



この @"HelloWorld" の文字列を変えてみましょう。

その前に、なんで @ がついているかというと、前にもちらっと書きましたが、ここで書くソースには、C言語の記述と、cocoa独自言語のObjective-Cが混在しています。

Cの文字列は""ですが、Objective-Cの文字列オブジェクト(NSStringなど)で扱う文字列は@""で定義する、ぐらいに覚えておきましょう。



ここで @"HelloWorld" を @"Hoge World" にしてみましょう。

ちゃんと変わりましたね。




ちょっと安心したと思います。


では、今度は位置を変えてみましょう。


label.position = ccp( size.width /2 , size.height/2 );


ここで位置を指定しています。

label が HelloWorld (いまは Hoge Worldですが)のオブッジェクトをさしています。

それのプロパティの一つ、位置を表すものが position です。

その後ろに ccp( size.width /2 , size.height/2 ) とある部分で、X Y の座標を指定しています。

その size.width とは何か??

その後ろに / 2 とついているので、何かサイズの半分の位置だろう、という想像はつくと思います。

その size の正体を突き止めましょう。



その行の上にありますね。続けて書くとこうです。


CGSize size = [[Director sharedDirector] winSize];

label.position = ccp( size.width /2 , size.height/2 );



上の行、二つ目の単語、size は、下で出てくるsizeです。

超アバウトな言い方をすると、

CGSize size という部分で、「size は CGSize という形式のデータを持つよ」ということが定義されています。

その CGSize というデータ形式は、横幅、縦幅のデータを、CGSize.width/CGSize.height という形で持っていると思ってください。


その次の部分

size = [[Director sharedDirector] winSize];

これは、[[Director sharedDirector] winSize] の サイズのデータを size に放り込む、ということです。

winSize という単語があるので、何かの window のサイズということはわかると思います。


試しに 割る2 を外してビルドしてみましょう。

label.position = ccp( size.width , size.height );





文字が右上の隅の方にいきましたね。

ついでなので、試しに

label.position = ccp( 0 , 0);

こうしてみましょう。




左下すみにいきました。


どうやら、画面の右上が size.width , size.height で、左下が  0 , 0 という感じのようです。

ついでに、

ccp() というのは、文字列の縦横の真ん中、中心点を指定している、ということがなんとなくわかると思います。

適当に数字を変えて試してみてください。


これまたついでなのですが、ccp()の中を数字に変えてビルドすると、黄色い枠で warning が表示されると思います。

これはコンパイラが出力する注意事項で、ここでは、「プログラム中に使われていない'size'っていうのがあるよ」といっています。




つまり、size というのはここで定義して、このccp()の中でしか使っていないのですが、そのccp()の中で使わなくなったため、どこにも使われていないよ、無駄じゃない?ということを言ってきています。


ということで、とりあえずわからないことだらけですが、文字を変えたり表示位置を変えることはできるようになりました。




せっかちな人は、「じゃあ画像ファイルを表示するにはどうすればいいの?」と思われていると思います。

その方法だけ、書いてしまいます。

実際に出来たものを目の当たりにした方が、ちょっと安心できますよね。


HelloWorldScene.m の、[self addChild: label]; の行の下に 下記の3行を追加してみてください。

if文の中ですね。


- (id) init

{

if( (self=[super init] )) {



Sprite *imgObject = [[Sprite alloc] initWithFile:@"testImg.gif"];

[self addChild:imgObject];

imgObject.position = ccp(100,100);

}

}



そして、何の画像でもよいので、手元にあるgif画像を「testImg.gif」というファイル名でXcodeのプロジェクトに追加してください。


『グループとファイル』のところで右クリック→追加→既存のファイル です。




で、ビルドすると、表示されましたね!?

そうすると、例えばゲームを作るときはその画像を連続的に動かしたりすればいいことがわかり、何となく状況がつかめて、理解するきっかけがつかめたような気がしますよね。