Как реализовать поведение HOVER в Matter.js?

Если вы хотите найти тело, которое находится ниже точки мыши/данной точки, вы можете использовать

Matter.Query.point

документы

Если вы хотите, чтобы тело зависало:

Однажды я создал эффект наведения с помощью Box2d, но я думаю, что это можно сделать так же и в Matter.js. Просто взгляните на иллюстрацию ниже.

    ^
    |      <-- Force opposite to gravity
+---|---+
|   +   |  <-- Box/player/body
+-+-+-+-+
| | | | |  <-- Rays
  | | |
----+----- <-- Ground to hover on
    |

Чтобы заставить тело зависнуть, нужно приложить к нему силу, противоположную силе тяжести. Поэтому вам нужно выяснить, насколько сильной должна быть эта сила, которая должна быть равна нулю, если тело находится выше высоты парения, и должна становиться сильнее, чем ближе тело находится к земле.

Чтобы получить эту информацию, вы можете использовать raycasting и отправить один или несколько лучей от тела к земле (противоположно гравитации). В случае, если луч(и) пересекаются с полом/землей для парения, вы можете рассчитать длину от тела до точки пересечения. Если длина больше, чем высота для парения, силу можно установить равной нулю, если она равна или меньше, вы можете масштабировать силу в некоторой обратной пропорции к длине, чтобы она была сильной, когда тело низко. Точный метод/функция зависит от эффекта, которого вы пытаетесь достичь.

Когда я это сделал, я рассчитал около 10 лучей и использовал их среднее значение, таким образом, тело смогло «подняться».

Вы можете посмотреть здесь, где я искал помощи, когда делал это.

Здесь — отличный туториал, к сожалению, в Box2d, но сама физика не должна отличаться.

Я нашел способ реализовать поведение при наведении. Для этого я использовал Matter.Query.point и метод mousemove(Matter.Events.on). Спасибо за @Филипп выше за указание мне правильного направления. Вот простой код.

//Need to add MouseConstraint for mouse events
 var mConstraint;
 mConstraint = MouseConstraint.create(engine, options);
 Matter.World.add(world, mConstraint);

//Add event with 'mousemove'
Matter.Events.on(mConstraint, 'mousemove', function (event) {
   //For Matter.Query.point pass "array of bodies" and "mouse position"
   var foundPhysics = Matter.Query.point(bodies, event.mouse.position);

  //Your custom code here
  console.info(foundPhysics[0]); //returns a shape corrisponding to the mouse position

});

Удачного кодирования! :)