Cocos2dでRPG(第14回iPhone名古屋勉強会発表資料)

1,776 views
1,660 views

Published on

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

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

No Downloads
Views
Total views
1,776
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
8
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Cocos2dでRPG(第14回iPhone名古屋勉強会発表資料)

  1. 1. cocos2d使ってみました! 山平 誠 (開発者名:makohira) 2013年3月16日 ©makohira2013
  2. 2. 目次 自己紹介 アプリの紹介 cocos2dとTiledMap 最後に ©makohira2013
  3. 3. 自己紹介 名前:山平誠 住所:愛知県尾張旭市  facebook.com/Makoto.Yamahira  @makohira 普段の仕事:業務系SE 家で:スマホアプリ開発 趣味:英語、飲み会、カラオケ・・・ ©makohira2013
  4. 4. 2013年2月15日 「英文法クエスト」 をリリースしました。 (2本目のアプリです。) アプリの紹介 ©makohira2013
  5. 5. 英文法クエストは ロールプレイングゲーム形式 の英文法学習アプリです。 ©makohira2013
  6. 6. 画面は こんな感じ。 ©makohira2013
  7. 7. cocos2dとTiledMap 今回の開発では ①cocos2d-iphone ②TiledMap にかなり助けられました。 ©makohira2013
  8. 8. cocos2d-iphone アニメーションの実装がラク。 パーティクル効果の実装がラク。 TiledMapの実装がラク。 ◎良かった点 ©makohira2013
  9. 9. ◎アニメーションの実装がラク。 // 5秒かけて右に50ピクセル移動。 [someObject runAction:[CCMoveBy actionWithDuration:5.0f position:CGPointMake(50, 0)]]; ©makohira2013
  10. 10. ◎アニメーションの実装がラク。 // 5秒かけて右に50ピクセル移動。 [someObject runAction:[CCMoveBy actionWithDuration:5.0f position:CGPointMake(50, 0)]]; 1行で書けます。 ©makohira2013
  11. 11. ◎パーティクル効果の実装がラク。 ①ParticleDesignerでパーティクルを作成し cocod2d(plist)形式で保存する。 ParticleDesigner ©makohira2013
  12. 12. ②保存したファイルをプロジェクトに追加し、 次のようなコードを書く。 // パーティクルの実装 CCParticleSystemQuad *particle = [CCParticleSystemQuad particleWithFile:@"test_particle.plist"]; [self addChild:particle]; ©makohira2013
  13. 13. ②保存したファイルをプロジェクトに追加し、 次のようなコードを書く。 // パーティクルの実装 CCParticleSystemQuad *particle = [CCParticleSystemQuad particleWithFile:@"test_particle.plist"]; [self addChild:particle]; 2行で書けます。 ©makohira2013
  14. 14. ②保存したファイルをプロジェクトに追加し、 次のようなコードを書く。 // パーティクルの実装 CCParticleSystemQuad *particle = [CCParticleSystemQuad particleWithFile:@"test_particle.plist"]; [self addChild:particle]; 実行結果 2行で書けます。 ©makohira2013
  15. 15. ◎TiledMapの実装がラク。 後で説明します。。 ©makohira2013
  16. 16. cocos2d-iphone 書籍が少ない。 ×悪かった点 ©makohira2013
  17. 17. ◎書籍が少ない。 cocos2d関係の書籍が少なかったです。 古い書籍はcocos2dの古いバージョン を使っていたりするので読み解くのが大変でした。 ©makohira2013
  18. 18. 私は次の3つの書籍で勉強しました。 ①cocos2dでつくるiPhoneゲーム(工学社) ②Learn cococ2d 2 Game Development for iOS(Apress) ③cocos2dで作る iPhone&iPadゲームプログラミング(インプレスジャパン) ©makohira2013
  19. 19. 私は次の3つの書籍で勉強しました。 ①cocos2dでつくるiPhoneゲーム(工学社) ②Learn cococ2d 2 Game Development for iOS(Apress) ③cocos2dで作る iPhone&iPadゲームプログラミング(インプレスジャパン) 最新版に対応しており、 分かりやすいが 情報量が少し足りない。 ©makohira2013
  20. 20. 私は次の3つの書籍で勉強しました。 ①cocos2dでつくるiPhoneゲーム(工学社) ②Learn cococ2d 2 Game Development for iOS(Apress) ③cocos2dで作る iPhone&iPadゲームプログラミング(インプレスジャパン) 最新版に対応しており、 分かりやすいが 情報量が少し足りない。 最新版に対応しており、 情報量も十分あるが 英語で書かれている。 ©makohira2013
  21. 21. 私は次の3つの書籍で勉強しました。 ①cocos2dでつくるiPhoneゲーム(工学社) ②Learn cococ2d 2 Game Development for iOS(Apress) ③cocos2dで作る iPhone&iPadゲームプログラミング(インプレスジャパン) 最新版に対応しており、 分かりやすいが 情報量が少し足りない。 最新版に対応しており、 情報量も十分あるが 英語で書かれている。 左の書籍の日本語版だが、 cocos2dの最新版に 対応していない。 ©makohira2013
  22. 22. TiledMap マップ用のチップを作成。 テクスチャを作成。 Tiled Mapを作成。 cocos2dを使うと実装がラク。 ©makohira2013
  23. 23. ◎マップ用のチップを作成。 画像編集ソフトなどでチップを作ります。 ©makohira2013
  24. 24. ◎テクスチャを作成。 TexturePackerというソフトを使いました。 複数のチップ用画像を1枚の画像にしてくれます。 cocos2d用のplistファイルも自動で作ってくれます。 TexturePacker ©makohira2013
  25. 25. ◎Tiled Mapを作成。 Tiled Map Editor(Tiled Qt) というフリーソフトを使いました。 Tiled Qt タイルレイヤーとオブジェクトレイヤー という2種類のレイヤーが結構使えました。©makohira2013
  26. 26. Tiled Qtで保存したファイルは拡張子が(.tmx) というものになります。 このファイルはcocos2dでそのまま利用することができます。 ©makohira2013
  27. 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. 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を使うと実装がラク。 4行で書けます。 ©makohira2013
  29. 29. 実行結果 ©makohira2013
  30. 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. 31. 実行結果 元の位置 ©makohira2013
  32. 32. 実行結果 元の位置 指定した位置 ©makohira2013
  33. 33. makohiraは 今後もスマートフォン向けのアプリ開発 を継続して行っていきたいと思います。 今後ともよろしくお願いします。 ご清聴ありがとうございました。 最後に ©makohira2013

×