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 matter.js. I've checked matter.js document but still don't have any idea about how to animate my sprite. Here is my object:

const ball = Bodies.circle(340, 340, 10, {
  density: 0.0005,
  frictionAir: 0.06,
  restitution: 0,
  friction: 0,

  render: {
    sprite: {
      texture: "images/blueMonster.png", 
      yScale: 0.2,
      xScale: 0.2,
      isStatic: true,
    },
  },
  inertia: Infinity,
  label: "ball",
});

World.add(world, ball);

If I need to provide more info to solve this problem, please let me know. Thank you very much for your time!

回答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 = await new Promise((resolve, reject) => {
    const image = new Image();
    image.onload = function () {
      resolve(this);
    };
    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;
  
  (function rerender() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    const offset = (~~frameNumber * w) % image.width;
    const {x, y} = coin.position;
    ctx.drawImage(image, offset, 40, w, h, x - w / 2, y - h / 2, w, h);
    frameNumber += 0.1;
    Matter.Engine.update(engine);
    requestAnimationFrame(rerender);
  })();
})();

canvas {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.14.2/matter.min.js" integrity="sha512-pi0tSRZdlNRZeANPwdAIHRAYg6gZZV6QlAiyHXn5TYqLzBKE9jlttO/QgYLMhISD6oNv2kPsVelx+n5nw0FqKA==" crossorigin="anonymous"></script>
<canvas></canvas>

来源：https://stackoverflow.com/questions/65207865/matter-js-is-there-any-way-to-animate-my-sprite

标签

javascript

matter.js