Your SlideShare is downloading. ×
㉓cocos2dでゲームを作ろう!その1
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でゲームを作ろう!その1

8,845
views

Published on

https://www.facebook.com/TonosamaLabo

https://www.facebook.com/TonosamaLabo

Published in: Technology

0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
8,845
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
11
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でゲームを作ろう! その1
  • 2. 動作環境•  Mac OS X 10.8 Mountain Lion•  xcode 4.4.1•  cocos2d for iPhone 2.0 http://www.cocos2d-iphone.org/
  • 3. はじめに•  cocos2dで簡単なゲームを作ってみよ う!のその1•  ゲームの仕様を決めて、タイトル画面をつ くってみよう!
  • 4. もくじ•  ゲームの仕様を決めよう•  素材を作成しよう•  音楽を用意しよう•  ゲーム作りのコツ①•  sceneの実装方法•  タイトル画面を作ろう
  • 5. ゲームの仕様をきめよう•  どんなゲームを作るか考えよう!
  • 6. とりあえず•  画面をタッチして敵を倒す感じの単純な ゲームを作ろう!•  固定画面で、もぐらたたきみたいな感じ•  面クリアとかはなしで、スコアアタックだ け
  • 7. 忍者タッチ!•  次々と現れる忍者をたおしていこう!•  たまに、偽物があらわれて、倒すとお手つ きに!•  ライフは3個!なくなるとゲームオーバー
  • 8. ルールを考えよう•  タイトル画面でボタンを押すとゲーム開始•  カウントダウン(3・2・1)のあと、ゲー ム開始•  上から忍者が現れるので、タッチでたおす•  倒すのが遅いと、忍者の攻撃を受けてライフ が1減る•  たまに、偽物の忍者が現れる•  偽物は、タッチしたら、ライフが1減る•  ライフが0になったら、ゲームオーバーにな り、タイトル画面に戻る
  • 9. scene遷移を考えよう•  どんなsceneがいるか考えよう –  タイトルscene –  カウント(3・2・1)scene –  ゲームscene –  ゲームオーバーscene
  • 10. sceneを分ける?わけない?•  sceneを分けると、プログラムを分割して 作れるので開発は楽になる!•  そのぶん、ファイルなどはわかれるので、 ちょっと面倒かも•  画面上のキャラクターなどは、基本的に は引き継げないので、sceneを分けるとき は考慮しよう
  • 11. まとめてみよう•  タイトルscene•  メインscene –  カウント(3・2・1) –  ゲーム –  ゲームオーバー※今回は、ボリュームが小さいものを作りたいので、メインsceneに、カウントやゲームオーバーの処理をまとめよう!
  • 12. こんなかんじ!タイトルscene メインscene
  • 13. ゲームの仕様をきめよう•  とりあえず、ざっくりと素材を作ろ う!
  • 14. 必要な絵を洗い出す•  sceneごとに必要な絵をあらいだそう!•  sceneのlayer構造、スプライトの重ね順 を考えてスプライトシートにまとめよう!
  • 15. 画面構成•  画面の単位をSceneといいます•  Sceneには、複数のLayerを重ね合わせて おくことができます。•  Layerには、複数のSpriteなど、いろいろ なものをおくことができます。
  • 16. Layerは重ね合わせが可能引用:http://www.cocos2d-­‐iphone.org/wiki/doku.php/prog_guide:basic_concepts    
  • 17. スプライトシート•  1枚の画像ファイルに1枚の画像を保存するので はなく、1枚の画像に複数画像を保存する技術•  ファイルアクセスが減るので読み込み効率がよく なる!•  画像をまとめるので、メモリ上での無駄が減る!•  1回の描画で複数のキャラクターを書けるので描 画速度が上がる!•  スプライトシートごとに、表示順がきまるので、 同じ奥行きに配置するものをまとめる必要がある
  • 18. TexturePacker•  スプライトシートが簡単に作れる!•  対応フォーマットが多い•  圧縮や原色、@2x画像の自動作成もして くれる! –  http://www.codeandweb.com/ texturepacker
  • 19. タイトルscene•  フロントlayer –  スコア•  タイトルlayer –  タイトルロゴ –  スタートボタン•  背景layer –  背景画像
  • 20. メインscene•  フロントlayer –  スコア –  残機表示•  メインlayer –  カウントダウン、ゲームオーバー –  エフェクト(+1、 ) –  忍者•  背景layer –  背景画像
  • 21. 素材を作成•  画像を作成し、スプライトシートにまとめ よう!
  • 22. スコア•  点数表示に必要な画像を用意します。•  CCLabelAtlas用にpngファイルを作成•  人という文字を出すために、#$を人にし ています。
  • 23. タイトルロゴ、スタートボタン•  PLAYボタンは、CCMenuを使うため、押 した時の画像(黒っぽいやつ)を用意し ます
  • 24. 背景画像•  背景画像は単色なので、画像ではなく CCLayerColorを使うことにします。(な ので、画像なし!)
  • 25. エフェクト•  ドット感をだすために、 マス目画像を作って一番 上に重ねることにします。
  • 26. カウントダウン•  カウントダウン(3,2, 1,GO!)や、GAMEOVER の画像をまとめます。
  • 27. エフェクト•  忍者の上に重ねて出るエフェクトについて は、別のスプライトシートにまとめます。
  • 28. 忍者•  忍者などの画像をま とめます。
  • 29. 残機表示•  CCLabelAtlas用にpng ファイルを作成します。•  画像がムダですが、プログ ラムが楽なので今回はこの 方式で!
  • 30. 音楽を用意しよう•  ゲームにあった音楽を用意しよう!
  • 31. 音楽と効果音•  タイトル画面と、ゲーム画面、二種類の音 楽を用意しよう!•  効果音も用意しよう!(カウントダウン、 敵を倒す、敵に攻撃を受ける、ゲームオー バー)•  ファイル形式はcafにしよう!
  • 32. 音楽素材について①•  音楽素材については、PANICPUMPKIN様 のご好意により、使用させていただいてい ます。•  http://panicpumpkin.omiki.com/•  ゲームBGMに特化したサイトなのでおす すめ!(曲数も多いです)•  利用報告、 著作表記、リンクなどの明記 不要で商用利用可能の音楽素材を多数公 開されています。
  • 33. 音楽素材について②•  有料でオリジナル曲を制作してもらえる 「PANSOUND」というサイトもあるので、 ぜひ利用してみてください!•  http://pansound.com/
  • 34. 効果音作成•  cfxr –  http://thirdcog.eu/apps/cfxr –  効果音作成ソフト –  無料
  • 35. cafの変換•  toCaf –  http://tonosamart.com/tonolib/mac/ toCaf/ –  音楽ファイルをcaf変換 –  無料 TIPS: afconvert -f caff -d ima4@22050
  • 36. ゲーム作りのコツ①•  とりあえず、最初に画面構成や素材を 用意しておくとプログラムが楽!•  あとで差し替えもできるので、適当に 用意しておこう!
  • 37. sceneの実装方法•  どうやって実装していくか考えよう!
  • 38. クラスに分けてみよう•  scene毎、layer毎にクラスをつくろう!•  分けることによりメリットが! –  ソースが整理される! –  スコア表示などのlayerの使い回しができる!•  デメリットも・・・ –  layer間、scene間の制御が面倒かも
  • 39. 制御はどこでやる?•  MainSceneに処理を集中させる –  見通しが良くなって、各sceneの処理がすっきりする! –  当たり判定やイベントなどがあるため、完全に処理を sceneだけでやるのは難しい•  各レイヤーに処理を分散させる –  当たり判定やイベントの処理などが楽! –  scene遷移などがどこで行われてるかよくわからなくなる など、見通しが悪くなる→どっちもどっちなので、適当に分散させて言い感じにすればいいと思う!(大規模になったら、画面遷移はMainSceneなどのルールを作ろう!)
  • 40. sceneとlayerのやりとり•  delegateを実装する –  ちょっと面倒。でもわかりやすい!•  sceneからlayerを監視する –  layerにフラグなどを用意し、変化を監視する•  layerからsceneを経由して、やりとりをする –  parentが取得できるので、layerのparentで sceneを取得して、やりとりをする→他にも方法はある!。一長一短なので、適当に良い感じにやるといいと思う!
  • 41. データのやり取り•  ゲームのデータを保持するGameDataク ラスを作ってデータのやり取りをしよう!•  シングルトンにして、どこからでもアクセ スできるようにしよう!
  • 42. GameData.h@interface GameData : NSObject@property int score;@property int life;@property float ninjaSpeed;@property int ninjaMax;+ (GameData*)getInstance;@end
  • 43. タイトル画面の実装•  タイトル画面を作ってみよう
  • 44. TitleScene•  背景layer、タイトルlayer、フロント layerを表示しよう!•  画面が表示されたら音楽を鳴らそう!•  タイトルlayerを監視して、スタートボタ ンが押されたら、メインsceneに移動しよ う!
  • 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. 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. FrontLayer•  点数と残機を表示しよう。あと、マス目 の画像。•  タイトル画面では、点数は変わらないので 最初の一回だけでいいけど、ゲーム中は都 度点数が変わるので、点数表示のメソッド をpublicで用意しておこう!
  • 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. 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. タイトルlayer•  ロゴと、スタートボタンを表示しよう•  スタートボタンがおされたら、isStartを YESにしよう!(TitleSceneで監視する 奴!)
  • 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. 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. 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. 全体のまとめ•  タイトルscene –  フロントlayer •  スコア表示、残機表示 –  タイトルlayer •  ロゴ表示、スタートボタン表示 •  スタートボタンが押されたら、isStart=YES –  背景layer •  背景画像表示※タイトルsceneでは、タイトルlayerのisStartを監視して、YESになったらscene遷移
  • 55. まとめ•  画面遷移ができるようになった!•  レイヤーとかが作れるようになった!•  あとは、ゲーム画面をつくってみよう!•  cocos2d 1.0.の資料だけど、参考に! –  http://tonosamart.com/blog/
  • 56. とのさまラボ!•  勉強会に参加した人どうしのコミニュティがほしい! 勉強会の開催日時の告知がほしい! という意見をみなさまからいただいたので、 コミニュティを作成しました! ぜひ「いいね!」をお願いします!https://www.facebook.com/TonosamaLabo  
  • 57. おわり主催(共同開催):株式会社 gooyahttp://www.gooya.co.jp/メドレー株式会社http://www.medley.co.jp/講師:西田 寛輔 (Tonosamart)http://www.facebook.com/tonosamart