Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
cocos2dを使った iPhoneゲーム開発の手法!-2/5(火) GMO Yours アプリ開発勉強会-               ハイパーメディアクリエイター	                 西田寛輔	  
ゲームをつくってみたい!でも、なんだか大変そう・・・
ここがたいへん!•  キャラクターを表示するのが大変•  アニメーションが大変•  処理速度を早くするのが大変•  画面遷移が大変•  音楽流すのが大変            ↓•  ゲームのアルゴリズムやデータ作成を作りた   いのに、裏側の...
ゲームエンジンをつかおう!•  ゲームを作るのに必要な機能がそろってい   る!(しかも高速!)•  ゲームのアルゴリズムや演出など作りこみ   たい部分に集中して開発ができる!
cocos2d•  cocos2d-iphone-2.0  –  http://www.cocos2d-iphone.org/
cocos2dについて•    オープンソース+無料で商用利用可能•    2Dに特化•    物理エンジン搭載(box2d,chipmunk)•    効果音やBGMの再生も可能•    OpenGL利用で高速描画•    Objective...
デメリット•  iPhone標準のUIが使えない。(がんばれ   ば使えるかも?)•  Objective-Cで記述するため他機種への移   植がたいへん><(移植前提の場合は、   クロスプラットフォームのcocos2d-Xが   使うといい...
こまったときは?•  こまったときは、プログラミングガイド   を見よう! –  http://www.cocos2d-iphone.org/wiki/    doku.php/prog_guide:index
cocos2dのいいところ①キャラクター表示が素敵!
スプライト•  スプライト(sprite):一般的には、キャラ   クターを表示する技術。•  スプライトエンジン:スプライトを簡単   に管理、表示できる仕組み                ↓•  大量のキャラクターを表示、管理するの   ...
スプライトシート•  1枚の画像ファイルに1枚の画像を保存す   るのではなく、1枚の画像に複数画像を   保存する技術•  ファイルアクセスが減るので読み込み効率   がよくなる!•  画像をまとめるので、メモリ上での無駄が   減る!•  ...
関連する機能•  CCSprite  –  回転、拡大、縮小、傾斜、透過•  CCSpriteBatchNode  –  スプライトシートを利用した表示•  CCAnimation  –  ぱらぱら漫画のような、画像切り替え•  CCActio...
便利ツール紹介①TexturePacker
TexturePacker•  スプライトシートが簡単に作れる!•  対応フォーマットが多い•  圧縮や原色、-hd画像の自動作成もしてく   れる! –  http://www.codeandweb.com/    texturepacker
ここが便利!•  キャラクターの画像が入っているフォルダを指   定すると、自動的にスプライトシートにまとめ   てくれる!•  画像ファイルは、retainaサイズのものを用意   (ファイル名に-hdは付けない)
ファイルを書き出す•  スプライトシート(.pvr.ccz)と、情報の   はいったファイル(.plist)がすぐ作れ   る!(retaina用の-hdも一緒にでき   る!)
メモ•  cocos2dではretaina用の画像に-hdをつ   けます!(@2xじゃないので注意!) ※設定で変更可能です。
cocos2dのいいところ②画面遷移が素敵!
Scene•  タイトル画面やゲーム中の画面など、   Sceneという単位で管理ができる!
エフェクト•  Sceneの切り替えの時に、エフェクトを   つけることが出来る!
関連する機能•  CCScene  –  シーン•  CCTransition  –  シーン切り替えのエフェクト
cocos2dのいいところ③レイヤー構造が素敵!
Sceneの中にはLayerをおける           Layerは、任意の順番で           重ね合わせることができ           る!
Layerは重ね合わせが可能引用:http://www.cocos2d-­‐iphone.org/wiki/doku.php/prog_guide:basic_concepts	  	  
Layerの中にはいろいろおける      CCSprite、CCMenu、CCLabelBMFont、	        CCSpriteBatchNode	        などを置くことができる
LayerとSpriteBatchNodeと        Sprite        •  Layer	              •  BatchNode(手裏剣系)	                  •  Sprite(手裏剣1)	  ...
関連する機能•  CCLayer  –  レイヤー•  CCLabelBMFont  –  ラベル•  CCMenu  –  メニュー表示(ボタン表示)
便利ツール紹介②CocosBuilder
CocosBuilder•  Sceneにパーツを配置して視覚的に画面が   作れる!•  補助ツールと言うよりは、オーサリング   ツールという感じ。http://cocosbuilder.com/
cocos2dのいいところ④パーティクルが素敵!
パーティクルって?•  小さい粒(パーティクル)を組み合わせて   色々な表現をするやつ!•  炎、爆発、キラキラ、ワープなどの表現を   簡単にすることができる!
多彩な表現•  たくさんのパラメーターを設定することで、   多彩な表現が可能!出現率、開始時の色、重力、	  大きさ、速度などを組み合わせて	  多彩な表現が可能!
くみこみれい CCParticleSystem* system = [CCParticleSystemQuadparticleWithFile:@"star.plist"];  system.position = ccp(x, y);  [se...
関連する機能•  CCParticleSystem  –  パーティクル
便利ツール紹介③ParticleDesigner
ParticleDesigner•  パーティクルを簡単にデザインできる! –  http://particledesigner.71squared.com/
retaina対応•  save asの時に、以下の設定で書きだそ   う!•  -hd画像を別に用意しておこう!
cocos2dのいいところ⑤マップ表示が素敵!
マップが簡単につかえる!•  2dや擬似3dのマップが簡単に使える!•  レイヤーを重ねたり、オブジェクトの配置   もできる!
くみこみれい CCTMXTiledMap *tileMap = [CCTMXTiledMaptiledMapWithTMXFile:@"title.tmx"];      [self addChild:tileMap z:kTagBgNode];
関連する機能•  CCTMXTiledMap –  マップ
便利ツール紹介④Tiled Map Editor
Tiled Map Editor•  マップエディタ!•  レイヤーを重ねたり、オブジェクトを配置   できるので便利! –  http://www.mapeditor.org/
retaina対応•  普通に書きだそう!•  .tmxファイルをコピーして、-hd.tmxにリ   ネームしよう!•  -hd画像を別に用意しておこう!•  テキストエディタでひらいて、書き換えよ   う!•  http://www.coco...
かきかえれい<map version="1.0" orientation="orthogonal" width="10" height="15"tilewidth="32" tileheight="32"> <tileset firstgid="...
cocos2dのいいところ⑥物理エンジン搭載が素敵!
物理エンジン!•  メジャーな物理エンジン、box2dと   chipmunkがつかえます。
テンプレートが選べる!
便利ツール紹介⑤PhysicsEditor
PhysicsEditor•  画像からbox2dなどで使う物理モデルを   つくってくれる!•  凸を組み合わせて、凹な形のやつも作って   くれる! –  http://www.codeandweb.com/    physicseditor
キャラクターを追加•  AddSpritesで、キャラクターを指定•  画像ファイルは、retainaサイズのものを   用意(ファイル名に-hdは付けない)
設定を変更①•  ExpoterをBox2D generic(PLIST)に変更•  PTM-Ratioを64に変更(retaina画像を元   に設定しているので、プログラムで設定し   たPTM-Ratioの2倍に設定する)
PTM-Ratioって?•  Box2Dの物理演算をするにあたって、何   pxを1mにするかの単位•  例えば、PTM-Ratioが32だったら、   32pxが1mになる。
シェイプの指定•  Shape Tracerを使って、各キャラごとに   シェイプを設定しよう!
基準点の指定•  Relativeに0.5を設定して、基準点を真ん   中にしよう!
ファイルを書き出す•  Publishでファイルが書きだされます
キャラクターを表示しよう!•  ファイルを追加しよう
読み込み用クラスを追加•  PhysicsEditorに付属しているクラスを追   加しよう!•  サンプルもついてくるから真似しよう!
くみこみれい①parent = [self getChildByTag:kTagCharsNode];sprite = [PhysicsSpritespriteWithSpriteFrameName:@ chr.png ];[parent ad...
くみこみれい②// Define the dynamic body.//Set up a 1m squared box in the physics worldbodyDef.type = b2_dynamicBody;bodyDef.posit...
関連する機能•  PhysicsSprite  –  物理演算用スプライト•  GB2ShapeCache  –  キャラクターのシェイプ
cocos2dのいいところ⑦音を鳴らすのが簡単で素敵!
簡単に音を鳴らせる!•  SimpleAudioEngineを使って簡単にBGM   のループ再生および、効果音の再生ができ   る!•  細かいことは出来ないので、例えばイント   ロ→メロディループとかは難しい。
関連機能•  SimpleAudioEngine  –  効果音、BGMを簡単に再生
まとめ•  cocos2d便利!いろんな機能がある!•  対応ツールがたくさんある!                 ↓•  cocos2d 1.0.の資料がおおいけど、参考   に! –  http://tonosamart.com/blog/
とのさまラボ!•  勉強会に参加した人どうしのコミニュティがほしい!   勉強会の開催日時の告知がほしい! という意見をみなさまからいただいたので、 コミニュティを作成しました!•  毎週木曜日は、もくもく勉強会も   開催しています! ぜひ「...
「もくもく」勉強会•  毎週木曜日に、「もくもく」勉強会やってます!•  場所は新宿!facebookページからお申し込みください!https://www.facebook.com/TonosamaLabo	  
Upcoming SlideShare
Loading in …5
×

Cocos2dを使ったi phoneゲーム開発手法

14,022 views

Published on

https://www.facebook.com/TonosamaLabo

Published in: Technology
  • Be the first to comment

Cocos2dを使ったi phoneゲーム開発手法

  1. 1. cocos2dを使った iPhoneゲーム開発の手法!-2/5(火) GMO Yours アプリ開発勉強会- ハイパーメディアクリエイター   西田寛輔  
  2. 2. ゲームをつくってみたい!でも、なんだか大変そう・・・
  3. 3. ここがたいへん!•  キャラクターを表示するのが大変•  アニメーションが大変•  処理速度を早くするのが大変•  画面遷移が大変•  音楽流すのが大変 ↓•  ゲームのアルゴリズムやデータ作成を作りた いのに、裏側の仕組みを作るのがたいへんす ぎる!
  4. 4. ゲームエンジンをつかおう!•  ゲームを作るのに必要な機能がそろってい る!(しかも高速!)•  ゲームのアルゴリズムや演出など作りこみ たい部分に集中して開発ができる!
  5. 5. cocos2d•  cocos2d-iphone-2.0 –  http://www.cocos2d-iphone.org/
  6. 6. cocos2dについて•  オープンソース+無料で商用利用可能•  2Dに特化•  物理エンジン搭載(box2d,chipmunk)•  効果音やBGMの再生も可能•  OpenGL利用で高速描画•  Objective-Cで書かれている•  採用実績が凄い!AppStoreに2500位上 のアプリがある!
  7. 7. デメリット•  iPhone標準のUIが使えない。(がんばれ ば使えるかも?)•  Objective-Cで記述するため他機種への移 植がたいへん><(移植前提の場合は、 クロスプラットフォームのcocos2d-Xが 使うといいかも!でも言語は違う)
  8. 8. こまったときは?•  こまったときは、プログラミングガイド を見よう! –  http://www.cocos2d-iphone.org/wiki/ doku.php/prog_guide:index
  9. 9. cocos2dのいいところ①キャラクター表示が素敵!
  10. 10. スプライト•  スプライト(sprite):一般的には、キャラ クターを表示する技術。•  スプライトエンジン:スプライトを簡単 に管理、表示できる仕組み ↓•  大量のキャラクターを表示、管理するの に適した仕組みが用意されている!
  11. 11. スプライトシート•  1枚の画像ファイルに1枚の画像を保存す るのではなく、1枚の画像に複数画像を 保存する技術•  ファイルアクセスが減るので読み込み効率 がよくなる!•  画像をまとめるので、メモリ上での無駄が 減る!•  1回の描画で複数のキャラクターを書け るので描画速度が上がる!
  12. 12. 関連する機能•  CCSprite –  回転、拡大、縮小、傾斜、透過•  CCSpriteBatchNode –  スプライトシートを利用した表示•  CCAnimation –  ぱらぱら漫画のような、画像切り替え•  CCAction –  キャラクターに任意の動きを設定可能 –  イベント処理 (CCSendMessage、CCCallFunc)
  13. 13. 便利ツール紹介①TexturePacker
  14. 14. TexturePacker•  スプライトシートが簡単に作れる!•  対応フォーマットが多い•  圧縮や原色、-hd画像の自動作成もしてく れる! –  http://www.codeandweb.com/ texturepacker
  15. 15. ここが便利!•  キャラクターの画像が入っているフォルダを指 定すると、自動的にスプライトシートにまとめ てくれる!•  画像ファイルは、retainaサイズのものを用意 (ファイル名に-hdは付けない)
  16. 16. ファイルを書き出す•  スプライトシート(.pvr.ccz)と、情報の はいったファイル(.plist)がすぐ作れ る!(retaina用の-hdも一緒にでき る!)
  17. 17. メモ•  cocos2dではretaina用の画像に-hdをつ けます!(@2xじゃないので注意!) ※設定で変更可能です。
  18. 18. cocos2dのいいところ②画面遷移が素敵!
  19. 19. Scene•  タイトル画面やゲーム中の画面など、 Sceneという単位で管理ができる!
  20. 20. エフェクト•  Sceneの切り替えの時に、エフェクトを つけることが出来る!
  21. 21. 関連する機能•  CCScene –  シーン•  CCTransition –  シーン切り替えのエフェクト
  22. 22. cocos2dのいいところ③レイヤー構造が素敵!
  23. 23. Sceneの中にはLayerをおける Layerは、任意の順番で 重ね合わせることができ る!
  24. 24. Layerは重ね合わせが可能引用:http://www.cocos2d-­‐iphone.org/wiki/doku.php/prog_guide:basic_concepts    
  25. 25. Layerの中にはいろいろおける CCSprite、CCMenu、CCLabelBMFont、   CCSpriteBatchNode   などを置くことができる
  26. 26. LayerとSpriteBatchNodeと Sprite •  Layer   •  BatchNode(手裏剣系)   •  Sprite(手裏剣1)   •  Sprite(手裏剣2)   •  Sprite(手裏剣3)   •  BatchNode(キャラクタ系)   •  Sprite(忍者)   レイヤーの中に、バッチノードをおいて、そ の中に、スプライトを置く     バッチノードの中には、その中に含まれてい るスプライトしかおけない  
  27. 27. 関連する機能•  CCLayer –  レイヤー•  CCLabelBMFont –  ラベル•  CCMenu –  メニュー表示(ボタン表示)
  28. 28. 便利ツール紹介②CocosBuilder
  29. 29. CocosBuilder•  Sceneにパーツを配置して視覚的に画面が 作れる!•  補助ツールと言うよりは、オーサリング ツールという感じ。http://cocosbuilder.com/
  30. 30. cocos2dのいいところ④パーティクルが素敵!
  31. 31. パーティクルって?•  小さい粒(パーティクル)を組み合わせて 色々な表現をするやつ!•  炎、爆発、キラキラ、ワープなどの表現を 簡単にすることができる!
  32. 32. 多彩な表現•  たくさんのパラメーターを設定することで、 多彩な表現が可能!出現率、開始時の色、重力、  大きさ、速度などを組み合わせて  多彩な表現が可能!
  33. 33. くみこみれい CCParticleSystem* system = [CCParticleSystemQuadparticleWithFile:@"star.plist"]; system.position = ccp(x, y); [self addChild: system z:20];
  34. 34. 関連する機能•  CCParticleSystem –  パーティクル
  35. 35. 便利ツール紹介③ParticleDesigner
  36. 36. ParticleDesigner•  パーティクルを簡単にデザインできる! –  http://particledesigner.71squared.com/
  37. 37. retaina対応•  save asの時に、以下の設定で書きだそ う!•  -hd画像を別に用意しておこう!
  38. 38. cocos2dのいいところ⑤マップ表示が素敵!
  39. 39. マップが簡単につかえる!•  2dや擬似3dのマップが簡単に使える!•  レイヤーを重ねたり、オブジェクトの配置 もできる!
  40. 40. くみこみれい CCTMXTiledMap *tileMap = [CCTMXTiledMaptiledMapWithTMXFile:@"title.tmx"]; [self addChild:tileMap z:kTagBgNode];
  41. 41. 関連する機能•  CCTMXTiledMap –  マップ
  42. 42. 便利ツール紹介④Tiled Map Editor
  43. 43. Tiled Map Editor•  マップエディタ!•  レイヤーを重ねたり、オブジェクトを配置 できるので便利! –  http://www.mapeditor.org/
  44. 44. retaina対応•  普通に書きだそう!•  .tmxファイルをコピーして、-hd.tmxにリ ネームしよう!•  -hd画像を別に用意しておこう!•  テキストエディタでひらいて、書き換えよ う!•  http://www.cocos2d-iphone.org/wiki/ doku.php/prog_guide %3ahow_to_develop_retinadisplay_game s_in_cocos2d
  45. 45. かきかえれい<map version="1.0" orientation="orthogonal" width="10" height="15"tilewidth="32" tileheight="32"> <tileset firstgid="1" name="mapChips" tilewidth="32"tileheight="32"> <image source="mapChips.png" width="1024" height="1024"/>↓<map version="1.0" orientation="orthogonal" width="10" height="15"tilewidth="64" tileheight="64"> <tileset firstgid="1" name="mapChips" tilewidth="64"tileheight="64"> <image source="mapChips-hd.png" width="2048" height="2048"/>
  46. 46. cocos2dのいいところ⑥物理エンジン搭載が素敵!
  47. 47. 物理エンジン!•  メジャーな物理エンジン、box2dと chipmunkがつかえます。
  48. 48. テンプレートが選べる!
  49. 49. 便利ツール紹介⑤PhysicsEditor
  50. 50. PhysicsEditor•  画像からbox2dなどで使う物理モデルを つくってくれる!•  凸を組み合わせて、凹な形のやつも作って くれる! –  http://www.codeandweb.com/ physicseditor
  51. 51. キャラクターを追加•  AddSpritesで、キャラクターを指定•  画像ファイルは、retainaサイズのものを 用意(ファイル名に-hdは付けない)
  52. 52. 設定を変更①•  ExpoterをBox2D generic(PLIST)に変更•  PTM-Ratioを64に変更(retaina画像を元 に設定しているので、プログラムで設定し たPTM-Ratioの2倍に設定する)
  53. 53. PTM-Ratioって?•  Box2Dの物理演算をするにあたって、何 pxを1mにするかの単位•  例えば、PTM-Ratioが32だったら、 32pxが1mになる。
  54. 54. シェイプの指定•  Shape Tracerを使って、各キャラごとに シェイプを設定しよう!
  55. 55. 基準点の指定•  Relativeに0.5を設定して、基準点を真ん 中にしよう!
  56. 56. ファイルを書き出す•  Publishでファイルが書きだされます
  57. 57. キャラクターを表示しよう!•  ファイルを追加しよう
  58. 58. 読み込み用クラスを追加•  PhysicsEditorに付属しているクラスを追 加しよう!•  サンプルもついてくるから真似しよう!
  59. 59. くみこみれい①parent = [self getChildByTag:kTagCharsNode];sprite = [PhysicsSpritespriteWithSpriteFrameName:@ chr.png ];[parent addChild:sprite];sprite.position = ccp(100, 100);
  60. 60. くみこみれい②// Define the dynamic body.//Set up a 1m squared box in the physics worldbodyDef.type = b2_dynamicBody;bodyDef.position.Set(100/PTM_RATIO, 100/PTM_RATIO);body = world->CreateBody(&bodyDef);// add the fixture definitions to the body[[GB2ShapeCache sharedShapeCache] addFixturesToBody:bodyforShapeName:name];[sprite setAnchorPoint:[[GB2ShapeCache sharedShapeCache]anchorPointForShape:name]];[sprite setPhysicsBody:body];
  61. 61. 関連する機能•  PhysicsSprite –  物理演算用スプライト•  GB2ShapeCache –  キャラクターのシェイプ
  62. 62. cocos2dのいいところ⑦音を鳴らすのが簡単で素敵!
  63. 63. 簡単に音を鳴らせる!•  SimpleAudioEngineを使って簡単にBGM のループ再生および、効果音の再生ができ る!•  細かいことは出来ないので、例えばイント ロ→メロディループとかは難しい。
  64. 64. 関連機能•  SimpleAudioEngine –  効果音、BGMを簡単に再生
  65. 65. まとめ•  cocos2d便利!いろんな機能がある!•  対応ツールがたくさんある! ↓•  cocos2d 1.0.の資料がおおいけど、参考 に! –  http://tonosamart.com/blog/
  66. 66. とのさまラボ!•  勉強会に参加した人どうしのコミニュティがほしい! 勉強会の開催日時の告知がほしい! という意見をみなさまからいただいたので、 コミニュティを作成しました!•  毎週木曜日は、もくもく勉強会も 開催しています! ぜひ「いいね!」をお願いします!https://www.facebook.com/TonosamaLabo  
  67. 67. 「もくもく」勉強会•  毎週木曜日に、「もくもく」勉強会やってます!•  場所は新宿!facebookページからお申し込みください!https://www.facebook.com/TonosamaLabo  

×