Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Force velocity problem sliding across multiple rectangles

See original GitHub issue

Hi,

I have a rectangle with { inertia: 'Infinity', mass: 100, frictionAir: 0, friction: 0, } that I wish to slide horizontally on top of a plane of tiles made out of multiple rectangles (classic tilemap). The tiles are setup like so:

    var lstack = Composites.stack(50, 100, 15, 10, 0, 0, function (x, y) {
      return Bodies.rectangle(x, y, 30, 50, {
        isStatic: true,
        render: {
          fillStyle: 'red',
          strokeStyle: 'black'
        }
      });
    });

I apply some force to the sliding rectangle Matter.Body.applyForce(player, player.position, Matter.Vector.create(0.05, 0).

Sometimes the simulation works as expected, but sometimes the rectangle simply stops at a seam/joint between two tiles. Please see attached video. Im reloading the script in order to restart the simulation in the video.

https://user-images.githubusercontent.com/719555/107157921-26f4a200-6987-11eb-91c7-4e126009e132.mov

What’s going on here?

Here’s the full source code:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Physics</title>
</head>

<body>
  <script type="module">
    import Matter from "matter-js";
    var Engine = Matter.Engine,
      Render = Matter.Render,
      Runner = Matter.Runner,
      Composites = Matter.Composites,
      MouseConstraint = Matter.MouseConstraint,
      Mouse = Matter.Mouse,
      World = Matter.World,
      Constraint = Matter.Constraint,
      Bodies = Matter.Bodies;

    // create engine
    var engine = Engine.create(), world = engine.world;

    // create renderer
    var render = Render.create({
      element: document.body,
      engine: engine,
      options: {
        width: 800,
        height: 400,
        wireframes: true,
        showVelocity: true
      }
    });


    Engine.run(engine);

    Render.run(render);

    var player = Bodies.rectangle(300, 70, 20, 20, {
      inertia: 'Infinity',
      mass: 100,
      frictionAir: 0,
      friction: 0,
      render: {
        fillStyle: 'blue',
        strokeStyle: 'black'
      }
    });

    var lstack = Composites.stack(50, 100, 15, 10, 0, 0, function (x, y) {
      return Bodies.rectangle(x, y, 30, 50, {
        isStatic: true,
        render: {
          fillStyle: 'red',
          strokeStyle: 'black'
        }
      });
    });

    World.add(world, [
      lstack,
      player,
      // walls
      Bodies.rectangle(400, 0, 810, 30, { isStatic: true }),
      Bodies.rectangle(400, 400, 810, 30, { isStatic: true }),
      Bodies.rectangle(800, 200, 30, 420, { isStatic: true }),
      Bodies.rectangle(0, 200, 30, 420, { isStatic: true })
    ]);

    setTimeout(() => {
      setInterval(() => {
        Matter.Body.applyForce(player, player.position, Matter.Vector.create(0.05, 0))
      }, 10)
    }, 300)
  </script>
</body>

</html>

Issue Analytics

State:
Created 3 years ago
Reactions:1
Comments:7 (3 by maintainers)

Top GitHub Comments

1reaction

liabrucommented, Feb 21, 2021

You could also try rounding the corners of the sliding body or maybe even using a circle instead, which should help move over bumps.

Also if you’re trying to make something directly controllable like a player character, then avoid using forces and take a look at the Manipulation example for more reliable approaches.

0reactions

liabrucommented, Dec 20, 2021

I’m not sure how much the recent fixes are related to this but I’d be interested to know if the latest release 0.18.0 helps anyone seeing this kind of issue.