如何在matter.js中创建随机地面

Question

我正在使用 Perlin 噪声函数创建游戏的背景。这给了我一个顶点数组。然后，我在前面添加一个顶点，即 {x:0 y: WORLD_HEIGHT}，在数组末尾添加另一个顶点，即 {x: WORLD_WIDTH y: WORLD_HEIGHT}。我希望这能给我一个平坦的底座和一个随机的顶部。

那么我该如何将其添加到 Matter.js 世界中呢？ 我正在尝试使用;

创建地面

var terrain = Bodies.fromVertices(???, ???, vertexSets, {
    isStatic: true
}, true); 

但我不知道该用什么？？？坐标。我认为它们应该代表物体的中心。但是，我不知道那是什么，因为它是噪音。我想做的是指定第一个柏林噪声顶点的 x 和 y。

我什至不确定考虑到这些顶点，matter.js 正在创建单个主体还是多个主体。

这是正确的方法还是有其他方法可以做到这一点？我真的很挣扎于文档和示例。

Answer 1

我使用

Matter.Body.setPosition(body, position)

来覆盖质心，并根据其

bounds

属性将地面放置在我想要的位置。

const engine = Matter.Engine.create();
const runner = Matter.Runner.create();
const render = Matter.Render.create({
  element: document.body,
  engine: engine,
});
const w = 300;
const h = 300;

const vertices = [
  ...[...Array(16)].map((_, i) => ({
    x: i * 20,
    y: ~~(Math.random() * 40),
  })),
  {x: w, y: 100},
  {x: 0, y: 100},
];
const ground = Matter.Bodies.fromVertices(
  w - 10, h - 10, // offset by 10 pixels for illustration
  vertices,
  {isStatic: true},
  /* flagInternal =*/ true,
);

Matter.Body.setPosition(ground, {
  x: w - ground.bounds.min.x,
  y: h - ground.bounds.max.y + 110,
});

const {min: {x}, max: {y}} = ground.bounds;
console.log(x, y); // 10 120

Matter.Composite.add(engine.world, [ground]);
Matter.Render.run(render);
Matter.Runner.run(runner, engine);

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/decomp.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.20.0/matter.min.js"></script>

如果没有

setPosition

，如果你运行这个代码片段几次，你就会看到事情在跳跃（只是为了用一个具体的例子重现OP的错误）：

const engine = Matter.Engine.create();
const runner = Matter.Runner.create();
const render = Matter.Render.create({
  element: document.body,
  engine: engine,
});

const vertices = [
  ...[...Array(16)].map((_, i) => ({
    x: i * 20,
    y: ~~(Math.random() * 40),
  })),
  {x: 300, y: 100},
  {x: 0, y: 100},
];
const ground = Matter.Bodies.fromVertices(
  200, 100, vertices,
  {isStatic: true}, 
  /* flagInternal =*/ true,
);

Matter.Composite.add(engine.world, [ground]);
Matter.Render.run(render);
Matter.Runner.run(runner, engine);

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/decomp.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.20.0/matter.min.js"></script>

在上面的示例中没有正确检测到一些内部顶点，但如果使用自定义渲染器，结果应该表现相同并且看起来相同。

我也没有使用柏林噪声，这将是平滑锯齿的有用工具。这个例子足以展示基本概念，并且可以适应使用 Perlin 噪声来很容易地生成地形的顶部。

Answer 2

应该是整数，噪声纹理的所有宽度和高度。 x、y 整数位置的值可以是浮点数...没问题。

地形的宽度和高度应该相同，这些地方的值将是地形的高度。