https://www.facebook.com/TonosamaLabo

1. cocos2d 2.0for iPhone
勉強会
cocos2dでゲームを作ろう！
その２

2. 動作環境
• Mac OS X 10.8 Mountain Lion
• xcode 4.5.1
• cocos2d for iPhone 2.0
http://www.cocos2d-iphone.org/

3. はじめに
• cocos2dで簡単なゲームを作ってみよ
う！のその２
• ゲームのメイン部分をつくってみよう！

4. もくじ
• 前回のおさらい
• MainSceneを作ろう
• カウントダウンを作る
• ゲームスタート
• メインルーチン
• 忍者の動き
• なんでこうするか
• 忍者タッチ！
• TIPS
• まとめ

5. 前回のおさらい
• まずはおさらい！

6. 忍者タッチ！
• 次々と現れる忍者をたおしていこう！
• たまに、偽物があらわれて、たおすとお手
つきに！
• ライフは３個！なくなるとゲームオーバー

7. ルール
• タイトル画面でボタンを押すとゲーム開始
• カウントダウン（３・２・１）のあと、ゲー
ム開始
• 上から忍者が現れるので、タッチでたおす
• 倒すのが遅いと、忍者の攻撃を受けてライフ
が１減る
• たまに、偽物の忍者が現れる
• 偽物は、タッチしたら、ライフが１減る
• ライフが０になったら、ゲームオーバーにな
り、タイトル画面に戻る

8. がめんこうせい
タイトルscene メインscene

9. タイトルscene
• フロントlayer
– スコア
• タイトルlayer
– タイトルロゴ
– スタートボタン
• 背景layer
– 背景画像

10. メインscene
• フロントlayer
– スコア
– 残機表示
• メインlayer
– カウントダウン、ゲームオーバー
– エフェクト（＋１、 ）
– 忍者
• 背景layer
– 背景画像

11. 音楽素材について①
• 音楽素材については、PANICPUMPKIN様
のご好意により、使用させていただいてい
ます。
• http://panicpumpkin.omiki.com/
• ゲームBGMに特化したサイトなのでおす
すめ！（曲数も多いです）
• 利用報告、 著作表記、リンクなどの明記
不要で商用利用可能の音楽素材を多数公
開されています。

12. 音楽素材について②
• 有料でオリジナル曲を制作してもらえる
「PANSOUND」というサイトもあるので、
ぜひ利用してみてください！
• http://pansound.com/

13. MainSceneを作ろう
• MainSceneを作ってみよう！

14. こんなかんじ
-(id)init{
self = [super init];
if (self) {
self.bgLayer = [CCLayerColor layerWithColor:ccc4(36, 36, 255, 255)];
[self addChild:self.bgLayer z:LAYER_BG tag:LAYER_BG];
GameData *gameData = [GameData getInstance];
gameData.score = 0;
gameData.life = 3;
self.frontLayer = [FrontLayer node];
[self addChild:self.frontLayer z:LAYER_FRONT tag:LAYER_FRONT];
self.mainLayer = [MainLayer node];
[self addChild:self.mainLayer z:LAYER_MAIN tag:LAYER_MAIN];
self.mode = MODE_INIT;
}
return self;
}

15. かいせつ
• FrontLayer は同じ物を使いまわす！（け
ど、同じインスタンスだとなんかうまくい
かない時があったりしたので、新しいのを
作りなおす）
• MainLayer にゲームの内容を実装してい
く！
• 点数の初期化をする！

16. こんなかんじ２
-(void)tick:(ccTime)dt{
switch (self.mode) {
case MODE_INIT:
[self.mainLayer gameStart];
self.mode = MODE_PLAY;
break;

17. こんなかんじ３
case MODE_PLAY:
if(self.mainLayer.isEndGame){
[[CCDirector sharedDirector] replaceScene:
[CCTransitionFade transitionWithDuration:1.0f scene:
[TitleScene node] withColor:ccc3(0, 0, 0)]];
}
break;
default:
break;
}
[self.frontLayer drawData];
}

18. かいせつ
• mainLayerのgameStartをよびだす。
• self.mainLayer.isEndGameがYESになる
まで監視する。（YESになったら、タイ
トル画面に戻る）

19. カウントダウンを作る
• いきなりゲームが始まっても心の準備がで
きない！
• ゲームのルールとカウントダウンを表示し
てみよう！

20. こんなかんじ１
-(void)gameStart{
self.mode =
MAIN_LAYER_MODE_START;
[[SimpleAudioEngine sharedEngine]
stopBackgroundMusic];
[self animeCount4];
}

