物理演算エンジン「Matter.js」を使ってみた（スマホも対応）

おじいちゃん

2015.04.16

こんにちは、おじいちゃんです。

今回は物理演算エンジンであるMatter.jsをご紹介したいと思います。

Matter.jsとは

Matter.jsは、物理演算が必要なアニメーションやWebゲームなどを作りたいときに使えるJavaScriptライブラリです。スマートフォンにも対応しているとのこと、ありがたいですね。

下記サイトからダウンロードすることができます。

Matter.js
http://brm.io/matter-js/

サイト内のDEMOでは、色々なサンプルがありパラメータも変更できるようになっているので触ってみてください。

Matter.js DEMO
http://brm.io/matter-js-demo/

ボールを落とす

それでは簡単なサンプルを作ってみましょう。

まずはボールが落ちるサンプルです。

(function () {
    //使用するメソッドを読み込む
    var Engine = Matter.Engine,
        Gui = Matter.Gui,
        World = Matter.World,
        Bodies = Matter.Bodies,
        Body = Matter.Body,
        Composite = Matter.Composite,
        Composites = Matter.Composites,
        Common = Matter.Common,
        Constraint = Matter.Constraint,
        RenderPixi = Matter.RenderPixi,
        Events = Matter.Events,
        Bounds = Matter.Bounds,
        Vector = Matter.Vector,
        Vertices = Matter.Vertices,
        MouseConstraint = Matter.MouseConstraint;

    var STARGE = {};

    var _engine,
        _gui;

    //初期化
    STARGE.init = function () {

        //描画するDOMを取得
        var container = document.getElementById('stage');

        var options = {
            positionIterations: 6,
            velocityIterations: 4,
            enableSleeping: false
        };

        //描画域を作成(描画したいDOM,オプションを読み込む)
        _engine = Engine.create(container, options);

        //実行
        Engine.run(_engine);

        STARGE.ballSample();
    };

    //ページの読み込みが終わったらSTARGE.initを実行
    if (window.addEventListener) {
        window.addEventListener('load', STARGE.init);
    } else if (window.attachEvent) {
        window.attachEvent('load', STARGE.init);
    }

    STARGE.ballSample = function () {
        var _world = _engine.world;

        STARGE.reset();

        //circle(x座標,y座標,大きさ,オプション)
        var ball = Bodies.circle(530, 100, 50, {render: {fillStyle: '#d04030'}
        });

        //World.add(追加)
        World.add(_world, [ball]);
    };
    
    //描画域の設定
    STARGE.reset = function () {

        var _world = _engine.world;

        //描画クリア
        World.clear(_world);
        Engine.clear(_engine);

        //重力値
        _engine.world.gravity.y = 1;

        var offset = 0;

        //矩形で枠線を作る(rectangle(x座標,y座標,横幅,縦幅,option))
        World.add(_world, [
            Bodies.rectangle(400, 0, 800, 1, {isStatic: true}),
            Bodies.rectangle(800, 300, 1, 600, {isStatic: true}),
            Bodies.rectangle(0, 0, 1, 600, {isStatic: true}),
            Bodies.rectangle(400, 600, 800, 1, {isStatic: true})
        ]);
        //renderのオプション(各種renderのオプション)
        var renderOptions = _engine.render.options;
        renderOptions.wireframes = false;
    };
})();

rakka

生成した描画域内でボールが落ちましたね。

このようにオブジェクトを配置するだけで、物理演算を利用したアニメーションを実装することができます。

オプションや機能などはドキュメントにまとめられています。

Matter.js ドキュメント
http://brm.io/matter-js-docs/index.html

今回はいくつかわかりやすい機能だけご紹介します。

ボールを固定する

さきほどはボールを生成しただけで落ちていきました。今度はボールを固定してみましょう。

circleのオプションにあるisStaticをtrueをすることで、固定することができます。

var ball = Bodies.circle(375, 100, 50, {
            //固定するかをtrueかfalseで変更
            isStatic: true,
            render: {
                lineWidth: 1,
                strokeStyle: '#d04030',
                fillStyle: '#d04030'
            }
        });

次は、ボールをバウンドさせてみます。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る