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

mklgxw1f 于 2023-02-28 发布在 Java

关注(0)|答案(2)|浏览(162)

我使用柏林噪声函数创建了一个游戏的背景，这给了我一个顶点数组，然后在前面添加一个顶点{x：0 y：WORLD_HEIGHT}，另一个位于数组末尾，即{x：世界宽度y：WORLD_HEIGHT}。我希望这能给予我一个随机顶部的平底。
那么我如何将其添加到matter.js世界中呢？我尝试使用以下内容创建基础：

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

但是我不知道用什么来做坐标，我想它们应该代表物体的中心，但是，我不知道那是什么，因为它是噪声，我想做的是指定第一个柏林噪声顶点的x & y。
我甚至不确定给定这些顶点matter.js是在创建单个实体还是多个实体。
这是正确的方法还是有其他方法可以做到这一点？我真的很难与文档和例子。

JavaScript

来源：https://stackoverflow.com/questions/69335490/how-to-create-a-random-ground-in-matter-js

2条答案

按热度按时间

czq61nw11#

我使用Matter.Body.setPosition(body, position)来覆盖质心，并根据它的bounds属性将地面放在我想要的位置。

const engine = Matter.Engine.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(engine);

<script src="https://cdn.jsdelivr.net/npm/poly-decomp@0.3.0/build/decomp.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js"></script>

如果没有setPosition，如果运行几次这个代码片段，你会发现事情发生了跳跃（只是用一个具体的例子重现OP的错误）：
一个二个一个一个
我没有使用柏林噪波，并且在上面的示例中有一些内部顶点没有被正确检测到，但结果应该是相同的。

赞(0）回复(0）举报 2023-02-28

guykilcj2#

应该是整数，所有的宽度和高度的噪音纹理。值在那些x，y整数的地方可以是浮点数...没有问题。
地形应该有相同的宽度和高度，并且这些地方的值将是地形的高度。

赞(0）回复(0）举报 2023-02-28