javascript - Sprite 图像未出现在 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}
});