Início / coding / Perguntas / 79554191
Accepted
ClosingArc
Asked: 2025-04-04 07:40:30 +0800 CST

Bola MatterJS não é afetada pela gravidade na versão 0.20.0

  • 772

Estou tentando integrar um jogo, construído com matter-js, no meu webapp SvelteKit existente, mas estou ficando perplexo sobre o porquê da gravidade não estar afetando o corpo circular que estou adicionando. O seguinte é o código typescript dentro do meu arquivo svelte:

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);
})

A bola está presa na posição inicial definida dentro do método circle(). Estou usando vite para o servidor dev local.

javascript

1 respostas

  1. Best Answer

    O snippet na pergunta não é completo e reproduzível--é basicamente um boilerplate padrão, então sugiro fornecer contexto completo (código completo e executável). Mas, enquanto isso, vou tentar uma solução.

    Quando o Matter.js lançou a versão 0.20, o comportamento do Runner.run()mudou. Na versão 0.19, Runner.run()criará automaticamente um runner para você se um não tiver sido fornecido, mas na versão 0.20, você precisa criá-lo você mesmo. Nenhum erro ocorre se você não fizer isso--o MJS simplesmente não será executado silenciosamente.

    Se estiver usando 0,19, você pode usar isto:

    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.com/ajax/libs/matter-js/0.19.0/matter.min.js"></script>
<div></div>

    Se você estiver usando 0,20, você pode usar isto (que também é compatível com 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.com/ajax/libs/matter-js/0.20.0/matter.min.js"></script>
<div></div>

    Para possivelmente reproduzir seu erro, execute o código 0,19 com 0,20 e observe que a bola não é afetada pela gravidade (na verdade, o motor inteiro não funciona).

    Veja também: Após a atualização de 0.19.0 para 0.20.0, a resposta do mouse parou de funcionar e o efeito da gravidade falhou. #1333

    Note também que document.getElementById("canvas")!deve ser um contêiner para o canvas que o MJS criará e injetará um canvas nele. Se você estiver usando seu próprio canvas, não precisará de um Matter.Render. Você também pode usar a canvas:propriedade em vez de element:se quiser especificar um canvas.

    • 0

relate perguntas