something.js:有没有办法让我的精灵动画 [英] matter.js: is there any way to animate my sprite

问题描述

我知道在传统的HTML5画布中，我们可以使用drawImage方法(具有9个属性的最长的方法)并更改frameX和frameY来制作精灵表动画.但是，我对Matt.js并不陌生.我已经检查了issue.js文档，但对如何使我的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!

推荐答案

这里可能存在一个基本的误解.Matter.js是一个物理引擎，可以插入任何渲染前端.您不必使用内置的MJS渲染引擎，该引擎主要用于原型制作.您可以使用现有的HTML5代码或类似 Phaser

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.

这是一个简单的概念验证，使用香草JS以MJS作为物理引擎来渲染精灵动画.该方法是调用 Matter.Engine.update(engine); 每帧运行引擎，并使用 coin.position 绘制精灵.如此处所示，更复杂的动画可能会使用顶点和 angle 除了Sprite工作表之外，此处，但这取决于用例.

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>

这篇关于something.js:有没有办法让我的精灵动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！