Estoy creando el terreno de un juego usando una función de ruido de Perlin. Esto me da una serie de vértices. Luego agrego un vértice al frente que es {x:0 y: WORLD_HEIGHT} y otro al final de la matriz que es {x: WORLD_WIDTH y: WORLD_HEIGHT}. Espero que eso me dé una base plana con una parte superior al azar.
Entonces, ¿cómo agrego esto al mundo de matter.js? Estoy tratando de crear el suelo usando;
var terrain = Bodies.fromVertices(???, ???, vertexSets, { isStatic: true }, true);pero no se que usar para el??? coordenadas. Creo que se supone que representan el centro del objeto. Sin embargo, no sé qué es eso porque es ruido. Lo que me gustaría hacer es especificar el x & y del primer vértice de ruido perlin.
Ni siquiera estoy seguro de que, dados estos vértices, importe.js esté creando un solo cuerpo o varios.
¿Es esta la forma correcta de abordarlo o hay otra forma de hacerlo? Realmente estoy luchando con los documentos y los ejemplos.
Uso Matter.Body.setPosition(body, position) para anular el centro de masa y colocar el suelo donde quiero según su propiedad debounds .
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.18.0/matter.min.js"></script> Sin setPosition , puede ver que las cosas saltan si ejecuta este fragmento varias veces (solo para reproducir el error de OP con un ejemplo concreto):
const engine = Matter.Engine.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(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.18.0/matter.min.js"></script>No estoy usando el ruido de Perlin y hay algunos vértices internos que no se detectan correctamente en los ejemplos anteriores, pero el resultado debería ser el mismo de cualquier manera.
deben ser números enteros, todo el ancho y alto de la textura de ruido. los valores en esos lugares enteros x, y pueden ser flotantes... no hay problema.
y el mismo ancho y alto deben ir al terreno y los valores en esos lugares serán la altura del terreno.