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

おじいちゃん

2015.04.16

バウンドさせてみる

circleのオプションにあるrestitutionに任意の値を入れることで、バウンドさせることができます。

//circle(x座標,y座標,大きさ)
        var ball = Bodies.circle(375, 100, 50, {
            //バウンドさせたい場合はrestitutionに任意の値を渡す
            restitution: 0.9,
            isStatic: false,
            render: {
                lineWidth: 1,
                strokeStyle: '#d04030',
                fillStyle: '#d04030'
            }
        });

bound

簡単にボールをバウンドさせることができましたね。

梃子を作ってみる

次に梃子を作ってみます。

必要な図形を生成して、各オブジェクトの比重（density）を指定します。

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

        STARGE.reset();

        var ball = Bodies.circle(530, 100, 50, {
　　　　　　　density: 5,
            render: {
                fillStyle: '#d04030'
            }
        });
       
        //
        var catapult = Bodies.rectangle(400, 520, 330, 20, {
            density: 1,
            render: {
                fillStyle: '#efb233'
            }
        });

        var fodder = Bodies.rectangle(250, 500, 44, 44, {
　　　　　　　density: 0.3,
            render: {
                fillStyle: '#12579f'
            }
        });

次に生成した図形を追加してあげて、支点を支えるためのConstraintを生成。

World.add(_world, [
            ball
            catapult,
            fodder,
            Constraint.create({
                bodyA: catapult,
                pointB: {
                    x: 350,
                    y: 600
                },
                isStatic: true,
                render: {
                    visible: true
                }
            }),
            Constraint.create({
                bodyA: catapult,
                pointB: {
                    x: 450,
                    y: 600
                },
                isStatic: true,
                render: {
                    visible: true
                }
            })
        ]);
    };

固定したいオブジェクト（bodyA）と、どのポイントを軸に固定したいかという座標（pointB）を指定したConstraintを作ることで、点を固定することができます。

teco