javascript - MatterJS Ball Not Affected by Gravity in version 0.20.0 - Stack Overflow

admin管理员组

文章数量:1344241

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

Share Improve this question Follow edited 53 mins ago ggorlen 57.8k88 gold badges113113 silver badges157157 bronze badges asked 4 hours ago ClosingArcClosingArc 311 bronze badge New contributor ClosingArc is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct. 5

• 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

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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.

本文标签： javascriptMatterJS Ball Not Affected by Gravity in version 0200Stack Overflow