精灵图像未出现在 matter.js

Question

我正在尝试用图像 sprite 替换标准 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

您正在用线框绘制所有内容。使用 options: {wireframes: false}:

更改您的 Render.create() 调用以关闭线框

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

Answer 2

设置wireframes: false就成功了一半，还需要先载入图片再设置为纹理

您必须在将其设置为纹理之前加载图像，否则会出现错误

HTMLImageElement is in "broken" state

对我来说，这个问题最终打印了 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);

精灵图像未出现在 matter.js

Sprite image not appearing on matter.js

javascript

html

matter.js