【FE】物理演算エンジン、Matter.jsを使ってみた。

ゲーム作成に興味があったので、物理演算エンジン、Matter.jsを使ってみました。

Matter.js

Matter.jsは物理演算が必要なアニメーションやWebゲームを作りたいときに使えるJSのライブラリのようです。

インストール

まずは、本家サイトの手順（http://brm.io/matter-js/#usage） 通りに導入します。

<script src="matter.js" type="text/javascript"></script>

もしくは

bower install matter-js
npm install matter-js

ボールを落とす

実行に必要なデモコードを書きます。

<!-- index.html -->

<main id="stage"></main>

<script src="js/matter-0.8.0.min.js"></script>
<script src="js/app.js"></script>

## app.js
(function() {

var Engine = Matter.Engine;
var World = Matter.World;
var Bodies = Matter.Bodies;

// Matter.js エンジン作成
var engine = Engine.create(document.body);

// 二つの箱(四角)と地面を作る
var boxA = Bodies.rectangle(400, 200, 80, 80);
var boxB = Bodies.rectangle(450, 50, 80, 80);

// isStatic:静的(完全固定)
var ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true });
 
// 二つの箱(四角)と地面を追加
World.add(engine.world, [boxA, boxB, ground]);
 
// Matter.js エンジン起動
Engine.run(engine);

})();

ボールが落ちてくるようになりました。

バウンドさせたいときは、circleのオプションにあるrestitutionに任意の値を入れることで、バウンドさせることができます。

var boxA = Bodies.circle(375, 100, 50, {
    //バウンドさせたい場合はrestitutionに任意の値を渡す
    restitution: 0.9
}

アニメーションの動きなどを意識せずに「ボールを落とす」という動きを実装することができました。 他、Matter.Bodyクラス、Matter.Engineクラス、Matter.Renderクラス、Matter.Vectorクラス、Matter.Commonクラスにて必要なAPIが用意されています（http://brm.io/matter-js-docs/index.html） 。回転量、速さ、マウスイベントなどを使用して、もっと色んなことができそうです。

以下作っているサンプルです。随時、更新していきます。 https://github.com/yhikishima/MatterJs-dev

【参考】

• 物理演算ライブラリ Matter.js に入門してみる
• 物理演算エンジン「Matter.js」を使ってみた（スマホも対応）