本記事では、2D物理シミュレーションライブラリであるmatter.jsをできるだけ簡単に動かしてみます。
様々な動かし方がありますが、本記事では必要なライブラリをダウンロードして、HTMLファイルを作成後、実際にプログラムを動かすところまでを解説します。
プログラムはブラウザがあれば動きますので、実行するために特別なソフトをインストールする必要もなく、非常に簡単に試すことができます。
matter.jsとは？
matter.js は、JavaScript言語で書かれた2D物理シミュレーションライブラリです。
物体が重力で落ちたり、ぶつかったり、跳ね返ったりする動きをリアルに再現できます。
たとえば、ゲームやシミュレーションで、ボールが転がったり壁に当たって跳ね返るような動きを簡単に作れます。
四角や丸などの図形に「重さ」「摩擦」「反発力」などの性質を持たせられ、衝突判定や、物体同士の力の計算も自動でやってくれるので便利です。
オープンソースなので無料で使うことができます。
matter.js以外にも2D物理シミュレーションライブラリ・ツールは色々存在しています。
こちらの記事で解説していますので参考にしてみてください。
matter.jsのデモを見てみる
こちらのページからmatter.jsのデモを見ることができます。
画面上部の選択ボックスから、様々なデモを確認することができます。
各デモのソースコードも見ることができますので、コードの参考にすることもできます。
マウスで物体をドラッグして、他の物体を弾くことができます。
様々なアクションを確認することができますので、動かして試してみましょう！
matter.jsを動かしてみる
とにかくまずは自分の手で動かしてみましょう。
matter.jsをダウンロード
matter.jsのホームページの左メニューにあるLatest Buildを選択します。
GitHub画面が開きますので、matter.jsを右クリックしてメニューを開き、「名前を付けてリンク先を保存」を選択します。
フォルダ選択画面が表示されますので、テスト用フォルダに保存します。
本記事ではsim2dフォルダとします。
main.jsを作成
matter.jsを利用したJavaScriptのコードを作成します。
sim2dフォルダ内にmain.jsファイルを新規に作成します。
このmain.jsファイルに以下のコードを貼り付けて保存します。
Getting startedページにあるこちらのコードを利用します。
// module aliases
var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Bodies = Matter.Bodies,
Composite = Matter.Composite;
// create an engine
var engine = Engine.create();
// create a renderer
var render = Render.create({
element: document.body,
engine: engine
});
// create two boxes and a ground
var boxA = Bodies.rectangle(400, 200, 80, 80);
var boxB = Bodies.rectangle(450, 50, 80, 80);
var ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true });
// add all of the bodies to the world
Composite.add(engine.world, [boxA, boxB, ground]);
// run the renderer
Render.run(render);
// create runner
var runner = Runner.create();
// run the engine
Runner.run(runner, engine);main.jsに保存したら、main.jsもsim2dフォルダに存在することを確認しておきます。
sample.htmlを作成
matter.jsとmain.jsを呼び出すようなHTMLファイルを作成します。
sim2dフォルダ内にsample.htmlファイルを新規に作成します。
sample.htmlに以下のコードを貼り付けて保存します。
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script src="matter.js"></script>
<script src="main.js"></script>
</body>
</html>matter.js、main.js、sample.htmlの3つのファイルが同一フォルダ内（sim2d）にあることを確認しておきます。
sample.htmlを実行
あとはsample.htmlをダブルクリックなどで実行すると、自動的にブラウザが開いて実行されます。
2つの四角が画面上部から落ちていくようなシミュレーションが実行されます。
画像だけでは分かりませんが、実際の物体がぶつかった時のような動きを示します。
まとめ
sample.htmlは問題なく動きましたでしょうか？
動かない場合は3つのファイルが同じフォルダに保存されているかなどを確認してみてください。
matter.jsを動かすためのファイルはローカルに保存していますので、以降はインターネットが使えない環境でも動きを確認することができます。
テキストエディタがあれば簡単にプログラミングできますし、実行環境もブラウザのみですので非常に手軽に試すことができます。
コメント