I'm trying to integrate a game, built with matter-js, into my existing SvelteKit webapp but am getting stumped as to why gravity is not affecting the circle body I'm adding. The following is the typescript code within my svelte file:

onMount(async () => {
  const Matter = await import('matter-js');
  const canvas = document.getElementById("canvas")!

  const engine = Matter.Engine.create();

  const ball = Matter.Bodies.circle(100, 0, 10);
  Matter.Composite.add(engine.world, ball);
  Matter.Engine.update(engine);

  const render = Matter.Render.create({
    element: canvas,
    engine: engine,
    })
  Matter.Render.run(render);
  Matter.Runner.run(engine);
})

The ball is stuck in the initial position set within the circle() method. I'm using vite for the local dev server.

I'm trying to integrate a game, built with matter-js, into my existing SvelteKit webapp but am getting stumped as to why gravity is not affecting the circle body I'm adding. The following is the typescript code within my svelte file:

onMount(async () => {
  const Matter = await import('matter-js');
  const canvas = document.getElementById("canvas")!

  const engine = Matter.Engine.create();

  const ball = Matter.Bodies.circle(100, 0, 10);
  Matter.Composite.add(engine.world, ball);
  Matter.Engine.update(engine);

  const render = Matter.Render.create({
    element: canvas,
    engine: engine,
    })
  Matter.Render.run(render);
  Matter.Runner.run(engine);
})

The ball is stuck in the initial position set within the circle() method. I'm using vite for the local dev server.

• javascript
• sveltekit
• matter.js

• Can you please provide a minimal reproducible example? What version of MJS are you using? This looks like a pretty standard setup here, I'm unable to reproduce any issues. I doubt this has to do with Sveltekit specifically, so I'd just make a standalone, runnable MJS snippet like so that can be executed to show the problem right away. Thanks. – ggorlen Commented 1 hour ago
• Also, make sure there are no errors in your browser devtools console. – ggorlen Commented 1 hour ago
• @ggorlen I tested a minimal setup outside the sveltekit webapp and locally hosted a page with the following and it works just fine so I think its something to do with sveltekit since thats the only variable change I can see. – ClosingArc Commented 1 hour ago
• Excellent, thanks. The MJS in your example is 0.17.1. Which version of MJS are you using in your Sveltekit app? Matter.Runner.run(engine); changed in 0.20.0, and other version-specific changes are possible, so we should first eliminate that factor. If Sveltekit is also using 0.17.1 and it still fails, then version is not the issue, and you'll need to provide whatever delta Sveltekit causes it to fail (probably show a full, simple component). – ggorlen Commented 1 hour ago
• 1 @ggorlen Thank you so much! It looks like that change you linked is exactly what was going wrong in my sveltekit webapp. Was using old logic for 0.17.1 while using version 0.20.0 – ClosingArc Commented 56 mins ago

1 Answer 1

The snippet in the question isn't complete and reproducible--it's basically standard boilerplate, so I suggest providing full context (complete, runnable code). But in the meantime, I'll take a stab at a solution.

When Matter.js released 0.20, the behavior of Runner.run() changed. In 0.19, Runner.run() will automatically create a runner for you if one wasn't provided, but in 0.20, you need to create it yourself. No error occurs if you don't--MJS will just silently not run.

If you're using 0.19, you can use this:

const canvas = document.querySelector("div");
const engine = Matter.Engine.create();
const ball = Matter.Bodies.circle(100, 0, 50);
Matter.Composite.add(engine.world, ball);
const render = Matter.Render.create({element: canvas, engine});
Matter.Render.run(render);
Matter.Runner.run(engine);

<script src="https://cdnjs.cloudflare/ajax/libs/matter-js/0.19.0/matter.min.js"></script>
<div></div>

If you're using 0.20, you can use this, (which is also compatible with 0.19):

const canvas = document.querySelector("div");
const engine = Matter.Engine.create();
const ball = Matter.Bodies.circle(100, 0, 50);
Matter.Composite.add(engine.world, ball);
const render = Matter.Render.create({element: canvas, engine});
Matter.Render.run(render);
Matter.Runner.run(Matter.Runner.create(), engine);
//                ^^^^^^^^^^^^^^^^^^^^^^^^

<script src="https://cdnjs.cloudflare/ajax/libs/matter-js/0.20.0/matter.min.js"></script>
<div></div>

To possibly reproduce your error, run the 0.19 code with 0.20 and observe that the ball is not affected by gravity (actually, the entire engine does not run).

See also: After upgrading from 0.19.0 to 0.20.0, mouse response stopped working, and gravity effect failed. #1333

Note also that document.getElementById("canvas")! should be a container for the canvas MJS will create and inject a canvas into. If you're using your own canvas, you wouldn't need a Matter.Render. You can also use the canvas: property rather than element: if you want to specify a canvas.