Your SlideShare is downloading. ×
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
㉔cocos2dでゲームを作ろう!その2
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

㉔cocos2dでゲームを作ろう!その2

7,646

Published on

https://www.facebook.com/TonosamaLabo

https://www.facebook.com/TonosamaLabo

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,646
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. cocos2d 2.0for iPhone 勉強会 cocos2dでゲームを作ろう! その2
  • 2. 動作環境•  Mac OS X 10.8 Mountain Lion•  xcode 4.5.1•  cocos2d for iPhone 2.0 http://www.cocos2d-iphone.org/
  • 3. はじめに•  cocos2dで簡単なゲームを作ってみよ う!のその2•  ゲームのメイン部分をつくってみよう!
  • 4. もくじ•  前回のおさらい•  MainSceneを作ろう•  カウントダウンを作る•  ゲームスタート•  メインルーチン•  忍者の動き•  なんでこうするか•  忍者タッチ!•  TIPS•  まとめ
  • 5. 前回のおさらい•  まずはおさらい!
  • 6. 忍者タッチ!•  次々と現れる忍者をたおしていこう!•  たまに、偽物があらわれて、たおすとお手 つきに!•  ライフは3個!なくなるとゲームオーバー
  • 7. ルール•  タイトル画面でボタンを押すとゲーム開始•  カウントダウン(3・2・1)のあと、ゲー ム開始•  上から忍者が現れるので、タッチでたおす•  倒すのが遅いと、忍者の攻撃を受けてライフ が1減る•  たまに、偽物の忍者が現れる•  偽物は、タッチしたら、ライフが1減る•  ライフが0になったら、ゲームオーバーにな り、タイトル画面に戻る
  • 8. がめんこうせいタイトルscene メインscene
  • 9. タイトルscene•  フロントlayer –  スコア•  タイトルlayer –  タイトルロゴ –  スタートボタン•  背景layer –  背景画像
  • 10. メインscene•  フロントlayer –  スコア –  残機表示•  メインlayer –  カウントダウン、ゲームオーバー –  エフェクト(+1、 ) –  忍者•  背景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. こんなかんじ2-(void)tick:(ccTime)dt{switch (self.mode) { case MODE_INIT: [self.mainLayer gameStart]; self.mode = MODE_PLAY; break;
  • 17. こんなかんじ3 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. こんなかんじ1-(void)gameStart{ self.mode =MAIN_LAYER_MODE_START; [[SimpleAudioEngine sharedEngine]stopBackgroundMusic]; [self animeCount4];}
  • 21. こんなかんじ2-(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. こんなかんじ3NSMutableArray* 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:selfselector:@selector(animeCount3:)]]; id action; action = [CCSequence actionWithArray:actions]; [sp runAction:action];}
  • 23. かいせつ•  アクションを順番に配列に入れていく•  CCCallFuncNで、関数を呼び出せる!•  画像をフェードイン→ちょっとまつ→ フェードアウト→関数呼び出し!•  このちょうしで、ルール画像→3→2→1 →0と表示していく!•  0の時は、ゲーム開始を呼ぶ!
  • 24. こんなかんじ4-(void)animeCountEnd:(id)node{ [noderemoveFromParentAndCleanup: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 = [GameDatagetInstance]; 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. こんなかんじ1-(void)tick:(ccTime)dt{ self.tickCount += dt; if(self.mode ==MAIN_LAYER_MODE_PLAY){ [self gamePlay:dt]; }}
  • 33. こんなかんじ2-(void)gamePlay:(ccTime)dt{ [self addNinja]; for(Ninja *ninja in self.ninjaArray){ [ninja tick:dt]; }}
  • 34. こんなかんじ3-(void)addNinja{ CCSpriteBatchNode *bn =(CCSpriteBatchNode*)[selfgetChildByTag:OBJECT_MAIN]; GameData *gameData = [GameDatagetInstance]; 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. 忍者のステータス1•  NINJA_STATUS_INIT –  忍者の初期表示をおこなう –  standCountを初期化(どれだけ立ってる か) –  忍者か偽物かきめる –  座標を決める –  登場のアクションを開始 –  NINJA_STATUS_MOVEにする –  アクションが終わったら、animeMoveEnd
  • 38. 忍者のステータス2•  NINJA_STATUS_MOVE –  忍者登場中 –  特になにもしない(アクションが終わったら 変更される)
  • 39. animeMoveEnd•  登場のアクションが終わったら呼ばれる! –  左右どちらかの向きでキャラを表示 –  表示座標を少し下に –  NINJA_STATUS_STANDにする
  • 40. 忍者のステータス3•  NINJA_STATUS_STAND –  standCountをデクリメント –  standCountがなくなくなってるか判定 •  正面をむく(にせものはこける) attackNinjyaEnd •  消えていくアクション(おわったら、 animeActionEndをよぶ) •  忍者の場合は、攻撃(親レイヤーの actionAttackNinjaを呼ぶ) •  NINJA_STATUS_ACTIONにする
  • 41. 忍者のステータス4•  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. タッチイベントをひろう1-(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. タッチイベントをひろう2if(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の 場合で、矩形内がタッチされてるか判定 (ほかのステータスの場合は、タッチで きない)•  忍者の場合は、スコア+1(親レイヤー のactionAddScoreを呼ぶ)•  偽物の場合は、ライフ­1(親レイヤーの 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. おわり主催(共同開催):株式会社 gooyahttp://www.gooya.co.jp/メドレー株式会社http://www.medley.co.jp/講師:西田 寛輔 (Tonosamart)http://www.facebook.com/tonosamart

×