読者です 読者をやめる 読者になる 読者になる

CX's Hatena Blog

はてなブログを使ってみるテスト

Matter.js でゴゴゴとドドドを物理演算してみるテスト

ここ数日、2D 物理演算がマイブームです。

f:id:cx20:20140518131834p:plain

JavaScript の 2D 物理演算ライブラリとして「box2dweb」をサンプルをよく見かけますが、 シェイプと剛体を個別に作成する必要があり、個人的には、ちょっと使いにくい印象です。

そこで、比較的、最近登場した物理演算ライブラリ「Matter.js」を使ってみることにしました。 このライブラリは機能的に「box2dweb」と遜色なく、後発なだけに、API も整理されていて分かりやすいです。他のライブラリに比べてコンパクトな点も特徴です。

ゴゴゴとドドド

ゴゴゴのコード(抜粋)

シェイプの Path は SVG ライクに記述する仕様のようです。

for (var i = 0; i < 3; i++) {
    var x = 100 + i * 10;
    var y = 100 - i * 100;
    var shape = {
        label: 'Shape Body' + i,
        position: {
            x: x,
            y: y
        },
        vertices: Vertices.fromPath('L5 10 L100 0 L95 95 L0 100 L5 80 L80 75 L85 15 L0 20'), // 「コ」
        render: {
            fillStyle: "#234"
        }
    };
    World.add(engine.world, [
        // 「コ」
        Body.create(Common.extend({}, shape)),
        // 「゛」
        Bodies.rectangle(x + 50, y - 50, 16, 32, {render: {fillStyle: "#234"}}),
        Bodies.rectangle(x + 70, y - 60, 16, 24, {render: {fillStyle: "#234"}})
    ]);
}

※ 1点注意点としては、プロットの開始点を「M~」で始めると上手くいかないようです。

Matter.js のソースを確認したところ、以下の様になってました。「L~」しか見ていないようですね。

/**
 * Description
 * @method fromPath
 * @param {string} path
 * @return {vertices} vertices
 */
Vertices.fromPath = function(path) {
    var pathPattern = /L\s*([\-\d\.]*)\s*([\-\d\.]*)/ig,
        vertices = [];

    path.replace(pathPattern, function(match, x, y) {
        vertices.push({ x: parseFloat(x, 10), y: parseFloat(y, 10) });
    });

    return vertices;
};

ライブラリのサイズ

Matter.js の最新版、0.8.0 にて、box2dweb の 1/4 程度のようです。

ライブラリ名サイズ
matter-0.5.0.js124 KB
matter-0.5.0.min.js37 KB
matter-0.8.0.js191 KB
matter-0.8.0.min.js53 KB
p2.js291 KB
p2.min.js92 KB
Box2dWeb-2.1.a.3.js420 KB
Box2dWeb-2.1.a.3.min.js220 KB

Matter.js も、バージョンアップを重ねるたびに、肥大化しているので、ちょっと今後が心配ですけど。。。

おまけ

鉄球でブロックを崩すサンプルです。ちょっとしたストレス発散になります。

○とか□だけでなく、何か変わったものを物理演算させてみるのも面白いかも知れません。