FC2ブログ

Entries

cocos2d 初心者ガイドレッスン3の巻

レッスン3を日本語訳していきます。

ここでは、メニューとかシーンとかについて説明されてるみたいです。

かっこいいメニューが作れたらいいなって良く思います。

さて、cocos2d ではどうメニューやシーンを実現してるんですかね。

興味津々にまいりましょう!!

--------------------
<目次
レッスン3 メニューとシーン

このレッスンで、Cocos2d でどのようにゲームをシーンの分けるのか、そしてどのようにシーン間を遷移させるのかについて学んでいきます。

それらのことはとても簡単に理解できるようになるので、CCMenu と、メニューシーンの構築を簡単にしてくれる関連クラスの解説もしましょう。

このレッスンは、レッスン1 インストールとテストレッスン2 はじめてのゲーム をすでに理解していることを想定しています。

シーン

cocos2d では、シーンとは、みえている他のすべてのノードの基本となる親ノードとして動作する特別なノードと定義されています。

好きなように使用しても良いのですが、典型的な使用方法は、実際にゲームをプレイするシーンやタイトルのシーン、ハイスコアのシーン、設定のシーンなどでしょう。

シーンは CCScene クラスで表されます。

シーンは、それが目に見える場合や、シーン上に動作するアクションが存在する場合などに「実行中」と呼ばれます。

一度にひとつのシーンしか実行できません。

しかし、現在実行中のシーン上に別のシーンを差し込むことが可能です。その時は、現在実行中のシーンは一時に中断され、重ねた別のシーンが実行中となります。

その後、差し込んだシーンを閉じた時は、最初に実行中だったシーンが再度実行中となります。

シーンを他のシーンに入れ替えることもできます。これは、ほとんどメモリを消費しないので、好まれてる方法です。

このシーンの差し込み・抜き出しやシーンの入れ替えは、ディレクター(CCDirector) によって行われます。

レッスン1で紹介したテンプレート内を確認した際に CCDirector をすでに見かけたと思います。

アプリケーションデリゲートの中を確認してみてください。(例えば、Lesson1AppDelegate.m など、プロジェクトの中でそれが呼ばれてるならどこでも構いません。)applicationDidFinishLaunching メソッドの下の方にこのようなコードがあると思います。

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


このコードは、ディレクターに対して、引数として指定したシーン(HelloWorld)でシーンを開始するように伝えています。

例えば、メニューシーンでユーザがプレイボタンをタップした場合や、ゲームオーバーになったときにメニューに戻りたい場合などに、実行しているシーンを別のに変更するためには、ディレクターの replaceScene メソッドを呼び出すだけでいいのです。

	[[CCDirector sharedDirector] replaceScene: [SomeOtherScene scene]];


このコードは現在実行中のシーンを終了し、指定した次のシーンを開始します。後で、最初の(または、他の)シーンを、replaceScene を呼び出してもう一度再開することができます。

かわりに現在のシーンをいったん停止しておきたいだけなのであれば、replaceScene のかわりに pushScene を使用します。popScene を後ほど呼び出すことで、新しく実行中になったシーンを終了し、以前実行中だったシーンを再開することができます。

ただし、iPhone のメモリは限られており、シーンはメモリ上に常駐するので、このメソッドは、ちまちまと使用してください。

ディレクターには他にいろいろと便利なことができます。たとえば適切に一時停止・再開したい時などは、CCDirector リファレンスで詳細を確認してください。

ファンシーな(装飾された)遷移

CC~Transition では多くのシーン間のファンシーな遷移をサポートしています。

[[CCDirector sharedDirector] replaceScene:
[CCTransitionFade transitionWithDuration:0.5f scene:[SomeOtherScene scene]]];


一般的によく使われる遷移には、以下のようなものがあります。

・CCTransitionFade
・CCTransitionFlipAngular
・CCTransitionShrinkGrow
・CCTransitionMoveInB
・CCTransitionMoveInT
・CCTransitionMoveInL
・CCTransitionMoveInR
・CCTransitionFadeTR
・CCTransitionFadeUp
・CCTransitionFlipX
・CCTransitionFlipY
・CCTransitionPageTurn
・CCTransitionCrossFade

遷移の種類をもっと確認したいのであれば、 API ドキュメントをチェックしてください。

メニュー

メニューは、よく知られた GUI の概念であるボタンを使うことによってゲームとユーザを相互的に動作させる方法を提供します。

メニューは、ディレクターにシーンの変更を伝えるためによく使用されますが、ゲームをコントロールする際に、便利に柔軟に使用することもできます。

