Matter.js: Is There Any Way To Animate My Sprite

I know in traditional HTML5 canvas, we can use drawImage method (the longest one with 9 properties) and change frameX and frameY to make sprite sheet animation. But I am new to mat

Solution 1:

There may be a fundamental misconception here. Matter.js is a physics engine that can plug into any rendering front-end. You don't have to use the built-in MJS rendering engine which is primarily there for prototyping. You can use your existing HTML5 code or something like Phaser which has robust support for sprite sheets.

Here's a simple proof-of-concept using vanilla JS to render a sprite animation with MJS as the physics engine. The approach is to call Matter.Engine.update(engine); to run the engine each frame and use coin.position to draw the sprite. More complex animations might use vertices and angle as shown here and here in addition to the sprite sheet, but this is use-case dependent.

(async () => {
  const image = awaitnewPromise((resolve, reject) => {
    const image = newImage();
    image.onload = () =>resolve(image);
    image.onerror = reject;
    image.src = "https://art.pixilart.com/c7f297523ce57fc.png";
  });
  const canvas = document.querySelector("canvas");
  const ctx = canvas.getContext("2d");
  canvas.width = 500;
  canvas.height = 250;
  
  const engine = Matter.Engine.create();
  const coin = Matter.Bodies.circle(100, 0, 100, {
    density: 0.0005,
    frictionAir: 0.06,
    restitution: 0,
    friction: 0,
  });
  const ground = Matter.Bodies.rectangle(
    0, 350, 1500, 170, {isStatic: true}
  );
  const mouseConstraint = Matter.MouseConstraint.create(
    engine, {element: canvas}
  );
  Matter.World.add(
    engine.world, [coin, ground, mouseConstraint]
  );
  
  const w = 200;
  const h = 170;
  let frameNumber = 0;
  
  (functionrerender() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    const offset = (~~frameNumber * w) % image.width;
    const {x, y} = coin.position;
    ctx.drawImage(
      image,      // image
      offset,     // sx40,         // sy
      w,          // sWidth
      h,          // sHeight
      x - w / 2,  // dx
      y - h / 2,  // dy
      w,          // dWidth
      h           // dHeight
    );
    frameNumber += 0.1;
    Matter.Engine.update(engine);
    requestAnimationFrame(rerender);
  })();
})();

canvas {
  border: 1px solid black;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.17.1/matter.min.js"></script><canvas></canvas>