Javascript 有没有办法给我的精灵设置动画

我知道在传统的HTML5画布中，我们可以使用drawImage方法（最长的一种方法，有9个属性）并更改frameX和frameY来制作精灵表动画。但我对matter.js是新手。我已经查看了matter.js文档，但仍然不知道如何为我的精灵设置动画。这是我的目标：

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

---

如果我需要提供更多信息来解决这个问题，请让我知道。非常感谢您抽出时间

这里可能有一个基本的误解。js是一个物理引擎，可以插入任何渲染前端。您不必使用内置的MJS渲染引擎，该引擎主要用于原型制作。您可以使用现有的HTML5代码或类似的东西，这些代码对sprite表单具有强大的支持

这里有一个简单的概念证明，使用vanilla JS以MJS作为物理引擎渲染精灵动画。方法是调用Matter.Engine.updateengine；要在每帧运行引擎，请使用coin.position绘制精灵。更复杂的动画可能会使用顶点和角度（如图所示）以及精灵表，但这取决于用例

异步=>{ const image=等待新的PromiserSolve，拒绝=>{ 常量图像=新图像； image.onload=函数{ 解决这个问题； }; image.onerror=拒绝； image.src=https://art.pixilart.com/c7f297523ce57fc.png; }; const canvas=document.querySelectorcanvas； const ctx=canvas.getContext2d； 画布宽度=500； canvas.height=250； const engine=Matter.engine.create； const coin=material.Bodies.circle100,0100{ 密度：0.0005， 摩擦空气：0.06， 归还：0， 摩擦力：0， }; const ground=Matter.Bodies.rectangle 03501500170，{isStatic:true} ; const mouseConstraint=Matter.mouseConstraint.create 引擎，{element:canvas} ; Matter.World.add engine.world[硬币、地面、鼠标约束] ; 常数w=200； 常数h=170； 设frameNumber=0； 函数重读器{ ctx.clearRect0，0，canvas.width，canvas.height； 常量偏移量=~~帧数*w%image.width； 常数{x，y}=coin.position； ctx.drawImageimage，偏移量，40，宽，高，x-w/2，y-h/2，宽，高； 帧数+=0.1； 物质。引擎。更新引擎； requestAnimationFramererender； }; }; 帆布{ 边框：1px纯黑； }

---

欢迎来到SO！内置渲染实际上是为了演示。可以使用传统的HTML5画布将MJ添加到现有的spritesheet代码中。