なかなか見つからなかったので取り急ぎメモ。
やりたいこと
- Matter.MouseConstraintを使って簡単にマウスイベント実装したいけど、デフォルトですべてのbodyがドラッグで動かせるようになるので不便
対処１：動かしたくないbodyのoptionにstaticを付ける
- 完全に動かなくなるのでドラッグだけさせないとかできない
対処２：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]);
…