㉓cocos2dでゲームを作ろう！その１

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

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

はじめに•  cocos2dで簡単なゲームを作ってみよう！のその１•  ゲームの仕様を決めて、タイトル画面をつくってみよう！

もくじ•  ゲームの仕様を決めよう•  素材を作成しよう•  音楽を用意しよう•  ゲーム作りのコツ①•  sceneの実装方法•  タイトル画面を作ろう

ゲームの仕様をきめよう•  どんなゲームを作るか考えよう！

とりあえず•  画面をタッチして敵を倒す感じの単純なゲームを作ろう！•  固定画面で、もぐらたたきみたいな感じ•  面クリアとかはなしで、スコアアタックだけ

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

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

scene遷移を考えよう•  どんなsceneがいるか考えよう –  タイトルscene –  カウント（３・２・１）scene –  ゲームscene –  ゲームオーバーscene

sceneを分ける？わけない？•  sceneを分けると、プログラムを分割して作れるので開発は楽になる！•  そのぶん、ファイルなどはわかれるので、ちょっと面倒かも•  画面上のキャラクターなどは、基本的には引き継げないので、sceneを分けるときは考慮しよう

まとめてみよう•  タイトルscene•  メインscene –  カウント（３・２・１） –  ゲーム –  ゲームオーバー※今回は、ボリュームが小さいものを作りたいので、メインsceneに、カウントやゲームオーバーの処理をまとめよう！

こんなかんじ！タイトルscene メインscene

ゲームの仕様をきめよう•  とりあえず、ざっくりと素材を作ろう！

必要な絵を洗い出す•  sceneごとに必要な絵をあらいだそう！•  sceneのlayer構造、スプライトの重ね順を考えてスプライトシートにまとめよう！

画面構成•  画面の単位をSceneといいます•  Sceneには、複数のLayerを重ね合わせておくことができます。•  Layerには、複数のSpriteなど、いろいろなものをおくことができます。

Layerは重ね合わせが可能引用：http://www.cocos2d-‐iphone.org/wiki/doku.php/prog_guide:basic_concepts

スプライトシート•  １枚の画像ファイルに１枚の画像を保存するのではなく、１枚の画像に複数画像を保存する技術•  ファイルアクセスが減るので読み込み効率がよくなる！•  画像をまとめるので、メモリ上での無駄が減る！•  １回の描画で複数のキャラクターを書けるので描画速度が上がる！•  スプライトシートごとに、表示順がきまるので、同じ奥行きに配置するものをまとめる必要がある

TexturePacker•  スプライトシートが簡単に作れる！•  対応フォーマットが多い•  圧縮や原色、@2x画像の自動作成もしてくれる！ –  http://www.codeandweb.com/ texturepacker

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

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

素材を作成•  画像を作成し、スプライトシートにまとめよう！

スコア•  点数表示に必要な画像を用意します。•  CCLabelAtlas用にpngファイルを作成•  人という文字を出すために、#$を人にしています。

タイトルロゴ、スタートボタン•  PLAYボタンは、CCMenuを使うため、押した時の画像（黒っぽいやつ）を用意します

背景画像•  背景画像は単色なので、画像ではなく CCLayerColorを使うことにします。（なので、画像なし！）

エフェクト•  ドット感をだすために、マス目画像を作って一番上に重ねることにします。

カウントダウン•  カウントダウン（３，２，１，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 caﬀ -d ima4@22050

ゲーム作りのコツ①•  とりあえず、最初に画面構成や素材を用意しておくとプログラムが楽！•  あとで差し替えもできるので、適当に用意しておこう！

sceneの実装方法•  どうやって実装していくか考えよう！

クラスに分けてみよう•  scene毎、layer毎にクラスをつくろう！•  分けることによりメリットが！ –  ソースが整理される！ –  スコア表示などのlayerの使い回しができる！•  デメリットも・・・ –  layer間、scene間の制御が面倒かも

制御はどこでやる？•  MainSceneに処理を集中させる –  見通しが良くなって、各sceneの処理がすっきりする！ –  当たり判定やイベントなどがあるため、完全に処理を sceneだけでやるのは難しい•  各レイヤーに処理を分散させる –  当たり判定やイベントの処理などが楽！ –  scene遷移などがどこで行われてるかよくわからなくなるなど、見通しが悪くなる→どっちもどっちなので、適当に分散させて言い感じにすればいいと思う！（大規模になったら、画面遷移はMainSceneなどのルールを作ろう！）

sceneとlayerのやりとり•  delegateを実装する –  ちょっと面倒。でもわかりやすい！•  sceneからlayerを監視する –  layerにフラグなどを用意し、変化を監視する•  layerからsceneを経由して、やりとりをする –  parentが取得できるので、layerのparentで sceneを取得して、やりとりをする→他にも方法はある！。一長一短なので、適当に良い感じにやるといいと思う！

データのやり取り•  ゲームのデータを保持するGameDataクラスを作ってデータのやり取りをしよう！•  シングルトンにして、どこからでもアクセスできるようにしよう！

GameData.h@interface GameData : NSObject@property int score;@property int life;@property ﬂoat ninjaSpeed;@property int ninjaMax;+ (GameData*)getInstance;@end

タイトル画面の実装•  タイトル画面を作ってみよう

TitleScene•  背景layer、タイトルlayer、フロント layerを表示しよう！•  画面が表示されたら音楽を鳴らそう！•  タイトルlayerを監視して、スタートボタンが押されたら、メインsceneに移動しよう！

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;}

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)]]; }}

FrontLayer•  点数と残機を表示しよう。あと、マス目の画像。•  タイトル画面では、点数は変わらないので最初の一回だけでいいけど、ゲーム中は都度点数が変わるので、点数表示のメソッドをpublicで用意しておこう！

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];}

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]];}

タイトルlayer•  ロゴと、スタートボタンを表示しよう•  スタートボタンがおされたら、isStartを YESにしよう！（TitleSceneで監視する奴！）

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];

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);

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;}

全体のまとめ•  タイトルscene –  フロントlayer •  スコア表示、残機表示 –  タイトルlayer •  ロゴ表示、スタートボタン表示 •  スタートボタンが押されたら、isStart=YES –  背景layer •  背景画像表示※タイトルsceneでは、タイトルlayerのisStartを監視して、YESになったらscene遷移

まとめ•  画面遷移ができるようになった！•  レイヤーとかが作れるようになった！•  あとは、ゲーム画面をつくってみよう！•  cocos2d 1.0.の資料だけど、参考に！ –  http://tonosamart.com/blog/

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

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

㉓cocos2dでゲームを作ろう！その１

by Nishida Kansuke on Sep 16, 2012

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 4,295

Statistics