Cocos2d-iphoneを使ってロールプレイングゲームを作ってみました。 第１４回iPhone名古屋勉強会の発表資料です。

1. cocos2d使ってみました！
山平 誠
（開発者名：makohira）
2013年3月16日
©makohira2013

2. 目次
自己紹介
アプリの紹介
cocos2dとTiledMap
最後に
©makohira2013

3. 自己紹介
名前：山平誠
住所：愛知県尾張旭市
facebook.com/Makoto.Yamahira
@makohira
普段の仕事：業務系SE
家で：スマホアプリ開発
趣味：英語、飲み会、カラオケ・・・
©makohira2013

4. 2013年2月15日
「英文法クエスト」
をリリースしました。
（２本目のアプリです。）
アプリの紹介
©makohira2013

5. 英文法クエストは
ロールプレイングゲーム形式
の英文法学習アプリです。
©makohira2013

6. 画面は
こんな感じ。
©makohira2013

7. cocos2dとTiledMap
今回の開発では
①cocos2d-iphone
②TiledMap
にかなり助けられました。
©makohira2013

8. cocos2d-iphone
アニメーションの実装がラク。
パーティクル効果の実装がラク。
TiledMapの実装がラク。
◎良かった点
©makohira2013

9. ◎アニメーションの実装がラク。
// 5秒かけて右に50ピクセル移動。
[someObject runAction:[CCMoveBy actionWithDuration:5.0f
position:CGPointMake(50, 0)]];
©makohira2013

10. ◎アニメーションの実装がラク。
// 5秒かけて右に50ピクセル移動。
[someObject runAction:[CCMoveBy actionWithDuration:5.0f
position:CGPointMake(50, 0)]];
１行で書けます。
©makohira2013

11. ◎パーティクル効果の実装がラク。
①ParticleDesignerでパーティクルを作成し
cocod2d(plist)形式で保存する。
ParticleDesigner
©makohira2013

12. ②保存したファイルをプロジェクトに追加し、
次のようなコードを書く。
// パーティクルの実装
CCParticleSystemQuad *particle =
[CCParticleSystemQuad particleWithFile:@"test_particle.plist"];
[self addChild:particle];
©makohira2013

13. ②保存したファイルをプロジェクトに追加し、
次のようなコードを書く。
// パーティクルの実装
CCParticleSystemQuad *particle =
[CCParticleSystemQuad particleWithFile:@"test_particle.plist"];
[self addChild:particle];
２行で書けます。
©makohira2013

14. ②保存したファイルをプロジェクトに追加し、
次のようなコードを書く。
// パーティクルの実装
CCParticleSystemQuad *particle =
[CCParticleSystemQuad particleWithFile:@"test_particle.plist"];
[self addChild:particle];
実行結果
２行で書けます。
©makohira2013

15. ◎TiledMapの実装がラク。
後で説明します。。
©makohira2013

16. cocos2d-iphone
書籍が少ない。
×悪かった点
©makohira2013

17. ◎書籍が少ない。
cocos2d関係の書籍が少なかったです。
古い書籍はcocos2dの古いバージョン
を使っていたりするので読み解くのが大変でした。
©makohira2013

18. 私は次の３つの書籍で勉強しました。
①cocos2dでつくるiPhoneゲーム（工学社）
②Learn cococ2d 2 Game Development for iOS（Apress）
③cocos2dで作る iPhone&iPadゲームプログラミング（インプレスジャパン）
©makohira2013

19. 私は次の３つの書籍で勉強しました。
①cocos2dでつくるiPhoneゲーム（工学社）
②Learn cococ2d 2 Game Development for iOS（Apress）
③cocos2dで作る iPhone&iPadゲームプログラミング（インプレスジャパン）
最新版に対応しており、
分かりやすいが
情報量が少し足りない。
©makohira2013