メニューを作るためには単にメニューのインスタンスを作るだけです。

    CCMenu * myMenu = [CCMenu menuWithItems:nil];


このコードで、メニューアイテムがない空のメニューが作られます。

メニューを使用可能とするためには、メニューアイテムを追加する必要があります。

メニューアイテムにはいくつかの選択肢があります。

・CCMenuItemAtlasFont
・CCMenuItemFont
・CCMenuItemImage
・CCMenuItemLabel
・CCMenuItemSprite
・CCMenuItemToggle

それぞれのメニューアイテムの種類には、微妙な違いがあります。

ただし、基本的に、それらにはボタンがタッチされた時に呼び出されるターゲットとセレクターを定義することができます。

一番簡単につくれるメニューのひとつに、CCMenuItemImage があります。これは、メニューアイテムのためにヒット領域が定義されたイメージとして使用可能です。


    CCMenuItemImage *menuItem1 = [CCMenuItemImage itemWithNormalImage:@"myFirstButton.png"
selectedImage: @"myFirstButton_selected.png"
target:self
selector:@selector(doSomething:)];


・itemWithNormalImage はメニューアイテムとして使用したい画像を設定します。
・selectedImage はボタンが押下された際に使用される画像を定義します。
・target はメニューアイテムの押下にどのオブジェクトが応答するかを定義します。この場合「self」は、メニューが作成されたシーンを参照します。
・selector は呼び出されるべきターゲットメソッドです。

メモ:@selector(doSomething) と @selector(doSomething:) には違いがあります。(違いはコロンの有り無しです)コロンが付いている方は、そのメソッドに menuItem オブジェクトが渡されます。

これは、呼び出されたメソッドに付加的な値を渡したい時に役立ちます。

例えば、メニューアイテムの tag で次に何をするのか決定することができます。

また、MenuItemType のサブクラスに付加的な情報を含めることにより、doSomething メソッド内でその情報にアクセスすることもできます。

いったんメニューアイテムを構築したら、他の CCNode に追加したのと同じ方法でメニューにアイテムを追加することができます。

   [myMenu alignItemsVertically];


あるいは、次のように menuWithItems コンストラクタを次のように変更することにより、複数のメニューアイテムを一度に構築してそれをメニューに追加することができます。(この例のように、コンストラクタの最後に nil を指定するのを忘れないようにしてください)

CCMenu *myMenu = [CCMenu menuWithItems:menuItem1, menuItem2, menuItem3, nil];


CCMenu には alignItemsVertically や alignItemsInRows といったメニューをレイアウトするいくつかの便利なメソッドがあります。それらは以下のように使用します。

   [myMenu alignItemsVertically];


同時にそれを指定し、以下のようにメニューを構築します。

// いくつかのメニューアイテムを構築します
CCMenuItemImage * menuItem1 = [CCMenuItemImage itemWithNormalImage:@"myfirstbutton.png"
selectedImage: @"myfirstbutton_selected.png"
target:self
selector:@selector(doSomethingOne:)];
 
CCMenuItemImage * menuItem2 = [CCMenuItemImage itemWithNormalImage:@"mysecondbutton.png"
selectedImage: @"mysecondbutton_selected.png"
target:self
selector:@selector(doSomethingTwo:)];
 
 
CCMenuItemImage * menuItem3 = [CCMenuItemImage itemWithNormalImage:@"mythirdbutton.png"
selectedImage: @"mythirdbutton_selected.png"
target:self
selector:@selector(doSomethingThree:)];
 
 
// メニューを構築し、メニューアイテムを追加します
CCMenu * myMenu = [CCMenu menuWithItems:menuItem1, menuItem2, menuItem3, nil];
 
// メニューアイテムを垂直に配置します
[myMenu alignItemsVertically];
 
// メニューをシーンに追加します
[self addChild:myMenu];


この6つの画像を使ってこのテストを実施してみてください。



この画像でテストを行うためには、まず画像をプロジェクトのルートディレクトリにダウンロードして、Xcode の Resources フォルダに追加します。(iPhone システムは大文字小文字を区別するので、ダウンロードするときは大文字小文字の違いに気をつけてリネームしてください。)

それぞれのメニューアイテムは別々のコールバック関数を定義しているので、それらを追加する必要があります。

- (void) doSomethingOne: (CCMenuItem  *) menuItem 
{
NSLog(@"The first menu was called");
}
- (void) doSomethingTwo: (CCMenuItem *) menuItem
{
NSLog(@"The second menu was called");
}
- (void) doSomethingThree: (CCMenuItem *) menuItem
{
NSLog(@"The third menu was called");
}


メニューやその仕様方法についてより詳細に理解するために、CCMenu についての文書をひと通り確認して下さい。

