ホーム > ブログ > matter.jsを今日から

Webデザイナー ブログ

matter.jsを今日から

2016年9月1日(matter.js)

js 物理演算と検索するとmatter.jsなるものが引っ掛かりました。
前々からゲームを作ってみたいと思ってましたが、
これを使えばいろいろできそうな気がしますが、
いかんせん、ドキュメントもすべて英語なのでじっくりやっていきたいと思います。

まずはなにわともあれ、http://brm.io/matter-js/から
(https://github.com/liabru/matter-js/releases)matter.js
ダウンロードし読み込みます。

そして大きな流れは、
必要なモジュールを読み込みます。下記のようにすることで、
各モジュールのメソッドやプロパティを扱うことが来ます。

(function() {
  var Engine = Matter.Engine,
  Events = Matter.Events;
  Common = Matter.Common;
  World = Matter.World,
  Mouse = Matter.Mouse,
  MouseConstraint = Matter.MouseConstraint,
  Bodies = Matter.Bodies;
})();

モジュール一覧は
http://brm.io/matter-js/docs/
にすべて乗っているようです。
これはMatter.○○;で変数に入れることで、
変数.メソッドや変数.プロパティって感じで
使えるようになります。使わないmoduleは読み込まないほうがよさそうです。

http://aka-iro.jp/matterjs/
とりあえずサンプルです。

まず、Engine.create()で基本となるものを作成します。
第一引数にhtmlのidなどを指定してそこに展開します。
第二引数に様々なオプションを指定可能です。

options:{
                width: 800,
                height: 600,
                pixelRatio: 1,
                background: '#fafafa',
                wireframeBackground: '#222',
                hasBounds: !!options.bounds,
                enabled: true,
                wireframes: true,
                showSleeping: true,
                showDebug: false,
                showBroadphase: false,
                showBounds: false,
                showVelocity: false,
                showCollisions: false,
                showSeparations: false,
                showAxes: false,
                showPositions: false,
                showAngleIndicator: false,
                showIds: false,
                showShadows: false,
                showVertexNumbers: false,
                showConvexHulls: false,
                showInternalEdges: false,
                showMousePosition: false
};

matter.jsの中を見ると上記のオプションが設定可能なようです。
ただ、ドキュメントには上記の説明が見当たらないんですよね・・・・
http://brm.io/matter-js/demo/
のrenderというところでオンオフのチェックができるので、
ここを見て何が起きるか試せってことなのでしょうか・・・

次にBodies.circle()などで主役となる物体を作成します。
http://brm.io/matter-js/docs/classes/Bodies.html
でメソッド一覧が確認できます。そんないっぱいないですね。
Bodies.rectangle(); //四角形
Bodies.circle(); //円
Bodies.polygon(); //多角形
Bodies.trapezoid(); //台形
の4つです。
オプションからプロパティを指定して
物体をカスタムできます。
大きさ、背景色、画像、摩擦などなどいろいろ
ありまして、面白そうです。

次に生成した要素をWorld.add()でWorldに追加します。
Worldはまさしく世界を表す感じで物体や世界内の重力なども管理します。
第一引数にEngine.create()で作成したものを指定して、
プロパティworldを指定します。
World.add(engine.world);という感じです。
第二引数には、Bodiesで生成した要素を、配列形式で指定します(一つの場合は単一オブジェクトでも可能)。
World.add(engine.world, [boxA, shape, ground]);
こんな感じです。
準備は以上です。
最後に、
Engine.run(engine);
で物理演算を開始させます。

基本これだけなんですが、
マウスで操作したり、クリックで追加したりと
いろいろやれることがあるので随時更新していきます。

人気ブログランキングへ
応援お願いします!

コメントをどうぞ