Спрайт-изображение не появляется на материи.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);