モーリーのメモスマートフォン用の表示で見るモーリーのメモアプリ開発等(プログラミング、CG作成)、興味を持ったことを実践してまとめるブログです。物理演算エンジン物理演算エンジンは、物が落下したり衝突したりしたとき等の動きを、それっぽく作るのを手助けしてくれるツールです。それっぽくと書いたのは、現実の動きは複雑すぎるので、実行する環境の処理能力に合わせて、形状や力等の条件を簡略化されているからですが、うまく物理演算エンジンを取り入れられれば面白い効果を得ることが出来ます。Bindngs』でサポートされているのは『Chipmunk』です。『JavaScript』の場合、iOS、Android向けのアプリで物理演算エンジンを使いたい場合は『Chipmunk』を使用することになります。私は『1つのソースコードで、iOS、Android、web向けのアプリを作る』という利点に惹かれて『JavaScript』を選んでいるで、まずは『Chipmunk』の使い方を調べました。実際に物理演算エンジン(Chipmunk)を使用したプログラムを作成します。物理演算エンジンによって物体を動かす方法と、物体の衝突イベントの設定方法を確認するため、下記の内容を作成しました。画面内に重力が働いています。画面のタッチした位置に物体を出現させます。出現する物体は、円、四角、三角の3つの形状で、タッチする度に切り替わります。円形状の物体は、キャラクターで簡単なアニメーションを設定します。円形状と三角形状の物体が衝突したら、円形状の物体を削除します。チェックボックスを作成し、デバッグ用の表示と非表示を切り替えます。新規プロジェクトから作成します。画像を右クリックして、画像の右に書いた名前を付けて保存して下さい。モーリーのメモ』を御覧ください。Resources...』をクリック先ほど保存した画像(チェックボックス用の画像も含む)を選択し、『Open』をクリックスプライトシートの追加インポートした画像をスプライトシートにまとめます。地面用の画像を配置します。『Canvas』上部の『MainScene.csd』のタブをクリック『MainScene.csd』の編集に戻ります。Objects』の『Spriteオブジェクト』を『Canvas』にドラッグアンドドロップ画面右の『Propertiesウインドウ』で『Spriteオブジェクト』のプロパティを下記のように変更*書いていないパラメータは変更していません。Resource』:ground.png『Resourcesウインドウ』から画像ファイルをドラッグアンドドロップして登録します。IDE』が起動します。"chipmunk"],『resource.js』の編集スプライトシートを登録します。スプライトシートのファイルは、『res』フォルダ内の『Plist.png』と『Plist.plist』です。『HelloWorldLayer』に、下記のようにコードを書き加えます。Shapeを取得(配列の順序は、引数で衝突タイプを指定した順序です。物理演算を行う空間を作成し、その中に物体を追加します。物体は『Body』と『Shape』、そして『画像』で構成されています。物理演算を行う空間です。空間に追加された物体は物理演算エンジンによって動きが計算されます。形状は持っていません。物体の形状データと表面特性(摩擦、弾力性)を保持します。『Body』と結びつけて物体を作成します。物体の視覚データです。『Body』の持つ位置、角度の情報と同期して動きます。物理演算を行う空間を作成します。『space』に空間全体に作用する重力を設定します。『space』に『Body』を追加します。『space』に『Shape』を追加します。『space』から『Body』を削除します。『space』から『Shape』を削除します。物理空間の時間を経過時間分進めます。周期処理で実行することで連続して時間を進めます。『space』に衝突タイプ1と2の物体の衝突イベントを設定します。衝突タイプは『shape.setCollisionType(衝突タイプ)』で設定しておきます。space){}2つの物体(Shape)が接触し始めた時に実行される関数です。falseを返した場合、preSolveとpostSolveは実行されません。space){}接触中で、衝突処理がされる前に呼び出される関数です。falseを返した場合はpostSolveは実行されません。space){}接触中で、衝突処理がされた後に呼び出される関数です。space){}2つの物体(Shape)が離れた時に実行される関数です。『arbiter』により衝突の情報を取得・変更できます。『arbiter.getShapes()』:衝突した『Shape』の配列を取得します。配列にShapeが格納される順序は『addCollisionHandler』の引数で衝突タイプを指定した順序です。『space.step』の処理後に実行する関数を設定します。関数は設定されてから一度だけ実行されます。『Body』を作成します。慣性モーメントは、回転しにくさです。『body』の位置を設定します。『body』の角度を設定します。角度の単位はラジアンです。『body』に力を加えます。中空の円の慣性モーメントを返します。穴がない円の場合は内径を0にします。線形状の慣性モーメントを返します。始点と終点は物体の中心を原点とした座標です。中心を重心としたポリゴン形状の固体の慣性モーメントを返します。オフセットは各頂点に加算されます。y3]のようにX座標とY座標の値を交互に並べます。頂点は時計回りの順番で記述します。箱型の固体の中心の慣性モーメントを返します。静的ボディを返します。円形状の『Shape』を作成します。線形状の『Shape』を作成します。機能ポリゴン形状の『Shape』を作成します。y3]のようにX座標とY座標の値を交互に並べます。頂点は時計回りの順番で記述します。y)重心に対するオフセットです。箱(四角)形状の『Shape』を作成します。『shape』に弾性係数を設定します。『shape』に摩擦係数を設定します。『shape』に衝突タイプを設定します。衝突タイプは衝突イベントで物体を識別するための番号です。『画像を『Body』に合わせて動かす機能を持ったスプライトを作成します。『physicsSprite』にBodyを設定します。引数Body:cp.Bodyデモ今回作成したものです。http://githubmorley.github.io/cocosprojects-pages/hellococos05/画面をクリックすると、クリックした位置に物体が出現します。クリックする度に形状が変わります。円形状のキャラクターと三角形状の物体が衝突するとキャラクターが消えます。左上のチェックボックスでデバッグ表示が切り替わります。あとがき質量や力等の単位に関する記述は見つかりませんでした。それぞれの物体の比率や動きを見て調整する事になりそうです。物体がはじけ飛んだりするなど設定外っぽい動きをすることがあります。処理の負荷も考慮にいれないと行けないですね。Creatorは、物理エンジンのChipmunkを使用できます。v3.7...下記の記事の続きです。(8)参加グループプログラミングリンクはてなブログブログをはじめる週刊はてなブログはてなブログProはてなブログをはじめよう!mmorleyさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。