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