https://www.facebook.com/TonosamaLabo

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

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

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

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

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

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

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

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

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

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

11. まとめてみよう
• タイトルscene
• メインscene
– カウント（３・２・１）
– ゲーム
– ゲームオーバー
※今回は、ボリュームが小さいものを作り
たいので、メイン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. スプライトシート
• １枚の画像ファイルに１枚の画像を保存するので
はなく、１枚の画像に複数画像を保存する技術
• ファイルアクセスが減るので読み込み効率がよく
なる！
• 画像をまとめるので、メモリ上での無駄が減る！
• １回の描画で複数のキャラクターを書けるので描
画速度が上がる！
• スプライトシートごとに、表示順がきまるので、
同じ奥行きに配置するものをまとめる必要がある

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

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

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

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

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

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

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

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

26. カウントダウン
• カウントダウン（３，２，
１，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_FRONT
tag:LAYER_FRONT];
self.titleLayer = [TitleLayer node];
[self addChild:self.titleLayer z:LAYER_TITLE
tag: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*)[self
getChildByTag:OBJECT_SCORE];
[label setString:[NSString stringWithFormat:@"%5d#$",
gameData.score]];
label = (CCLabelAtlas*)[self
getChildByTag: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 = [CCSpriteBatchNode
batchNodeWithFile:@"title.pvr.ccz" capacity:30];
[self addChild:titleBatchNode z:OBJECT_TITLE
tag:OBJECT_TITLE];
CCSprite *sp;
sp = [CCSprite spriteWithSpriteFrameName:@"logo.png"];
sp.position = ccp(160, 300);
[titleBatchNode addChild:sp];

52. TitleLayer.m
CCSprite* dsp;
sp = [CCSprite spriteWithSpriteFrameName:@"play.png"];
dsp = [CCSprite spriteWithSpriteFrameName:@"playx.png"];
CCMenuItemSprite *playItem = [CCMenuItemSprite
itemWithNormalSprite:sp
selectedSprite:dsp
disabledSprite:nil
target:self
selector:@selector(menuPlay:)];
playItem.position = ccp(160, 136);

53. TitleLayer.m
CCMenu *menu = [CCMenu
menuWithItems:playItem , nil];
menu.position = ccp(0, 0);
[self addChild:menu z:OBJECT_MENU
tag: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. おわり
主催（共同開催）：
株式会社 gooya
http://www.gooya.co.jp/
メドレー株式会社
http://www.medley.co.jp/
講師：西田 寛輔 (Tonosamart)
http://www.facebook.com/tonosamart