最初の3つのレッスンを終えたら以下のようなコードになっているはずです。メニューのセットアップは別メソッドに分けてあるので注意してください。

//
// HelloWorldLayer.m
// Lesson1
//
 
 
// Import the interfaces
#import "HelloWorldScene.h"
#import "CCTouchDispatcher.h"
 
 
CCSprite *seeker1;
CCSprite *cocosGuy;
 
// HelloWorld implementation
@implementation HelloWorld
 
+(id) scene
{
// 'scene' is an autorelease object.
CCScene *scene = [CCScene node];
 
// 'layer' is an autorelease object.
HelloWorld *layer = [HelloWorld node];
 
// add layer as a child to scene
[scene addChild: layer];
 
// return the scene
return scene;
}
// set up the Menus
-(void) setUpMenus
{
 
// Create some menu items
CCMenuItemImage * menuItem1 = [CCMenuItemImage itemWithNormalImage:@"myfirstbutton.png"
selectedImage: @"myfirstbutton_selected.png"
target:self
selector:@selector(doSomethingOne:)];
 
CCMenuItemImage * menuItem2 = [CCMenuItemImage itemWithNormalImage:@"mysecondbutton.png"
selectedImage: @"mysecondbutton_selected.png"
target:self
selector:@selector(doSomethingTwo:)];
 
 
CCMenuItemImage * menuItem3 = [CCMenuItemImage itemWithNormalImage:@"mythirdbutton.png"
selectedImage: @"mythirdbutton_selected.png"
target:self
selector:@selector(doSomethingThree:)];
 
 
// Create a menu and add your menu items to it
CCMenu * myMenu = [CCMenu menuWithItems:menuItem1, menuItem2, menuItem3, nil];
 
// Arrange the menu items vertically
[myMenu alignItemsVertically];
 
// add the menu to your scene
[self addChild:myMenu];
}
// on "init" you need to initialize your instance
-(id) init
{
// always call "super" init
// Apple recommends to re-assign "self" with the "super" return value
if( (self=[super init] )) {
 
 
// create and initialize our seeker sprite, and add it to this layer
seeker1 = [CCSprite spriteWithFile: @"seeker.png"];
seeker1.position = ccp( 50, 100 );
[self addChild:seeker1];
 
// do the same for our cocos2d guy, reusing the app icon as its image
cocosGuy = [CCSprite spriteWithFile: @"Icon.png"];
cocosGuy.position = ccp( 200, 300 );
[self addChild:cocosGuy];
 
// schedule a repeating callback on every frame
[self schedule:@selector(nextFrame:)];
[self setUpMenus];
 
// register to receive targeted touch events
[[CCTouchDispatcher sharedDispatcher] addTargetedDelegate:self
priority:0
swallowsTouches:YES];
}
return self;
}
 
// on "dealloc" you need to release all your retained objects
- (void) dealloc
{
// in case you have something to dealloc, do it in this method
// in this particular example nothing needs to be released.
// cocos2d will automatically release all the children (Label)
 
// don't forget to call "super dealloc"
[super dealloc];
}
- (void) nextFrame:(ccTime)dt {
seeker1.position = ccp( seeker1.position.x + 100*dt, seeker1.position.y );
if (seeker1.position.x > 480+32) {
seeker1.position = ccp( -32, seeker1.position.y );
}
}
- (BOOL)ccTouchBegan:(UITouch *)touch withEvent:(UIEvent *)event {
return YES;
}
- (void)ccTouchEnded:(UITouch *)touch withEvent:(UIEvent *)event {
CGPoint location = [touch locationInView: [touch view]];
CGPoint convertedLocation = [[CCDirector sharedDirector] convertToGL:location];
 
[cocosGuy stopAllActions];
[cocosGuy runAction: [CCMoveTo actionWithDuration:1 position:convertedLocation]];
}
 
- (void) doSomethingOne: (CCMenuItem *) menuItem
{
NSLog(@"The first menu was called");
}
- (void) doSomethingTwo: (CCMenuItem *) menuItem
{
NSLog(@"The second menu was called");
}
- (void) doSomethingThree: (CCMenuItem *) menuItem
{
NSLog(@"The third menu was called");
}
 
 
@end


メニューアイテムはセレクタのかわりにブロックを使用することもできます。


	// Create some menu items
