cocos2d 2.0for iPhone       勉強会 cocos2dでゲームを作ろう!        その1
動作環境•  Mac OS X 10.8 Mountain Lion•  xcode 4.4.1•  cocos2d for iPhone 2.0 http://www.cocos2d-iphone.org/
はじめに•  cocos2dで簡単なゲームを作ってみよ   う!のその1•  ゲームの仕様を決めて、タイトル画面をつ   くってみよう!
もくじ•    ゲームの仕様を決めよう•    素材を作成しよう•    音楽を用意しよう•    ゲーム作りのコツ①•    sceneの実装方法•    タイトル画面を作ろう
ゲームの仕様をきめよう•  どんなゲームを作るか考えよう!
とりあえず•  画面をタッチして敵を倒す感じの単純な   ゲームを作ろう!•  固定画面で、もぐらたたきみたいな感じ•  面クリアとかはなしで、スコアアタックだ   け
忍者タッチ!•  次々と現れる忍者をたおしていこう!•  たまに、偽物があらわれて、倒すとお手つ   きに!•  ライフは3個!なくなるとゲームオーバー
ルールを考えよう•  タイトル画面でボタンを押すとゲーム開始•  カウントダウン(3・2・1)のあと、ゲー   ム開始•  上から忍者が現れるので、タッチでたおす•  倒すのが遅いと、忍者の攻撃を受けてライフ   が1減る•  たまに、偽物の忍...
scene遷移を考えよう•  どんなsceneがいるか考えよう –  タイトルscene –  カウント(3・2・1)scene –  ゲームscene –  ゲームオーバーscene
sceneを分ける?わけない?•  sceneを分けると、プログラムを分割して   作れるので開発は楽になる!•  そのぶん、ファイルなどはわかれるので、   ちょっと面倒かも•  画面上のキャラクターなどは、基本的に   は引き継げないので、...
まとめてみよう•  タイトルscene•  メインscene –  カウント(3・2・1) –  ゲーム –  ゲームオーバー※今回は、ボリュームが小さいものを作りたいので、メインsceneに、カウントやゲームオーバーの処理をまとめよう!
こんなかんじ!タイトルscene   メインscene
ゲームの仕様をきめよう•  とりあえず、ざっくりと素材を作ろ   う!
必要な絵を洗い出す•  sceneごとに必要な絵をあらいだそう!•  sceneのlayer構造、スプライトの重ね順   を考えてスプライトシートにまとめよう!
画面構成•  画面の単位をSceneといいます•  Sceneには、複数のLayerを重ね合わせて   おくことができます。•  Layerには、複数のSpriteなど、いろいろ   なものをおくことができます。
Layerは重ね合わせが可能引用:http://www.cocos2d-­‐iphone.org/wiki/doku.php/prog_guide:basic_concepts	  	  
スプライトシート•  1枚の画像ファイルに1枚の画像を保存するので   はなく、1枚の画像に複数画像を保存する技術•  ファイルアクセスが減るので読み込み効率がよく   なる!•  画像をまとめるので、メモリ上での無駄が減る!•  1回の描画で...
TexturePacker•  スプライトシートが簡単に作れる!•  対応フォーマットが多い•  圧縮や原色、@2x画像の自動作成もして   くれる! –  http://www.codeandweb.com/    texturepacker
タイトルscene•  フロントlayer  –  スコア•  タイトルlayer  –  タイトルロゴ  –  スタートボタン•  背景layer  –  背景画像
メインscene•  フロントlayer  –  スコア  –  残機表示•  メインlayer  –  カウントダウン、ゲームオーバー  –  エフェクト(+1、 )  –  忍者•  背景layer  –  背景画像
素材を作成•  画像を作成し、スプライトシートにまとめ   よう!
スコア•  点数表示に必要な画像を用意します。•  CCLabelAtlas用にpngファイルを作成•  人という文字を出すために、#$を人にし   ています。
タイトルロゴ、スタートボタン•  PLAYボタンは、CCMenuを使うため、押   した時の画像(黒っぽいやつ)を用意し   ます
背景画像•  背景画像は単色なので、画像ではなく   CCLayerColorを使うことにします。(な   ので、画像なし!)
エフェクト•  ドット感をだすために、   マス目画像を作って一番   上に重ねることにします。
カウントダウン•  カウントダウン(3,2,   1,GO!)や、GAMEOVER   の画像をまとめます。
エフェクト•  忍者の上に重ねて出るエフェクトについて   は、別のスプライトシートにまとめます。
忍者•  忍者などの画像をま   とめます。
残機表示•  CCLabelAtlas用にpng   ファイルを作成します。•  画像がムダですが、プログ   ラムが楽なので今回はこの   方式で!
音楽を用意しよう•  ゲームにあった音楽を用意しよう!
音楽と効果音•  タイトル画面と、ゲーム画面、二種類の音   楽を用意しよう!•  効果音も用意しよう!(カウントダウン、   敵を倒す、敵に攻撃を受ける、ゲームオー   バー)•  ファイル形式はcafにしよう!
音楽素材について①•  音楽素材については、PANICPUMPKIN様   のご好意により、使用させていただいてい   ます。•  http://panicpumpkin.omiki.com/•  ゲームBGMに特化したサイトなのでおす   す...
音楽素材について②•  有料でオリジナル曲を制作してもらえる   「PANSOUND」というサイトもあるので、   ぜひ利用してみてください!•  http://pansound.com/
効果音作成•  cfxr  –  http://thirdcog.eu/apps/cfxr  –  効果音作成ソフト  –  無料
cafの変換•  toCaf  –  http://tonosamart.com/tonolib/mac/     toCaf/  –  音楽ファイルをcaf変換  –  無料  TIPS:  afconvert -f caff -d ima4@...
ゲーム作りのコツ①•  とりあえず、最初に画面構成や素材を   用意しておくとプログラムが楽!•  あとで差し替えもできるので、適当に   用意しておこう!
sceneの実装方法•  どうやって実装していくか考えよう!
クラスに分けてみよう•  scene毎、layer毎にクラスをつくろう!•  分けることによりメリットが! –  ソースが整理される! –  スコア表示などのlayerの使い回しができる!•  デメリットも・・・ –  layer間、scene...
制御はどこでやる?•  MainSceneに処理を集中させる –  見通しが良くなって、各sceneの処理がすっきりする! –  当たり判定やイベントなどがあるため、完全に処理を    sceneだけでやるのは難しい•  各レイヤーに処理を分散...
sceneとlayerのやりとり•  delegateを実装する –  ちょっと面倒。でもわかりやすい!•  sceneからlayerを監視する –  layerにフラグなどを用意し、変化を監視する•  layerからsceneを経由して、やり...
データのやり取り•  ゲームのデータを保持するGameDataク   ラスを作ってデータのやり取りをしよう!•  シングルトンにして、どこからでもアクセ   スできるようにしよう!
GameData.h@interface GameData : NSObject@property   int score;@property   int life;@property   float ninjaSpeed;@property  ...
タイトル画面の実装•  タイトル画面を作ってみよう
TitleScene•  背景layer、タイトルlayer、フロント   layerを表示しよう!•  画面が表示されたら音楽を鳴らそう!•  タイトルlayerを監視して、スタートボタ   ンが押されたら、メインsceneに移動しよ   う!
TitleScene.m-(id)init{    self = [super init];    if (self) {        self.bgLayer = [CCLayerColor layerWithColor:ccc4(36, ...
TitleScene.m- (void)onEnterTransitionDidFinish{    [[SimpleAudioEngine sharedEngine]playBackgroundMusic:@"title.caf"];    ...
FrontLayer•  点数と残機を表示しよう。あと、マス目   の画像。•  タイトル画面では、点数は変わらないので   最初の一回だけでいいけど、ゲーム中は都   度点数が変わるので、点数表示のメソッド   をpublicで用意しておこう!
FrontLayer.m-(void)initLayer{   CCSprite* sprite = [CCSprite spriteWithFile:@"fg.png"];   sprite.position = ccp(160, 240);...
FrontLayer.m-(void)drawData{   GameData *gameData = [GameData getInstance];  CCLabelAtlas *label;  label = (CCLabelAtlas*)...
タイトルlayer•  ロゴと、スタートボタンを表示しよう•  スタートボタンがおされたら、isStartを   YESにしよう!(TitleSceneで監視する   奴!)
TitleLayer.m-(void)initLayer{   // SPRITE   [[CCSpriteFrameCache sharedSpriteFrameCache]addSpriteFramesWithFile:@"title.pl...
TitleLayer.mCCSprite* dsp;   sp = [CCSprite spriteWithSpriteFrameName:@"play.png"];   dsp = [CCSprite spriteWithSpriteFram...
TitleLayer.m   CCMenu *menu = [CCMenumenuWithItems:playItem , nil];   menu.position = ccp(0, 0);   [self addChild:menu z:O...
全体のまとめ•  タイトルscene –  フロントlayer   •  スコア表示、残機表示 –  タイトルlayer   •  ロゴ表示、スタートボタン表示   •  スタートボタンが押されたら、isStart=YES –  背景layer...
まとめ•    画面遷移ができるようになった!•    レイヤーとかが作れるようになった!•    あとは、ゲーム画面をつくってみよう!•    cocos2d 1.0.の資料だけど、参考に!     –  http://tonosamart....
とのさまラボ!•  勉強会に参加した人どうしのコミニュティがほしい!   勉強会の開催日時の告知がほしい! という意見をみなさまからいただいたので、 コミニュティを作成しました! ぜひ「いいね!」をお願いします!https://www.face...
おわり主催(共同開催):株式会社 gooyahttp://www.gooya.co.jp/メドレー株式会社http://www.medley.co.jp/講師:西田 寛輔 (Tonosamart)http://www.facebook.com/...
Upcoming SlideShare
Loading in …5
×

㉓cocos2dでゲームを作ろう!その1

9,421 views

Published on

https://www.facebook.com/TonosamaLabo

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

No Downloads
Views
Total views
9,421
On SlideShare
0
From Embeds
0
Number of Embeds
6,132
Actions
Shares
0
Downloads
0
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

㉓cocos2dでゲームを作ろう!その1

  1. 1. cocos2d 2.0for iPhone 勉強会 cocos2dでゲームを作ろう! その1
  2. 2. 動作環境•  Mac OS X 10.8 Mountain Lion•  xcode 4.4.1•  cocos2d for iPhone 2.0 http://www.cocos2d-iphone.org/
  3. 3. はじめに•  cocos2dで簡単なゲームを作ってみよ う!のその1•  ゲームの仕様を決めて、タイトル画面をつ くってみよう!
  4. 4. もくじ•  ゲームの仕様を決めよう•  素材を作成しよう•  音楽を用意しよう•  ゲーム作りのコツ①•  sceneの実装方法•  タイトル画面を作ろう
  5. 5. ゲームの仕様をきめよう•  どんなゲームを作るか考えよう!
  6. 6. とりあえず•  画面をタッチして敵を倒す感じの単純な ゲームを作ろう!•  固定画面で、もぐらたたきみたいな感じ•  面クリアとかはなしで、スコアアタックだ け
  7. 7. 忍者タッチ!•  次々と現れる忍者をたおしていこう!•  たまに、偽物があらわれて、倒すとお手つ きに!•  ライフは3個!なくなるとゲームオーバー
  8. 8. ルールを考えよう•  タイトル画面でボタンを押すとゲーム開始•  カウントダウン(3・2・1)のあと、ゲー ム開始•  上から忍者が現れるので、タッチでたおす•  倒すのが遅いと、忍者の攻撃を受けてライフ が1減る•  たまに、偽物の忍者が現れる•  偽物は、タッチしたら、ライフが1減る•  ライフが0になったら、ゲームオーバーにな り、タイトル画面に戻る
  9. 9. scene遷移を考えよう•  どんなsceneがいるか考えよう –  タイトルscene –  カウント(3・2・1)scene –  ゲームscene –  ゲームオーバーscene
  10. 10. sceneを分ける?わけない?•  sceneを分けると、プログラムを分割して 作れるので開発は楽になる!•  そのぶん、ファイルなどはわかれるので、 ちょっと面倒かも•  画面上のキャラクターなどは、基本的に は引き継げないので、sceneを分けるとき は考慮しよう
  11. 11. まとめてみよう•  タイトルscene•  メインscene –  カウント(3・2・1) –  ゲーム –  ゲームオーバー※今回は、ボリュームが小さいものを作りたいので、メインsceneに、カウントやゲームオーバーの処理をまとめよう!
  12. 12. こんなかんじ!タイトルscene メインscene
  13. 13. ゲームの仕様をきめよう•  とりあえず、ざっくりと素材を作ろ う!
  14. 14. 必要な絵を洗い出す•  sceneごとに必要な絵をあらいだそう!•  sceneのlayer構造、スプライトの重ね順 を考えてスプライトシートにまとめよう!
  15. 15. 画面構成•  画面の単位をSceneといいます•  Sceneには、複数のLayerを重ね合わせて おくことができます。•  Layerには、複数のSpriteなど、いろいろ なものをおくことができます。
  16. 16. Layerは重ね合わせが可能引用:http://www.cocos2d-­‐iphone.org/wiki/doku.php/prog_guide:basic_concepts    
  17. 17. スプライトシート•  1枚の画像ファイルに1枚の画像を保存するので はなく、1枚の画像に複数画像を保存する技術•  ファイルアクセスが減るので読み込み効率がよく なる!•  画像をまとめるので、メモリ上での無駄が減る!•  1回の描画で複数のキャラクターを書けるので描 画速度が上がる!•  スプライトシートごとに、表示順がきまるので、 同じ奥行きに配置するものをまとめる必要がある
  18. 18. TexturePacker•  スプライトシートが簡単に作れる!•  対応フォーマットが多い•  圧縮や原色、@2x画像の自動作成もして くれる! –  http://www.codeandweb.com/ texturepacker
  19. 19. タイトルscene•  フロントlayer –  スコア•  タイトルlayer –  タイトルロゴ –  スタートボタン•  背景layer –  背景画像
  20. 20. メインscene•  フロントlayer –  スコア –  残機表示•  メインlayer –  カウントダウン、ゲームオーバー –  エフェクト(+1、 ) –  忍者•  背景layer –  背景画像
  21. 21. 素材を作成•  画像を作成し、スプライトシートにまとめ よう!
  22. 22. スコア•  点数表示に必要な画像を用意します。•  CCLabelAtlas用にpngファイルを作成•  人という文字を出すために、#$を人にし ています。
  23. 23. タイトルロゴ、スタートボタン•  PLAYボタンは、CCMenuを使うため、押 した時の画像(黒っぽいやつ)を用意し ます
  24. 24. 背景画像•  背景画像は単色なので、画像ではなく CCLayerColorを使うことにします。(な ので、画像なし!)
  25. 25. エフェクト•  ドット感をだすために、 マス目画像を作って一番 上に重ねることにします。
  26. 26. カウントダウン•  カウントダウン(3,2, 1,GO!)や、GAMEOVER の画像をまとめます。
  27. 27. エフェクト•  忍者の上に重ねて出るエフェクトについて は、別のスプライトシートにまとめます。
  28. 28. 忍者•  忍者などの画像をま とめます。
  29. 29. 残機表示•  CCLabelAtlas用にpng ファイルを作成します。•  画像がムダですが、プログ ラムが楽なので今回はこの 方式で!
  30. 30. 音楽を用意しよう•  ゲームにあった音楽を用意しよう!
  31. 31. 音楽と効果音•  タイトル画面と、ゲーム画面、二種類の音 楽を用意しよう!•  効果音も用意しよう!(カウントダウン、 敵を倒す、敵に攻撃を受ける、ゲームオー バー)•  ファイル形式はcafにしよう!
  32. 32. 音楽素材について①•  音楽素材については、PANICPUMPKIN様 のご好意により、使用させていただいてい ます。•  http://panicpumpkin.omiki.com/•  ゲームBGMに特化したサイトなのでおす すめ!(曲数も多いです)•  利用報告、 著作表記、リンクなどの明記 不要で商用利用可能の音楽素材を多数公 開されています。
  33. 33. 音楽素材について②•  有料でオリジナル曲を制作してもらえる 「PANSOUND」というサイトもあるので、 ぜひ利用してみてください!•  http://pansound.com/
  34. 34. 効果音作成•  cfxr –  http://thirdcog.eu/apps/cfxr –  効果音作成ソフト –  無料
  35. 35. cafの変換•  toCaf –  http://tonosamart.com/tonolib/mac/ toCaf/ –  音楽ファイルをcaf変換 –  無料 TIPS: afconvert -f caff -d ima4@22050
  36. 36. ゲーム作りのコツ①•  とりあえず、最初に画面構成や素材を 用意しておくとプログラムが楽!•  あとで差し替えもできるので、適当に 用意しておこう!
  37. 37. sceneの実装方法•  どうやって実装していくか考えよう!
  38. 38. クラスに分けてみよう•  scene毎、layer毎にクラスをつくろう!•  分けることによりメリットが! –  ソースが整理される! –  スコア表示などのlayerの使い回しができる!•  デメリットも・・・ –  layer間、scene間の制御が面倒かも
  39. 39. 制御はどこでやる?•  MainSceneに処理を集中させる –  見通しが良くなって、各sceneの処理がすっきりする! –  当たり判定やイベントなどがあるため、完全に処理を sceneだけでやるのは難しい•  各レイヤーに処理を分散させる –  当たり判定やイベントの処理などが楽! –  scene遷移などがどこで行われてるかよくわからなくなる など、見通しが悪くなる→どっちもどっちなので、適当に分散させて言い感じにすればいいと思う!(大規模になったら、画面遷移はMainSceneなどのルールを作ろう!)
  40. 40. sceneとlayerのやりとり•  delegateを実装する –  ちょっと面倒。でもわかりやすい!•  sceneからlayerを監視する –  layerにフラグなどを用意し、変化を監視する•  layerからsceneを経由して、やりとりをする –  parentが取得できるので、layerのparentで sceneを取得して、やりとりをする→他にも方法はある!。一長一短なので、適当に良い感じにやるといいと思う!
  41. 41. データのやり取り•  ゲームのデータを保持するGameDataク ラスを作ってデータのやり取りをしよう!•  シングルトンにして、どこからでもアクセ スできるようにしよう!
  42. 42. GameData.h@interface GameData : NSObject@property int score;@property int life;@property float ninjaSpeed;@property int ninjaMax;+ (GameData*)getInstance;@end
  43. 43. タイトル画面の実装•  タイトル画面を作ってみよう
  44. 44. TitleScene•  背景layer、タイトルlayer、フロント layerを表示しよう!•  画面が表示されたら音楽を鳴らそう!•  タイトルlayerを監視して、スタートボタ ンが押されたら、メインsceneに移動しよ う!
  45. 45. TitleScene.m-(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]; self.frontLayer = [FrontLayer node]; [self addChild:self.frontLayer z:LAYER_FRONTtag:LAYER_FRONT]; self.titleLayer = [TitleLayer node]; [self addChild:self.titleLayer z:LAYER_TITLEtag:LAYER_TITLE]; } return self;}
  46. 46. TitleScene.m- (void)onEnterTransitionDidFinish{ [[SimpleAudioEngine sharedEngine]playBackgroundMusic:@"title.caf"]; [self schedule:@selector(tick:)];}-(void)tick:(ccTime)dt{ if(self.titleLayer.isStart){ self.titleLayer.isStart = NO; [[CCDirector sharedDirector] replaceScene:[CCTransitionFade transitionWithDuration:1.0f scene:[MainScene node] withColor:ccc3(0, 0, 0)]]; }}
  47. 47. FrontLayer•  点数と残機を表示しよう。あと、マス目 の画像。•  タイトル画面では、点数は変わらないので 最初の一回だけでいいけど、ゲーム中は都 度点数が変わるので、点数表示のメソッド をpublicで用意しておこう!
  48. 48. FrontLayer.m-(void)initLayer{ CCSprite* sprite = [CCSprite spriteWithFile:@"fg.png"]; sprite.position = ccp(160, 240); [self addChild:sprite z:OBJECT_FG tag:OBJECT_FG]; CCLabelAtlas *label; label = [[CCLabelAtlas alloc] initWithString:@"" charMapFile:@"score.png"itemWidth:48 itemHeight:64 startCharMap: ]; label.position = ccp(8, 416); [self addChild:label z:OBJECT_SCORE tag:OBJECT_SCORE]; label = [[CCLabelAtlas alloc] initWithString:@"" charMapFile:@"life.png" itemWidth:240 itemHeight:56 startCharMap:0]; label.position = ccp(0, 8); [self addChild:label z:OBJECT_LIFE tag:OBJECT_LIFE]; [self drawData];}
  49. 49. FrontLayer.m-(void)drawData{ GameData *gameData = [GameData getInstance]; CCLabelAtlas *label; label = (CCLabelAtlas*)[selfgetChildByTag:OBJECT_SCORE]; [label setString:[NSString stringWithFormat:@"%5d#$",gameData.score]]; label = (CCLabelAtlas*)[selfgetChildByTag:OBJECT_LIFE]; [label setString:[NSString stringWithFormat:@"%d",gameData.life]];}
  50. 50. タイトルlayer•  ロゴと、スタートボタンを表示しよう•  スタートボタンがおされたら、isStartを YESにしよう!(TitleSceneで監視する 奴!)
  51. 51. TitleLayer.m-(void)initLayer{ // SPRITE [[CCSpriteFrameCache sharedSpriteFrameCache]addSpriteFramesWithFile:@"title.plist"]; CCSpriteBatchNode *titleBatchNode = [CCSpriteBatchNodebatchNodeWithFile:@"title.pvr.ccz" capacity:30]; [self addChild:titleBatchNode z:OBJECT_TITLEtag:OBJECT_TITLE]; CCSprite *sp; sp = [CCSprite spriteWithSpriteFrameName:@"logo.png"]; sp.position = ccp(160, 300); [titleBatchNode addChild:sp];
  52. 52. TitleLayer.mCCSprite* dsp; sp = [CCSprite spriteWithSpriteFrameName:@"play.png"]; dsp = [CCSprite spriteWithSpriteFrameName:@"playx.png"]; CCMenuItemSprite *playItem = [CCMenuItemSpriteitemWithNormalSprite:sp selectedSprite:dsp disabledSprite:nil target:selfselector:@selector(menuPlay:)]; playItem.position = ccp(160, 136);
  53. 53. TitleLayer.m CCMenu *menu = [CCMenumenuWithItems:playItem , nil]; menu.position = ccp(0, 0); [self addChild:menu z:OBJECT_MENUtag:OBJECT_MENU];}-(void)menuPlay:(id)sender{ self.isStart = YES;}
  54. 54. 全体のまとめ•  タイトルscene –  フロントlayer •  スコア表示、残機表示 –  タイトルlayer •  ロゴ表示、スタートボタン表示 •  スタートボタンが押されたら、isStart=YES –  背景layer •  背景画像表示※タイトルsceneでは、タイトルlayerのisStartを監視して、YESになったらscene遷移
  55. 55. まとめ•  画面遷移ができるようになった!•  レイヤーとかが作れるようになった!•  あとは、ゲーム画面をつくってみよう!•  cocos2d 1.0.の資料だけど、参考に! –  http://tonosamart.com/blog/
  56. 56. とのさまラボ!•  勉強会に参加した人どうしのコミニュティがほしい! 勉強会の開催日時の告知がほしい! という意見をみなさまからいただいたので、 コミニュティを作成しました! ぜひ「いいね!」をお願いします!https://www.facebook.com/TonosamaLabo  
  57. 57. おわり主催(共同開催):株式会社 gooyahttp://www.gooya.co.jp/メドレー株式会社http://www.medley.co.jp/講師:西田 寛輔 (Tonosamart)http://www.facebook.com/tonosamart

×