Matter.jsを触ってみました。

今日は、JavaScriptの2次元グラフィックスの物理演算ライブラリ、Matter.jsを初めて触りました。ブラウザ上で動作します。
覚書として。(2018/7/5)

Matter.js

公式サイト
http://brm.io/matter-js/

ダウンロード（リリースビルド）
https://github.com/liabru/matter-js/releases

動作させた環境

jsdo.it

コードをシェアする必要があったため、オンライン開発環境のjsdo.itを使って動かしました。

その他

ボタンの表示

HTMLのinputタグでボタンを表示させたものと、enchant.jsを使って表示させたものの2パタンをテストしました。
どちらも「クリックしたらボールが落ちる」という動作に関しては問題なく行えました。

参考記事

物理演算エンジン、Matter.jsを使ってみた。
https://qiita.com/yhikishima/items/ed77a4d869bc3bda9bc2

サンプルコード

今回は、Matter.js + enchant.jsのバージョンを載せます。

HTMLプログラム

Matter.jsとenchant.jsをライブラリとして追加しました。enchant.jsはjsdo.itでライブラリとして登録されているのでメニューから選択するだけです。Matter.jsは別プロジェクトとしてライブラリを一旦アップしておき、それを追加しました。

<div id='enchant-stage'></p>

enchant();

window.onload = function() {

    // Matter.jsの変数
    var Engine = Matter.Engine;
    var World = Matter.World;
    var Bodies = Matter.Bodies;

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

    // 二つの箱と地面を作成しWorldに追加
    var boxA = Bodies.rectangle(200, 200, 20, 20);
    var boxB = Bodies.rectangle(100, 100, 40, 40);
    var ground = Bodies.rectangle(160, 300, 320, 20, { isStatic: true });
    World.add(engine.world, [boxA, boxB, ground]);

    // Matter.js エンジン起動
    Engine.run(engine);

    // ボタンをenchant.jsで作る
    var game = new Game(320, 40);    
    game.onload = function() {    
        // ボタン生成とgame画面への追加
        var button = new Label("ここをクリック！");
        button.x = 10;
        button.y = 5;
        game.rootScene.addChild(button);

        // ボタンがクリックされたとき
        button.addEventListener('touchend', function()
        {
            // 四角を追加
            var box = Bodies.rectangle(200, 0, 20, 20);
            World.add(engine.world, [box]);
        });    
    };
    // enchant.js起動
    game.start();

};