Estoy tratando de usar Matter.Query.region para ver si el personaje de mi juego está conectado a tierra. Pero, cuando trato de ejecutar una region con un objeto de límites que creé (que se muestra con los puntos que se muestran en el juego), no aparece ninguna colisión a pesar de que claramente se cruza con otros cuerpos.
Código:
let Engine = Matter.Engine, Runner = Matter.Runner, World = Matter.World, Bodies = Matter.Bodies, Body = Matter.Body, Composite = Matter.Composite; let engine; let boxA; let boxB; let platforms = []; function setup() { createCanvas(550, 400); // create an engine engine = Engine.create(); // create two boxes and a ground boxA = Bodies.rectangle(275, 200, 80, 80, { mass: 20 }); platforms.push(boxA); boxB = Bodies.rectangle(300, 50, 80, 80, { mass: 20 }); Body.setInertia(boxB, Infinity); ground = Bodies.rectangle(250, 410, 810, 60, { isStatic: true }); platforms.push(ground); // add all of the bodies to the world World.add(engine.world, [boxA, boxB, ground]); let runner = Runner.create(); Runner.run(runner, engine); } // Using p5 to render function draw() { let add = Matter.Vector.add; // alias let leeway = {x: 0, y: 30} let topLeft = {x: boxB.position.x - 40, y: boxB.position.y + 40} let topRight = add(topLeft, {x: 80, y: 0}); let bottomLeft = add(topLeft, leeway); let bottomRight = add(topRight, leeway); let bounds = Matter.Bounds.create(topLeft, topRight, bottomRight, bottomLeft); let query = Matter.Query.region(platforms, bounds); console.log(Matter.Bounds.overlaps(bounds, boxA.bounds), query); background(51); keyDown(); drawShape(boxA); drawShape(boxB); drawShape(ground, 127); push(); // Show bounds stroke('purple'); strokeWeight(10); point(topLeft.x, topLeft.y); point(topRight.x, topRight.y); point(bottomLeft.x, bottomLeft.y); point(bottomRight.x, bottomRight.y); pop(); } function drawShape(body, color = 225) { beginShape(); fill(color); for (let vertice of body.vertices) { vertex(vertice.x, vertice.y); } endShape(); } function keyPressed() { let jumpHeight = 14; if (keyCode === UP_ARROW) { Body.setVelocity(boxB, {x:boxB.velocity.x, y:-jumpHeight}) } } function keyDown() { let velocity = 12; let targetX = boxB.velocity.x; if (keyIsDown(RIGHT_ARROW)) { targetX = velocity; } else if (keyIsDown(LEFT_ARROW)) { targetX = -velocity; } else { targetX = 0; } targetX = lerp(boxB.velocity.x, targetX, 0.1); Body.setVelocity(boxB, {x: targetX, y: boxB.velocity.y}); } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.18.0/matter.min.js" integrity="sha512-5T245ZTH0m0RfONiFm2NF0zcYcmAuNzcGyPSQ18j8Bs5Pbfhp5HP1hosrR8XRt5M3kSRqzjNMYpm2+it/AUX/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>Código completo: https://replit.com/@CrazyVideoGamer/MatterQueryregion-not-working#sketch.js
Por cierto, el carácter es la variable boxB , y puedes moverte con las teclas de flecha.
El objeto de límites no parece haberse creado correctamente. Los vértices púrpuras de p5 que está representando pueden darle una falsa sensación de confianza, ya que no están necesariamente relacionados con lo que ve MJS.
En realidad, es una solución bastante simple, pasar una serie de vértices en lugar de argumentos individuales:
let bounds = Matter.Bounds.create([topLeft, topRight, bottomRight, bottomLeft]); // ^ ^Terminé limpiando un poco las cosas en el proceso de depuración e hice que la colisión fuera más fácil de visualizar sin la consola. Siéntase libre de usar parte de este código si lo necesita o simplemente haga el cambio que mejor le parezca.
const {Engine, Runner, Composite, Bodies, Body} = Matter; let engine; let boxA; let boxB; const platforms = []; function setup() { createCanvas(550, 400); engine = Engine.create(); // create two boxes and a ground boxA = Bodies.rectangle(275, 200, 80, 80, { mass: 20 }); platforms.push(boxA); boxB = Bodies.rectangle(300, 50, 80, 80, { mass: 20 }); Body.setInertia(boxB, Infinity); // TODO remove for realism ground = Bodies.rectangle(250, 410, 810, 60, { isStatic: true }); platforms.push(ground); Composite.add(engine.world, [boxA, boxB, ground]); Runner.run(Runner.create(), engine); } function draw() { const {x, y} = boxB.position; const vertices = [ // FIXME hardcoded values for now... {x: x - 40, y: y + 40}, {x: x + 40, y: y + 40}, {x: x + 40, y: y + 50}, {x: x - 40, y: y + 50}, ]; const bounds = Matter.Bounds.create(vertices, boxB); // return valaue holds the collided platform(s) const collisions = Matter.Query.region(platforms, bounds); background(51); keyDown(); drawShape(boxA); drawShape(boxB); drawShape(ground, 127); push(); // Show bounds collision stroke(collisions.length ? 'red' : 'purple'); strokeWeight(10); vertices.forEach(({x, y}) => point(x, y)); pop(); } function drawShape(body, color=225) { beginShape(); fill(color); body.vertices.forEach(({x, y}) => vertex(x, y)); endShape(); } function keyPressed() { const jumpHeight = 14; if (keyCode === UP_ARROW) { Body.setVelocity(boxB, {x: boxB.velocity.x, y: -jumpHeight}) } } function keyDown() { const velocity = 12; let targetX = 0; if (keyIsDown(RIGHT_ARROW)) { targetX = velocity; } else if (keyIsDown(LEFT_ARROW)) { targetX = -velocity; } targetX = lerp(boxB.velocity.x, targetX, 0.1); Body.setVelocity(boxB, {x: targetX, y: boxB.velocity.y}); } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.18.0/matter.min.js"></script>