one's way blog

ワクワクを生み出せるWebエンジニアを目指して。

【38:matter.js 】重力やバウンドを表現できる物理演算エンジンを使ってみる

f:id:seintoseiya:20150913233637p:plain
プロジェクトNo.38:matter.js - DEMO

重力、バウンド、慣性。これらを表現するには数学的知識とそれを実装する根気が必要です。
そんなものは持ち合わせていない私は、先人が作った素晴らしい物理演算エンジンのmatter.jsを使うことにしました。
なんとスマートフォンにも対応しているとのこと。
モジュールがたくさんあって使いこなすには結構かかりそうなので、今回は基本的な部分だけ。

Matter.js DEMO

公式のデモ。様々なサンプルやパラメータが用意されており、触るだけで楽しい。
http://brm.io/matter-js-demo/

ライブラリのダウンロード

以下の公式サイトからライブラリファイルをダウンロードします。
Matter.js - a 2D rigid body JavaScript physics engine · code by @liabru

今回ダウンロードしたのはmatter-js-master.zipです。
この中から使うのは以下のファイル。

  • matter.js

以下のjqueryバージョンで動作が確認できました。

  • jquery1.6.4.min.js

基本的な使い方

ライブラリの読み込み。

HTML
<script src="./js/jquery1.6.4.min.js"></script>
<script src="./js/matter.js"></script>
<script src="./js/main.js"></script>

JSの書き方

GitHubで公開されているUsage examplesを基準に少しずつ修正していきます。
Getting started · liabru/matter-js Wiki · GitHub

ソースに説明コメントを記述しておきましたので、ご覧ください。

JavaScript
(function () {
	// Matter.js module aliases
	// 使用するメソッドを読み込む
	var Engine = Matter.Engine, // エンジンの作成、操作に関するメソッド
	    World = Matter.World, // 仮想世界(重力やバウンド)に関するメソッド
	    Bodies = Matter.Bodies; // 四角や丸などの実際に描画するモジュールを作るためのメソッド

	// create a Matter.js engine
	// 描画域を作成(描画したいDOM,オプションを読み込む)
	var engine = Engine.create(document.body); // create ( element , [options] ) 

	// create two boxes and a ground
	// 2つのボックスと地面を作る
	var boxA = Bodies.rectangle(400, 200, 80, 80); // rectangle ( x , y , width , height , [options] ) 
	var boxB = Bodies.rectangle(450, 50, 80, 80);
	var circleA = Bodies.circle(375, 100, 50, { restitution: 0.9 }); // circle ( x , y , radius , [options] , maxSides ) // restitutionはバウンドさせる
	var ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true }); // isStaticは固定にするか

	// add all of the bodies to the world
	// Worldメソッドに上記のオブジェクトを追加する
	World.add(engine.world, [boxA, boxB, circleA, ground]); // add ( world , body ) 

	// run the engine
	// 実行
	Engine.run(engine); // run ( engine )
})();

基本的な流れは、
matter.jsを使うための土台である「Engine」を用意します。
その土台の上に重力やバウンドが存在する仮想世界である「World」を用意して、
その仮想世界に存在するオブジェクトを「Bodies」で作る。
といった感じです。

今回はUsage examplesの解説と、少し追加で違うメソッドも使ってみましたが、
まだまだたくさんメソッドが用意されているので、お試しください。
http://brm.io/matter-js-docs/index.html

全ソースはこちら

github.com