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-x(JS) ハンズオン #11「2D物理エンジン」

516 views

Published on

2016/8/18 イベント&コミュニティスペース dots.にて開催したCocos2d-x(JS) ハンズオン #11 「2D物理エンジン」の資料です。Cocos2d-xで利用可能なBox2DとChipmunkについて紹介し、実際に両物理エンジンに触れていただきました。

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Cocos2d-x(JS) ハンズオン #11「2D物理エンジン」

  1. 1. Cocos2d-x(JS) ハンズオン #11 2D物理エンジン Nobollel株式会社 清水友晶
  2. 2. 清水 友晶  Nobollel株式会社 CTO チームビルディング スマホアプリ開発 Cocos2d-xサポート TECH.C.非常勤講師  プライベートでも Cocos2d-xに関するゲーム開発 講演活動 執筆活動  マイブーム: Ingress  チラ裏開発メモ: http://tks2.net/memo  SlideShare: http://www.slideshare.net/doraemonsss  Facebook: http://www.facebook.com/doraemonsss
  3. 3. http://line.me/S/sticker/1085672
  4. 4. 2D物理エンジン  2D物理エンジン  Box2D  Chipmunk  Cocos2d-x(JS)で物理エンジンを扱う  Box2D  Chipmunk
  5. 5. 2D物理エンジン
  6. 6. Box2D  http://box2d.org/  最新バージョン: Box2D v2.3.2  オープンソース  元々C++用に作られたが、数多くのプログラミング 言語に移植されている  ゲーム用2D物理エンジン  古典力学的な法則をシミュレーション  質量  速度  摩擦  ピクセルをメートルに変換する係数を用意する必要 がある
  7. 7. Chipmunk  https://chipmunk-physics.net/  最新バージョン: Chipmunk v7  オープンソース  元々C言語用に作られたが、数多くのプロ グラミング言語に移植されている  ゲーム用2D物理エンジン  ピクセル単位で物理シミュレーション
  8. 8. 物理エンジンを使ってみる
  9. 9. 画像ファイル  http://tks2.net/handson/20160818/handson.zip
  10. 10. Box2D 0. 前準備 1. 物理空間の準備 2. ブロックの配置 3. 画像と物体の関係 4. タップ処理
  11. 11. 0. 前準備 (Box2D)  https://goo.gl/2WdUvB  main.js  解像度の変更  project.json  modulesにexternalを追加  src/resource.js  リソース追加
  12. 12. 1. 物理空間の準備 (Box2D)  https://goo.gl/5gWUuw  重力の設定  b2World  毎フレーム更新処理  scheduleUpdate関数  物理シミュレーション  world.Step
  13. 13. 2. ブロックの配置 (Box2D)  https://goo.gl/I8jYBs  物体の特性  b2FixtureDef  物理特性  b2BodyDef  物体の作成  world.CreateBody
  14. 14. 3. 画像と物体の関係 (Box2D)  https://goo.gl/gKPUzz  物体がなくなった時の画面表示の確認  画像と物体の同期  物体に合わせ、画像の位置と角度を変更する
  15. 15. 4. タップ処理 (Box2D)  https://goo.gl/I8jYBs  タッチイベント  物体の削除  画像  物体
  16. 16. Chipmunk 0. 前準備 1. 物理空間の準備 2. ブロックの配置 3. タップ処理 4. 画像の表示
  17. 17. 0. 前準備 (Chipmunk)  https://goo.gl/s4Jqow  Box2Dの物理空間がない状態にする
  18. 18. 1. 物理空間の準備 (Chipmunk)  https://goo.gl/4LeQkq  物理空間  cp.Space  Chipmunkでは実世界の測定単 位系を利用しない
  19. 19. 2. ブロックの配置 (Chipmunk)  https://goo.gl/aQVZdn  物理空間に物体を追加  cp.Body  cp.BoxShape  物理空間の更新  worls.step  デバッグ表示  cc.PhysicsDebugNode
  20. 20. 3. タップ処理 (Chipmunk)  https://goo.gl/8cBezu  タッチイベント  物体の削除
  21. 21. 4. 画像の表示 (Chipmunk)  https://goo.gl/ZocjFZ  shapeに画像をセット  update関数で画像の位置と角度 を更新する  物体の削除時  画像も削除する
  22. 22. 作業はここまで
  23. 23. 参考になるサイト  Cocos公式Wiki http://www.cocos2d- x.org/wiki/Cocos2d-JS  Cocos2d-JS APIリファレンス http://cocos2d-x.org/wiki/Reference  Qiita (tag: cocos2d-js) https://qiita.com
  24. 24. おわり  ありがとうございました

×