21. こんなかんじ２
-(void)animeCount4{
CCSpriteBatchNode *gameBatchNode =
(CCSpriteBatchNode*)[self getChildByTag:OBJECT_GAME];
[[SimpleAudioEngine sharedEngine] playEffect:@"count.caf"];
CCSprite *sp;
sp = [CCSprite spriteWithSpriteFrameName:@"info.png"];
sp.position = ccp(160, 240);
sp.opacity = 0;
[gameBatchNode addChild:sp z:SPRITE_MAIN_TXT];

22. こんなかんじ３
NSMutableArray* actions = [NSMutableArray array];
[actions addObject:[CCFadeIn actionWithDuration:0.4f
* COUNT_RATE]];
[actions addObject:[CCDelayTime actionWithDuration:
2.6f * COUNT_RATE]];
[actions addObject:[CCFadeOut actionWithDuration:
0.4f * COUNT_RATE]];
[actions addObject:[CCCallFuncN actionWithTarget:self
selector:@selector(animeCount3:)]];
id action;
action = [CCSequence actionWithArray:actions];
[sp runAction:action];
}

23. かいせつ
• アクションを順番に配列に入れていく
• CCCallFuncNで、関数を呼び出せる！
• 画像をフェードイン→ちょっとまつ→
フェードアウト→関数呼び出し！
• このちょうしで、ルール画像→３→２→１
→０と表示していく！
• ０の時は、ゲーム開始を呼ぶ！

24. こんなかんじ４
-(void)animeCountEnd:(id)node{
[node
removeFromParentAndCleanup:YES];
[[SimpleAudioEngine sharedEngine]
playBackgroundMusic:@"main.caf"];
[self gameInit];
}

25. かいせつ
• スプライトを削除するときは、 [node
removeFromParentAndCleanup:YES];
でスプライトを親から削除する！（親か
らスプライトを削除するとうまくいかな
いので注意！）

26. ゲームスタート
• いよいよゲームかいし！
• まずは、初期値を設定！

27. こんなかんじ
-(void)gameInit{
self.mode = MAIN_LAYER_MODE_PLAY;
self.ninjaArray = [NSMutableArray array];
GameData *gameData = [GameData
getInstance];
gameData.ninjaMax = 1;
gameData.ninjaSpeed = 0.9f;
[self setLevel];
}

28. かいせつ
• self.ninjaArrayを初期化する！この配列
で忍者をコントロール！
• 忍者の最大人数や速度の初期値を設定！

29. なんいどのちょうせい
-(void)setLevel{
GameData *gameData = [GameData getInstance];
if(gameData.score > ((gameData.ninjaMax * 5) *
gameData.ninjaMax)){
gameData.ninjaMax++;
}
gameData.ninjaSpeed = 1.0f - (gameData.ninjaMax * 0.05f);
if(gameData.ninjaSpeed < 0.4f){
gameData.ninjaSpeed = 0.4f;
}
}

30. かいせつ
• 点数に応じて、忍者の最大人数を計算！
• 忍者の最大人数に合わせて、スピードを早
くする！（あんまりはやすぎるとゲームに
ならないので、調整する！）

31. メインルーチン
• メインルーチンを実装しよう！
• 割り込みごとに、忍者を動かす感じ！

32. こんなかんじ１
-(void)tick:(ccTime)dt{
self.tickCount += dt;
if(self.mode ==
MAIN_LAYER_MODE_PLAY){
[self gamePlay:dt];
}
}

33. こんなかんじ２
-(void)gamePlay:(ccTime)dt{
[self addNinja];
for(Ninja *ninja in self.ninjaArray){
[ninja tick:dt];
}
}

34. こんなかんじ３
-(void)addNinja{
CCSpriteBatchNode *bn =
(CCSpriteBatchNode*)[self
getChildByTag:OBJECT_MAIN];
GameData *gameData = [GameData
getInstance];
for(int i = self.ninjaArray.count; i <
gameData.ninjaMax; ++i){
Ninja *ninja = [[[Ninja alloc]init] autorelease];
ninja.parentLayer = self;
[self.ninjaArray addObject:ninja];
[bn addChild:ninja.sprite z:(i * 100)];
}
}

35. かいせつ
• MAIN_LAYER_MODE_PLAYのときだけ
gamePlayをよぶ！
• gamePlayの中では、addNinjaで忍者の
最大人数分の忍者を配列に入れる！
• 配列の中の忍者にたいして、 [ninja
tick:dt]をよびだす！

36. 忍者の動き
• 忍者は、Ninjaクラスでつくられている！
• tickが呼ばれたら、Ninjaクラス内のス
テータスを見て動作を行う！

37. 忍者のステータス１
• NINJA_STATUS_INIT
– 忍者の初期表示をおこなう
– standCountを初期化（どれだけ立ってる
か）
– 忍者か偽物かきめる
– 座標を決める
– 登場のアクションを開始
– NINJA_STATUS_MOVEにする
– アクションが終わったら、animeMoveEnd

38. 忍者のステータス２
• NINJA_STATUS_MOVE
– 忍者登場中
– 特になにもしない（アクションが終わったら
変更される）

39. animeMoveEnd
• 登場のアクションが終わったら呼ばれる！
– 左右どちらかの向きでキャラを表示
– 表示座標を少し下に
– NINJA_STATUS_STANDにする

40. 忍者のステータス３
• NINJA_STATUS_STAND
– standCountをデクリメント
– standCountがなくなくなってるか判定
• 正面をむく（にせものはこける）
attackNinjyaEnd
• 消えていくアクション（おわったら、
animeActionEndをよぶ）
• 忍者の場合は、攻撃（親レイヤーの
actionAttackNinjaを呼ぶ）
• NINJA_STATUS_ACTIONにする

