精灵图像没有出现在matter.js上

Question

我正在尝试用图像精灵替换标准的circle body，但它没有显示图像。

var Engine = Matter.Engine,
  Render = Matter.Render,
  World = Matter.World,
  Bodies = Matter.Bodies,
  Body = Matter.Body,
  Constraint = Matter.Constraint,
  Vector = Matter.Vector,
  Events = Matter.Events,
  Mouse = Matter.Mouse,
  MouseConstraint = Matter.MouseConstraint;

// create an engine
var engine = Engine.create();

engine.world.gravity.y = 0; // gravity not needed in this app

// create a renderer
var render = Render.create({
  element: document.body,
  engine: engine
});

var ball_0 = Bodies.circle(100, 100, 11, {
  density: 0.04,
  frictionAir: 0.06,
  restitution: 0.8,
  friction: 0.01,
  render: {
    sprite: {
      texture: 'images/white.png',
      xScale: 20,
      yScale: 20
    }
  }
});

// add all of the bodies to the world
World.add(engine.world, ball_0);

// run the engine
Engine.run(engine);

// run the renderer
Render.run(render);

<script src="https://github.com/liabru/matter-js/releases/download/0.10.0/matter.min.js"></script>

Answer 1

您正在线框中绘制所有内容。更改您的 Render.create() 调用以使用 options: {wireframes: false} 关闭线框：

// create a renderer
var render = Render.create({
  element: document.body,
  engine: engine,
  options: {wireframes: false}
});

Answer 2

设置wireframes: false是一半的答案，你还需要先加载图像，然后再将其设置为纹理

你必须先加载图像，然后再将其设置为纹理，否则会出错

HTMLImageElement 处于“损坏”状态

对我来说，这个问题最终会打印出 900 多条错误消息，导致我的沙箱崩溃。

解决方案：我创建了一个简单的图像加载器：

const loadImage = (url, onSuccess, onError) => {
  const img = new Image();
  img.onload = () => {
    onSuccess(img.src);
  };
  img.onerror = onError();
  img.src = url;
};

后来我使用那个加载器来加载纹理。加载纹理后，您可以将其设置为 Body 对象的纹理。

 loadImage(
      "./assets/blue.jpg",
      url => {
        console.log("Success");
        World.add(world, [
          Bodies.circle(340, 340, 100, {
            density: 0.0005,
            frictionAir: 0.06,
            restitution: 0.3,
            friction: 0.01,
            render: {
              sprite: {
                texture: url // set texture here
              }
            }
          })
        ]);
      },
      () => {
        console.log("Error  Loading ");
      }
    );

重要提示：在调用Renderer.run() 之前，您必须禁用线框

// create renderer
var render = Render.create({
  element: document.body,
  engine: engine,
  options: {
    width: 800,
    height: 600,
    wireframes: false, // disable Wireframe
  }
});

Render.run(render);