CCMenuItemLabel *mi1 = [CCMenuItemLabel
itemWithLabel:someLabel
block:^(id sender) {
[theDirector pushScene:[SceneGame node];
}
];


Objective-C のブロックに付いてはここによい文書があります。ブロックを使用することで、簡単なメニューアイテムのための一度だけしか使用しないメソッドをコードから排除することができます。

-------------------------------

終わった。つかれた。

レッスン3も後ほど実施してみますね。
スポンサーサイト



スポンサード リンク

cocos2d 初心者ガイド レッスン2の巻

レッスン1に引き続き、cocos2d 初心者ガイドレッスン2を日本語に訳しながら読んで行きます。

ここでは、スプライトを自動でまたはタッチイベントで動かすようです。

----------------------------------
<初心者ガイドレッスン1 初心者ガイドレッスン3>

始めてのゲーム

このレッスンのゴール

このレッスンでは、新規の cocos2d プロジェクト作成、スプライトの追加、自動かタッチベントでのスプライトの動作の解説を行います。

このレッスンの前に、基本コンセプトレッスン1を理解しておいてください。

初期のセットアップ

まずは、レッスン1で説明した通りに、“cocos2d-(version) Application” テンプレートで新規プロジェクトを作成してみましょう。

レッスン1で作ったものを、どこかへ手動でコピーし使用してもよいです。プロジェクトを実行すると、 “Hello World” という文字が期待通りに表示されることを確かめてみてください。

その際に、cocos2d のスプラッシュスクリーンが起動され、ホームボタンを押してデモンストレーションプロジェクトを終了すると、cocos2d のアイコンがホーム画面に追加されていることも確認してみてください。

スプラッシュスクリーンやアイコンは、プロジェクト内(ディスク上)の Resources フォルダの中に特別な名前で保存されています。

これらの画像を自分自身で用意した画像に差し替えたい時のため、そして背景やスプライトのための画像を追加するときのために、Resources フォルダと画像の場所を確認しておいてください。

(今すぐにスプラッシュやアイコンの画像を差し替えたいのであれば、同じ名前で同じ大きさの画像ファイルに差し替えてください。そうすれば、表示される画像が差し替えたものとなります。)


ここで、スプライトとして使用するための画像を一つ追加しておきます。ディスク上のプロジェクト内の Resources フォルダ直下に seeker.png という名前でこの画像を保存してください。

保存後に、Xcode の Resources フォルダを確認してみてください。

seeker.png は、Resources フォルダ内に存在していないと思います。ディスク上に追加しただけでは、自動的に Xcode のプロジェクトには追加されません。




ファインダーから Xcode プロジェクトの Resources フォルダ内にファイルをドラッグアンドドロップしてください。

いくつかのオプションが選択された状態のダイアログが表示されるので、それらのチェックを全部外して、追加ボタンをクリックしてください。

Xcode のプロジェクトの Resources フォルダ内に、seeker.png が追加されています。

このレッスンでは、ふたつのスプライトが必要ですが、画像を用意する時間を省くため、2個目のスプライトとして、すでにプロジェクトに入ってる Icon.png を使用することにします。


スプライトの構築

さっそく、Classes フォルダを開いてみてください。代表的な二つのクラス、HelloWorldScene と Lesson1AppDelegate (新しいテンプレートの場合は、代わりに HelloWorldLayer と AppDelegate)の、4つのファイルがフォルダ内にあると思います。

今回のレッスンでは、すべてのコーディングを HelloWorldScene.m におこなっていきますので、このファイルを選択してください。

まずは、何かしらの方法で我々が定義したスプライトを参照する手段が必要となってきます。

ひとつのメソッド内のみで参照すればいいのであれば、ローカル変数を使用すればよいのですが、これは稀なケースです。

タッチイベントに応じたスプライトの動作を行ったり、何らかのロジックに基づいてフレームごとにスプライトを動かしたり、そういったことを実現するためには、様々なメソッドからスプライトが参照可能である必要があります。

様々なメソッドからスプライトを参照するために、いくつかの方法があります。

今回ご紹介しているプロジェクト内のほとんどのデモンストレーションやテストのコード内では、スプライトをレイヤーに追加するときに割り当てる tag を使用しています。

tag を使用すれば、後ほど getChildByTag メソッドを使用してそのスプライトを参照することができます。

この方法は安全ですが、内部的には余計な処理を行っているので、何百個ものスプライトを使用するような大きなゲームではパフォーマンス上の問題が発生する場合があります。

そこで、より簡単な方法を使用することとします。この方法は、シーンのインスタンスを一度にひとつしか実行させない(通常ではあまり考えられない状態ですが)限り安全です。

スプライトの参照としてファイルスコープの変数を宣言します。ファイルの先頭の #import 行の下に、以下の2行を追加してください。

CCSprite *seeker1;
CCSprite *cocosGuy;


スプライトオブジェクトが参照できる2つの CCSprite のポインタを宣言しました。

宣言しただけでは何も参照していないので、次に、init メソッドで参照するものを定義します。

ファイル内から、-(id) init メソッドを見付け出してください。

このメソッドは、シーン(正確に言うと、シーンの中のメインレイヤ)が構築されているときに自動で呼び出されます。

if 文と 最後の return self は、常套句です。ここでは特に気にしなくてもよいでしょう。

変更は、if ブロック内におこなっていきます。

Hello World ラベルの構築は不要なので、最初から記述されている if ブロック内のコードは削除して、かわりに以下のコードを追加してください。

        // seeker スプライトを構築して初期化し、レイヤーに追加
seeker1 = [CCSprite spriteWithFile: @"seeker.png"];
seeker1.position = ccp( 50, 100 );
[self addChild:seeker1];
 
// cocos2d 君も同様に。アプリのアイコンを再利用します。
cocosGuy = [CCSprite spriteWithFile: @"Icon.png"];
cocosGuy.position = ccp( 200, 300 );
[self addChild:cocosGuy];


それぞれのスプライトのために3行ずつ追加しました。

最初の行は、spriteWithFile を呼び出して、このプロジェクトに追加されている画像でCCSprite オブジェクトを構築しています。

次の行は、スクリーン上のスプライトの中心位置を設定しています。ccp (cocos2d point の略) マクロを使って、X 、Y 座標で2次元位置(技術的には CGPoint 構造体)を作成しています。

メモ:cocos2d では、X 座標はスクリーンの左から始まって右側に向かって増加します。Y座標はスクリーンの下から始まって上に向かって増加します。

最後に、ぞれぞれのスプライトの3行目で、addChild メソッドを呼び出し、新しく作ったスプライトをレイヤーに追加しています。

コードを保存(cmd-s)して、実行(cmd-R)してみましょう。

結果は下のようになります。



動かし方

スクリーンにスプライトを表示する方法が理解できたと思います。

次は、これらのスプライトを動かしてみたいと思います。

スプライトを動かすには、基本的な2つの方法があります。

1.Action を使用して、決まった時間で、ターゲットとなる位置へ自動的にスプライトを動かす方法
または
2.ゲーム中定期的に呼び出されるメソッド内でスプライトを自分で動かす方法

まずは、2番目の方法を試してみます。

HelloWorldScene.m の init メソッドに変更を加えていきます。

先ほど、if ブロック内のコードでスプライトを構築しました。

その時行ったスプライトの初期化にもうひとステップ加えます。定期的に呼び出されるコールバック関数のスケジューリングをおこないます。

if ブロック内の [self addChild: cocosGuy]; の真下に以下のコードを追加してください。

        // フレームごとに繰り返し呼ばれるコールバックをスケジュール
[self schedule:@selector(nextFrame:)];


このコードでは、自身(HelloWorldのCCLayer)の schedule メソッドに対して、ひとつの引数を持つ nextFrame メソッドのアドレスを指定し、呼び出しています。

nextFrame メソッドは存在しないので作成しましょう。

HelloWorldScene.m の中でメソッド内以外の空行、例えば init メソッドの最終行と dealloc メソッドの開始行の間に、次のコードを挿入してください。

- (void) nextFrame:(ccTime)dt {
seeker1.position = ccp( seeker1.position.x + 100*dt, seeker1.position.y );
if (seeker1.position.x > 480+32) {
seeker1.position = ccp( -32, seeker1.position.y );
}
}


このように記述することにより、cocos2d ライブラリはアニメーションの各フレーム毎に nextFrame イベントを呼び出すようになります。

この定期的に呼び出されるイベントはいろいろなことを実施する機会を与えてくれます。例えば、スプライトの動作の実行、衝突の判定、物理的なモデルの更新、新しい敵の生成、不要なスプライトの削除などを行うことができます。

今回のレッスンでは、このイベント内で seeker のスプライトを動作させます。

position プロパティに新しい値を設定することで、スプライトを動作させることができます。(position の .x と .y に値を設定してもスプライトは動作しません。新しく point オブジェクトを指定する必要があります。)

イベント内では、スプライトの position プロパティの x の値に 100 * dt 加算しています 。こうすることで、スプライトは一秒間に 100 ピクセル動作します。

dtを使用してスプライトの移動する量を決めて動かしたい速さ(ピクセル毎秒)を指定する方法はとても有用です。
もしフレームレートが少しだけ変化した場合でも、一定のスピードを保ったまま動作させることができるからです。

それから、スプライトがスクリーンから、はみ出たかどうかを確認する必要があります。

iPhone がランドスケープモードと仮定し、横幅を 480 ピクセルとします。コードをより汎用的にしたい場合は、
[[CCDirector sharedDirector] winSize] で実際のスクリーンサイズを取得してください。

ただここでは、480 ピクセルとしておきます。そして、480 ピクセルにスプライトの半分のサイズの 32 を加算します。

こうしておくことで、スプライトの中心が 480 + 32 を超えた時にスプライト全体が右側から完全に見えなくなるので、そうなった場合に、スプライトの位置を左側から完全に見えなくなる -32 に再設定します。

タッチへの応答

イベントのハンドリングはコールバック関数のスケジューリングと少しの違いがあります。

イベントは、スクリーンにタッチした場合や、加速度計の読み込みなどに応じて呼び出されます。

これらのイベントはすでに定義されており、タッチイベントに関しては場合は、標準的な方法と目的が定められた方法の2つの異なる導入法があります。

これらふたつのタッチイベントの詳しい解説は、タッチデリゲート を参照してください。

このレッスンでは、目的の定められたデリゲート(target delegate)を使用します。そのためには、少しコードを変更する必要があります。

まず最初に、ファイルの上部、HelloWorldScreen.h をインポートしているコードの真下に以下のコードを追加してください。

#import "CCTouchDispatcher.h"


init メソッドの下あたりに、新しくメソッドを追加します。CCLayer に、標準的な方法(standard) ではなく 目的が定められた方法(targeted)を使用することを伝えるために以下のように記述します。、

-(void) registerWithTouchDispatcher
{
[[[CCDirector sharedDirector] touchDispatcher] addTargetedDelegate:self priority:0 swallowsTouches:YES];
}


つぎに、再び init メソッドに戻って、if ブロックの終了直前に、タッチイベントを登録するための以下の行を追加してください。

    self.isTouchEnabled = YES;


追加したら、さらに新しいメソッドの場所を探してください。先ほど追加した nextFrame メソッドの真下あたりとなるでしょう。

それぞれのタッチイベントの目的の定められた(targeted)イベントセットを使用するので、少なくとも CCTouchBegan メソッドを実装擦る必要があります。

CCTouchBegan で YES を返却し、タッチディスパッチャに、このタッチに対するイベントを要求することを伝えましょう。

- (BOOL)ccTouchBegan:(UITouch *)touch withEvent:(UIEvent *)event {
return YES;
}


こうすることで、同じタッチで別のメソッドが呼び出されるようになります。タッチが終了した場所にふたつめのスプライトを移動するコードを追加します。

- (void)ccTouchEnded:(UITouch *)touch withEvent:(UIEvent *)event {
CGPoint location = [self convertTouchToNodeSpace: touch];
 
[cocosGuy stopAllActions];
[cocosGuy runAction: [CCMoveTo actionWithDuration:1 position:location]];
}



convertTouchToNodeSpace は、以下の動作を行います。

1.まず、ビュー内でのタッチの位置の取得します。
2.次に、CCDirector にその位置を GL 座標すなわち、描画のために使用するのと同じ座標系に変換するよう依頼します。(ポートレートとランドスケープ間の変換等を行います。)
3.最後に、それらの GL 座標を CCLayer のためのノードスペースに変換する。あまり大差はありませんが。

その後、我々は以下のことを行います。

1.次に、cocosGuy スプライトが直前までに行っているすべてのアクションを停止します。
2.最後に、1秒かけてスプライトをタッチ位置に移動させる新しいアクションを開始する。

メモ:アクションを使用しているので、nextFrame にこのスプライトを移動するためのコードを記述する必要はありません。

アプリを実行して実際に試してみましょう。指がスクリーンから離れたら(シュミレータでは、マウスのボタンをはなしたら)、ちょうどその位置に cocos2d のアイコンが疾走してくるでしょう。その間ずっと、シーカーロボットはスクリーン上を駆け回っているでしょう。

では、準備ができ次第、レッスン3に進みましょう。

---------------------------

いちいち nextFrame メソッドに動作を書かないでも、Action の定義で スプライトが動かせることがわかった。

次回はこれを試していきます。

じっちゃん、オラワクワクしてきた。
スポンサード リンク

cocos2d 初心者ガイドレッスン1の巻

今回は、cocos2dのプログラミングガイドの中の初心者ガイドレッスン1を日本語に訳しながら読んでいきます。

ここでは、テンプレートのインストール方法について説明されてます。

--------------------
<目次 初心者ガイドレッスン1 初心者ガイドレッスン2>
Cocos2d for iPhone へようこそ!


Cocos2d for iPhone は OpneGL ES を基にした、 iPhoneやiPod touch や iPad のゲームを作るライブラリです。

cocos2d に関して前提知識がほとんどまったくない人向けに、Cocos2d のセットアップと使用の開始方法を説明することを通して理解を深めていただくための文書です。

0.アップルの開発ツールのインストールと iPhone SDK

まだ iOS のソフトウェア開発キット(SDK) をインストールしていないのであれば、まずは iOS Developer Center から手にいれてください。

このサイトにある Xcode は、アップルの統合開発環境(IDE)で、プログラムの編集やコンパイルをするために使います。

Xcode にはコードライブラリやドキュメントなどなど iOS の開発で一般に必要とされるものが含まれています。



アップルのサイトから SDK をダウンロードするには、アップル開発プログラムに登録する必要があります。

登録は無料となっています。(しかし、App Store にあなたが作ったアプリをアップする場合は、$99 の年会費がかかる会員にアップグレードする必要が有ります。)


(メモ:iPod touch や iPad 向けにソフトウェアを開発する場合でも、「iPhone 開発」 と呼ぶのが一般的となっています。この3つのデバイスには iOS という OS が使用されており、ソフトウェア開発者としての観点がとってもよく似ているためです。)



iOS SDK のダウンロードやインストールにはとても時間がかかるので、なるべく早くこのステップを始めて、終わるまでの待ち時間に何かやれることを見つけておくことをおすすめします。


1.ソースファイルのダウンロード

ダウンロードページから、安定バージョンの tar 形式の圧縮ファイル をダウンロードします。

ダウンロードが終わったら、ファインダー上でそのファイルをダブルクリックして解凍します。

以下のようなファイルに展開されます。



これらのファイルが何であるかというと、ほとんどはプレーンテキストのファイルです。

標準的な拡張子がついてないので、ファインダー上ではどんなファイルなのかわからないかもしれません。

AUTHORS, CHANGELOG, LICENSE.box2dなどのファイル名が大文字のファイルを、お好みのテキストエディタにドラッグアンドドロップしてみてください。

(TextWrangler というテキストエディタは、無料でとても使い勝手が良くて気に入っています。ただし、他にもたくさんの選択肢があります。)


READMEをまず読んでみてください。さまざまなファイルがどのようなファイルなのかや、使用開始におけるいくつかの注意点や知っておくべきことなどが書かれています。(このレッスンほど詳しくはありません。)

2.テストの実行

cocos2d-ios.xcodeproj は README の中で説明されていないファイルの中で一番重要です。 Xcode でこのファイルを開いてみてください。

この大きなプロジェクトの中には、cocos2d のテストコードやデモプログラムなどのたくさんのサブプロジェクトの全ソースコードが含まれています。

この、テストコードやでもプログラムを試しに実行してみることは、cocos2d の機能を理解する上でとても有効な方法で、これらのソースコードを参照することは、cocos2d の先駆者たちがどのように様々なことを実装しているかを知るために大変役に立ちます。

どのコードを実行するか選択するには、アクティブなターゲットとアクティブな実行可能ファイルを設定します。

設定には2つの方法があります。ひとつ目は、メニューバーのプロジェクトにある、アクティブターゲットの設定およびアクティブな実行ファイルの設定というサブメニューを使用する方法です。

ふたつ目は、これらのオプションを、メインのツールバーに追加する方法です。
メニューの表示でツールバーのカスタマイズを選択します。そして、ウィンドウの上部のツールバーに、 「アクティブなターゲット」と「 アクティブな実行ファイル」 をドラッグアンドドロップすることで追加できます。

この方法で、アクティブとしたいターゲットや実行ファイルを選択することができます。

どちらかの方法で、実行したいアクティブターゲット、たとえば、「スプライトテスト」や「パーティクルテスト」を選択しましょう。

アクティブな実行ファイルはアクティブターゲットによって自動的に選択されますが、もし何かの原因で選択に失敗した場合は、手動でアクティブな実行ファイルを選択する必要があります。

Xcode3では、このようにアクティブターゲットやアクティブな実行ファイルを選択しますが、Xcode 4 では、どの設定をビルドに使用するか、どのデバッガを使用するか、どの実行ファイルを起動に使用するかといったビルドターゲットを定義するスキームを選ぶ必要があります。

Option + 実行ボタンをクリックして、スプライトテスト」や「パーティクルテスト」といったスキーマをドロップダウンリストから選択し、「ビルドと実行」(「ビルドとデバッグ」かもしれない)をクリックしましょう。

プロジェクトのコンパイルが開始され、iPhone/iPad シュミレータが起動し、デモが開始されます。

エラーが発生した場合は、プロジェクト→プロジェクトの設定の編集→ビルド を選択し、C/C++コンパイラのバージョンが "GCC4.2" 以外の "LLVM 4.2" といったものになっていないかどうか確認して下さい。

テストやデモをある程度実行した後は、ソースコード自体を確認してみてください。

今から作成するアプリに参考になるコードは、ウィンドウの左側のクループとファイルにあるテストフォルダの中を参照してください。

ほとんどのファイルのファイル名はターゲットと一致しています。パーティクルのテスト用コードの場合は、ParticleTest.h というヘッダファイルと PartilcleTest.m というソースファイルとなっています。

デバッグについて詳しく学びたい場合は、Xcodeのデバッグ技術を参照してください。

実際にコードを実行させながらデバッグする方法、たとえば、ソースコードの特定の位置で停止させる方法や、変数内の値を参照する方法や、ログの出力方法、(大声で公然とソースコードとお話を剃る方法も)などを理解することができます。

今までデバッグをまったくやったことがない場合でも心配は無用です。ただし、こういったことが可能だということを覚えておいて、実際に必要になった場合はこのリンク内のデバッグ技術を参照してみてください。

3.プロジェクトテンプレートのインストール

実際には、Cocos2dを使用する際にインストールする必要があるものはありません。

Cocos2d は単なるソースライブラリとなっており、適切に設定されたプロジェクト内に適切なソースコードを書いてあげれば、実行可能が可能です。

ただし、開発を簡易にすすめるために、cocos2d は多数の Xcode プロジェクトテンプレートを備えています。

任意のコンポーネントが付随したプロジェクトを作成するために、以下のテンプレートが用意されています。

・cocos2d スタンドアローンテンプレート
・cocos2d + box2d テンプレート
・cocos2d + chipmunk テンプレート

テンプレートをインストールする際は、ターミナルアプリケーションを起動して、以下のように入力して下さい。

$cd cocos2d-iphone
$./install-templates.sh -u


(一行目の cocos2d-iphone は、実際の cocos2d のパスにあわせてください。まず、ターミナルに cd と入力し、ファインダーのフォルダーをターミナルにドラッグアンドドロップすれば、簡単に入力することができます。)

このスクリプトを実行したときに、すでにテンプレートのディレクトリが存在している場合は、インストーラはコピーをスキップしてしまいます。強制的に上書きしたいときは、以下の通りのオプションを指定して実行してください。

$./install-templates.sh -f -u


4.新しいプロジェクトの作成

テンプレートのインストールが成功したら、テンプレートを使って、Xcode でプロジェクトを作成することができるようになります。

1.Xcode を起動
2.ファイル → 新規プロジェクトの順に選択
3.cocos2d のいずれかのテンプレートを選択

テンプレートから作成したプロジェクトは、そのままで実行可能です(ぜひ実行してみてください)。iPhone シュミレータが起動し、”Hello World” が表示されます。

このテンプレートから作成したプロジェクトに、独自のコードを追加し、ゲームを作成していくことができます。

次のステップ

さあ、実践してみよう。そのまえに、少しだけ時間を取ってこのレッスンで理解したことをまとめておきましょう。

・Xcode と iPhone SDK のインストール
・cocos2d-iPhone ライブラリのダウンロードと解凍
・cocos2d テストの実行とソースコードの確認
・新規プロジェクトテンプレートのインストール
・最初の”Hello World”プロジェクトの構築と実行

cocos2d の動作原理、ゲーム作成で何が必要なのかといったことをさらに学んでいくための準備ができました。大きな進歩といえるでしょう。

動作方法や重要な単語の意味などの cocos2d の全体像について記述してある基礎概念を熟読し理解するところから始めましょう。

その後、レッスン2、最初のゲームに進んでみてください。

-------------
レッスン1終わったー。
よし、次は実際に実行してみます。
テンプレートをインストールして実行だな。


スポンサード リンク

Appendix

出演ゲーム

みやちかんたろうの大冒険

↑インストールはこちらから
予告編

21面デモ

ステージ作成

検索フォーム

訪問者

Apple製品紹介

Apple MacBook Air 1.6GHz 13.3インチ MB003J/A

中古価格
¥59,800から
(2013/1/24 06:45時点)

QRコード

QR

メールフォーム

名前:
メール:
件名:
本文:

Extra

プロフィール

みやちかんたろう

Author:みやちかんたろう
種別:きいろいねこ
年齢:10歳
性別:オス
趣味:昆虫採集
twitter:@gatsupport

※このサイトはリンクフリーです。ご自由にリンクしてください。相互リンクもじゃんじゃん募集中です!!

最新記事

最新コメント

最新トラックバック

月別アーカイブ