20. 私は次の３つの書籍で勉強しました。
①cocos2dでつくるiPhoneゲーム（工学社）
②Learn cococ2d 2 Game Development for iOS（Apress）
③cocos2dで作る iPhone&iPadゲームプログラミング（インプレスジャパン）
最新版に対応しており、
分かりやすいが
情報量が少し足りない。
最新版に対応しており、
情報量も十分あるが
英語で書かれている。
©makohira2013

21. 私は次の３つの書籍で勉強しました。
①cocos2dでつくるiPhoneゲーム（工学社）
②Learn cococ2d 2 Game Development for iOS（Apress）
③cocos2dで作る iPhone&iPadゲームプログラミング（インプレスジャパン）
最新版に対応しており、
分かりやすいが
情報量が少し足りない。
最新版に対応しており、
情報量も十分あるが
英語で書かれている。
左の書籍の日本語版だが、
cocos2dの最新版に
対応していない。
©makohira2013

22. TiledMap
マップ用のチップを作成。
テクスチャを作成。
Tiled Mapを作成。
cocos2dを使うと実装がラク。
©makohira2013

23. ◎マップ用のチップを作成。
画像編集ソフトなどでチップを作ります。
©makohira2013

24. ◎テクスチャを作成。
TexturePackerというソフトを使いました。
複数のチップ用画像を１枚の画像にしてくれます。
cocos2d用のplistファイルも自動で作ってくれます。
TexturePacker
©makohira2013

25. ◎Tiled Mapを作成。
Tiled Map Editor（Tiled Qt）
というフリーソフトを使いました。
Tiled Qt
タイルレイヤーとオブジェクトレイヤー
という２種類のレイヤーが結構使えました。©makohira2013

26. Tiled Qtで保存したファイルは拡張子が（.tmx）
というものになります。
このファイルはcocos2dでそのまま利用することができます。
©makohira2013

27. tmxファイル、マップチップ用の画像ファイル、マップチ
ップ用のplistファイルをプロジェクトに追加し、
次のようなコードを書く。
// TiledMap用のチップ画像の準備
CCSpriteFrameCache *frameCache =
[CCSpriteFrameCache sharedSpriteFrameCache];
[frameCache addSpriteFramesWithFile:@"map_items.plist"];
// TiledMapの表示
CCTMXTiledMap *tiledMap =
[CCTMXTiledMap tiledMapWithTMXFile:@"field_map.tmx"];
[self addChild:tiledMap];
◎cocos2dを使うと実装がラク。
©makohira2013

28. tmxファイル、マップチップ用の画像ファイル、マップチ
ップ用のplistファイルをプロジェクトに追加し、
次のようなコードを書く。
// TiledMap用のチップ画像の準備
CCSpriteFrameCache *frameCache =
[CCSpriteFrameCache sharedSpriteFrameCache];
[frameCache addSpriteFramesWithFile:@"map_items.plist"];
// TiledMapの表示
CCTMXTiledMap *tiledMap =
[CCTMXTiledMap tiledMapWithTMXFile:@"field_map.tmx"];
[self addChild:tiledMap];
◎cocos2dを使うと実装がラク。
４行で書けます。
©makohira2013

29. 実行結果
©makohira2013

30. TiledMapの表示位置はpositionプロパティで設定できます。
// TiledMapの表示位置を設定
int x = 84;
int y = 19;
float mapItemSizeX =
(tiledMap.tileSize.width / CC_CONTENT_SCALE_FACTOR()) * tiledMap.scaleX;
float mapItemSizeY =
(tiledMap.tileSize.height / CC_CONTENT_SCALE_FACTOR()) * tiledMap.scaleY;
int itemCountY = tiledMap.mapSize.height;
tiledMap.position =
CGPointMake(-(x * mapItemSizeX), -(itemCountY - y) * mapItemSizeY);
©makohira2013

31. 実行結果
元の位置
©makohira2013

32. 実行結果
元の位置 指定した位置
©makohira2013

33. makohiraは
今後もスマートフォン向けのアプリ開発
を継続して行っていきたいと思います。
今後ともよろしくお願いします。
ご清聴ありがとうございました。
最後に
©makohira2013