JavaScript
Matter.js

matter.jsで特定のbodyに対してマウスイベントを設定する

なかなか見つからなかったので取り急ぎメモ。

やりたいこと

  • Matter.MouseConstraintを使って簡単にマウスイベント実装したいけど、デフォルトですべてのbodyがドラッグで動かせるようになるので不便

対処1:動かしたくないbodyのoptionにstaticを付ける

  • 完全に動かなくなるのでドラッグだけさせないとかできない

対処2:mouseConstraitと動かしたいbodyに同じcollisionFilterを設定する

// モジュールへのエイリアス
    var MouseConstraint = Matter.MouseConstraint;



// マウスイベントを有効にしたいbodyにはfilterを設定
    var targetOptions= {
        render: { fillStyle:  "rgba(0, 0, 0, 1)" },
        collisionFilter: { // 一意のフィルタ
            category: 0x0001,
            mask: 0xFFFFCC,
            group: 1
        }
    };
    var Target = Bodies.polygon(170, 350, 20, 200, targetOptions);

// マウスイベント不要なbodyはfilterを設定しない/別に設定
    var otherOptions= {
        render: { fillStyle:  "rgba(0, 0, 0, 1)" }
    };
    var Other= Bodies.polygon(170, 450, 20, 200, otherOptions);

// mouseConstraintの設定
    var mousedrag = MouseConstraint.create(engine, {
        element: canvas.childNodes[0], //マウス操作を感知する要素を指定
        constraint: {
            render: {
                strokeStyle: "rgba(0, 0, 0, 0)" //マウス操作の表示を隠す
            },
        },
        collisionFilter: { // 一意のフィルタ
            category: 0x0001,
            mask: 0xFFFFCC,
            group: 1
        }
    });

    World.add(engine.world, mousedrag);
    World.add(engine.world, [Target , Other]);




♯ 参考リンク
https://github.com/liabru/matter-js/issues/48