3

我正在尝试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>

4

2 回答 2

9

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

// create a renderer
var render = Render.create({
  element: document.body,
  engine: engine,
  options: {wireframes: false}
});
于 2017-07-12T21:03:40.930 回答
1

设置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);
于 2019-08-07T14:02:22.850 回答