Successfully reported this slideshow.

More Related Content

More from Tomoaki Shimizu

Related Audiobooks

Free with a 14 day trial from Scribd

See all

cocos2d-xにおけるBox2Dの利用方法および便利なツール

  1. 1. cocos2d-x上で Box2Dを利用して ゲームを作ってみよう! 株式会社TKS2 清水友晶
  2. 2. 清水 友晶 —  株式会社TKS2 http://tks2.net —  スマートフォンアプリ開発 (iOS, Android, Windows Phone 8) Webコンテンツ開発 —  cocos2d-xへの開発参加 cocos2d-xを利用したアプリ開発 講演活動 執筆活動 —  Twitter: tks2shimizu —  Blog: http://tks2.net/memo —  SlideShare: http://www.slideshare.net/doraemonsss —  Facebook: http://www.facebook.com/doraemonsss
  3. 3. もうすぐ出版されます! 入�門編 応用編 CCOOMMIINNGG CCOOMMIINNGG SSOOOONN SSOOOONN
  4. 4. おやこでスマほん —  株式会社スマートエデュケーション
  5. 5. —  http://cocos2d-x.jp —  cocos2d-x開発元Chukong Technologies社公認 —  cocos2d-xのための自由なコミュニティー —  入門者から上級者まで誰でもOK!!ぜひご参加を! —  cocos2d-xに関することなら何でも投稿できます!! —  https://www.facebook.com/groups/152840204871454/
  6. 6. —  4/17 第7回 shinjuku.cocos2d-x —  4/20 cocos2d-xハンズオン勉強会 —  5/15 shinjuku.cocos2d-x初心者ハンズオン     ∼MacでiOSアプリを作る開発環境を整えよう!∼ —  5/17 cocos2d-x公開講座 in 鹿児島 —  5/18 cocos2d-x実践講座 in 鹿児島 —  5/22 第8回 shinjuku.cocos2d-x —  6/M shinjuku.cocos2d-x初心者ハンズオン     ∼MacでAndroidアプリを作る開発環境を整えよう!∼ —  6/M 第9回 shinjuku.cocos2d-x
  7. 7. 目次 —  cocos2d-xにおける物理エンジン —  Box2Dについて —  シェープを作成するツール「PhysicsEditor」 —  Box2Dを利用してゲームを作ってみよう! —  PhysicsEditorでシェイプを作る —  cocos2d-xの縦画面表示 —  物理空間の作成 —  ボールの作成 —  フリッパーの作成 —  衝突判定
  8. 8. cocos2d-xにおける物理エンジン —  cocos2d-xではBox2DとChipmunkが利用できる —  大きな違いは言語 —  Box2D … C++ —  Chipmunk … C言語 —  どちらの方が優れているという明確な比較結果は見当 たらない —  慣れている方を利用するのが良い —  JavaScript BindingsではChipmunkが利用されている
  9. 9. Box2Dについて —  2D向けの物理シミュレーションライブラリ —  Box2Dホームページ http://box2d.org/ —  MKS単位系(密度:kg/m3, 加速度:m/s2) —  どんなことができるのか? —  FLASHで遊ぼう! - API関連一覧 http://flashjp.com/apiindex.php —  cocos2d-xにおいては「project-creator」で作成した プロジェクトは標準で利用可能
  10. 10. Box2Dについて —  Box2Dを利用するには、多くの設定が必要 —  例えば、cocos2d-xのiOS向けテンプレートプロジェクトに は、1つの画像に対して物理構造を与えるのに17行分の記述 が書かれている —  HelloWorldクラスのaddNewSpriteAtPosition関数参照 —  複雑な物理構造を与えるには、コーディングでは難しい
  11. 11. PhysicsEditor —  物理エンジンで利 用可能なシェイプ を作成 —  条件によっては無 料で利用可能 http://www.codeandweb.com/physicseditor
  12. 12. PhysicsEditor —  PhysicsEditorで作成したシェイプをcocos2d-xで 利用するときは、 —  「Box2D generic (PLIST)」を選択して出力する —  GB2ShapeCache-xクラスを利用する https://github.com/tks2shimizu/GB2ShapeCache-x
  13. 13. Box2Dを利用してゲームを作ろう! —  PhysicsEditorでシェイ プを作る —  cocos2d-xの縦画面表示 —  物理空間の作成 —  ボールの作成 —  フリッパーの作成 —  衝突判定
  14. 14. プロジェクトの準備 —  project-creatorによるプロジェクト作成 ./create_project.py -project pinball -package net.tks2.pinball - language cpp —  ゲームで使用する画像を「Resources」に配置 http://tks2.net/pinball/pinball.zip —  Xcodeの場合は、プロジェクトへ取り込む —  GB2ShapeCache-xクラスを「Classes」に配置 https://github.com/tks2shimizu/GB2ShapeCache-x —  Xcodeの場合は、プロジェクトへ取り込む —  Android向けは、Android.mkにGB2ShapeCache-x.cppを追加 cocos2d-2.1rc0-x-2.1.2/projects/pinball/proj.android/jni/Android.mk
  15. 15. PhysicsEditor —  PhysicsEditorのホームページよりダウンロード http://www.codeandweb.com/physicseditor
  16. 16. PhysicsEditor —  PhysicsEditorを起動 —  プロジェクト保存 —  初期設定 —  Exporter —  Exporter … Box2D generics (PLIST) —  Global parameters —  PTM-Ratio (Pixel To Meter) … 1024
  17. 17. PhysicsEditor —  「Resources」の画像を、PhysicsEditorの左ペイン へドラッグアンドドロップ —  background.png —  ball.png —  flipper_left.png —  flipper_right.png
  18. 18. PhysicsEditor —  シェイプの作成
  19. 19. PhysicsEditor —  パラメータ設定 —  アンカーポイント —  密度 —  反発係数 —  摩擦係数 —  センサー —  任意の文字列 —  ファイル出力 … Publicボタン —  出力されたplistファイルを「Resources」ディレクトリへ配置 —  Xcodeの場合は、プロジェクトへ取り込む
  20. 20. cocos2d-xの縦画面表示 —  iOS —  Supported Interface Orientations —  RootViewController.mm - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)in return UIInterfaceOrientationIsPortrait( interfaceOrientation );! }! ! // For ios6, use supportedInterfaceOrientations & shouldAutorotate instea - (NSUInteger) supportedInterfaceOrientations{! #ifdef __IPHONE_6_0! return UIInterfaceOrientationMaskPortrait;! #endif! }!
  21. 21. cocos2d-xの縦画面表示 —  Android —  AndroidManifest.xml <activity android:name=".NyanBall"! android:label="@string/app_name"! android:screenOrientation="portrait"! android:theme="@android:style/Theme.NoTitleBar. android:configChanges="orientation">! <intent-filter>! <action android:name="android.intent.action.MAIN" <category android:name="android.intent.category.L </intent-filter>! </activity>
  22. 22. 背景画像の表示 —  今回は1つの画像のみを利用して、マルチレゾリュー ション対応を行う —  AppDelegate.cpp bool AppDelegate::applicationDidFinishLaunching() {! CCDirector* pDirector = CCDirector::sharedDirector();! CCEGLView* pEGLView = CCEGLView::sharedOpenGLView();! ! pDirector->setOpenGLView(pEGLView);! pDirector->setDisplayStats(true);! pDirector->setAnimationInterval(1.0 / 60);! ! CCSize winSize = CCDirector::sharedDirector()->getWinSize();! pDirector->setContentScaleFactor(1024 / winSize.height);! ! CCScene *pScene = HelloWorld::scene();! pDirector->runWithScene(pScene);! ! return true;! }!
  23. 23. 背景画像の表示 —  background.pngの表示 —  ソース編集 —  HelloWorldScene.h —  HelloWorldScene.cpp https://gist.github.com/tks2shimizu/ 17994a67fdbcf89435bf
  24. 24. 物理空間の作成 —  b2Worldクラスによる物理空間 (本ハンズオンでは必要最小限の設定のみとする) —  重力の設定 —  毎フレーム更新 —  毎フレームの更新にupdate関数を利用する —  ソース編集 —  HelloWorldScene.h —  HelloWorldScene.cpp https://gist.github.com/tks2shimizu/d8c3df1f72d75d2b21ca
  25. 25. 背景画像に物理構造を与える —  シェイプデータの読込み —  「pinball.plist」を読込む —  b2BodyDefの定義 —  type —  position … PTM Ratioで割ることに注意 —  userData … CCSpriteを追加 —  ソース編集 —  HelloWorldScene.h —  HelloWorldScene.cpp https://gist.github.com/tks2shimizu/e69d420bc53675d982c3
  26. 26. ボールの作成 —  タップを有効 —  毎フレーム処理 —  ボール作成処理 —  ソース編集 —  HelloWorldScene.h —  HelloWorldScene.cpp https://gist.github.com/tks2shimizu/ 57e6ca5ff1494a66421e
  27. 27. フリッパーの作成 —  フリッパー作成処理 —  ジョイント追加 —  ジョイントの制限 —  ソース編集 —  HelloWorldScene.h —  HelloWorldScene.cpp https://gist.github.com/tks2shimizu/ faa011e28d9cf95df0db
  28. 28. 点数の表示 —  衝突判定 —  b2ContactListenerクラス —  ソース編集 —  HelloWorldScene.h —  HelloWorldScene.cpp https://gist.github.com/tks2shimizu/ beb45a3a5e6625eb679f
  29. 29. おわり —  次回「cocos2d-x JavaScript Bindings」について C++とJavaScriptの違いを中心に見てみます

×