41. 忍者のステータス４
• NINJA_STATUS_ACTION
– 忍者が攻撃（こける）して、消えるまで

42. actionAttackNinja
• 手裏剣を投げるアクション（にせものが
タッチされた時の場合は、 印を出す）
• アクションが終わったら、
attackNinjyaEnd（attackMissEnd）を
呼んで、 印を削除

43. attackNinjyaEnd
• ライフを-1する
• gameOverCheck

44. gameOverCheck
• ライフが-1なら、ゲームオーバーのアク
ション
• アクションが終わったら、
animeGameOverEndがよばれて、
self.isEndGame がYESになる！

45. animeActionEnd
• NINJA_STATUS_INITにする

46. ここまでのまとめ
• メインscene
– フロントlayer
• スコア表示、残機表示
– メインlayer
• カウント表示
• 忍者をうごかす
• ライフがなくなったら、isEndGame=YES
– 背景layer
• 背景画像表示
※メインsceneでは、isEndGameを監視して、
YESになったらタイトル画面にscene遷移

47. なんでこうするか
• メインシーンでの処理が簡単になる
– 忍者の数を増やす（配列に入れる）
– 忍者を一人ずつ動かす
– くらったら、ライフを減らす
• 他の動きをするキャラクターの追加が簡
単（Ninjaクラスっぽいのをつくればい
い！）
• もちろん、ほかにも色々方法はあるとお
もう！

48. デメリット
• 忍者クラスでの処理と、メインレイヤーで
の処理の切り分けが必要。冗長になった
り、逆にわかりづらくなることも！→
ルールを決めてわかりやすくなる工夫をし
よう！（今回は、スコア表示や 印表示は
忍者クラスにいれないとかのルールで実装
しました。）

49. 忍者タッチ！
• メインシーンに処理追加！
– 忍者の数を増やす（配列に入れる）
– 忍者を一人ずつ動かす
– くらったら、ライフを減らす
– タッチイベントをひろう
– たっちされたら、点数アップ！

50. タッチイベントをひろう１
-(void)ccTouchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
if(self.mode == MAIN_LAYER_MODE_PLAY){
for(UITouch* touch in touches){
CGPoint touchPoint = [touch locationInView:[touch view]];
touchPoint = [[CCDirector sharedDirector]
convertToGL:touchPoint];
BOOL ret = NO;
for(Ninja *ninja in self.ninjaArray){
if(ninja.type == NINJA_TYPE_NINJA){
ret = [ninja touch:touchPoint];
if(ret){
break;
}
}
}

51. タッチイベントをひろう２
if(ret == NO){
for(Ninja *ninja in self.ninjaArray){
if(ninja.type == NINJA_TYPE_DUMMY){
ret = [ninja touch:touchPoint];
if(ret){
break;
}
}
}
}
}
}
}

52. かいせつ
• タッチされた座標を取得
• 忍者のうち、本物の忍者に対して[ninja
touch:touchPoint];をよんで当たり判定を
チェック！（一人でもヒットしたら終わり）
• 忍者のうち、偽物の忍者に対して[ninja
touch:touchPoint];をよんで当たり判定を
チェック！（一人でもヒットしたら終わり）
• こうすることで、忍者が重なっても偽物を倒
したことにならない！

53. touch
• ステータスがNINJA_STATUS_STANDの
場合で、矩形内がタッチされてるか判定
（ほかのステータスの場合は、タッチで
きない）
• 忍者の場合は、スコア＋１（親レイヤー
のactionAddScoreを呼ぶ）
• 偽物の場合は、ライフ­１（親レイヤーの
actionAttackNinjaを呼ぶ）

54. TIPS1
• スプライトの画像を変える
– sf = [[CCSpriteFrameCache sharedSpriteFrameCache]
spriteFrameByName:@"ninTouch_07.png"];
– [self.sprite setDisplayFrame:sf];

55. TIPS2
• アニメーションを同時に実行
– [actions addObject:[CCSpawn actions:
– [CCFadeIn actionWithDuration:
0.5f * gameData.ninjaSpeed],
– [CCMoveTo actionWithDuration:
0.5f * gameData.ninjaSpeed position:ccp(x, y)],
– nil]];

56. まとめ
• 簡単なゲームがつくれるようになったか
も！
• cocos2d 1.0.の資料だけど、参考に！
– http://tonosamart.com/blog/

57. とのさまラボ！
• 勉強会に参加した人どうしのコミニュティがほしい！
勉強会の開催日時の告知がほしい！
という意見をみなさまからいただいたので、
コミニュティを作成しました！
ぜひ「いいね！」をお願いします！
https://www.facebook.com/TonosamaLabo

58. おわり
主催（共同開催）：
株式会社 gooya
http://www.gooya.co.jp/
メドレー株式会社
http://www.medley.co.jp/
講師：西田 寛輔 (Tonosamart)
http://www.facebook.com/tonosamart