I'm using Matter.js for some graphics and want this rectangle
let title = Bodies.rectangle(w / 2.4, height / 1.8, 300, 100, {
isStatic: true,
})
to get isStatic: false and fall when it's hit by some circles that are raining down on it. I've done some extensive Googling, but haven't really found anything else but this:
Events.on(engine, 'collisionStart', function (event) {
event.pairs.forEach(function (obj) {
console.log(
'BodyA is static: ' + obj.bodyA.isStatic + '. BodyB is static: ' + obj.bodyB.isStatic
)
})
})
This gives me all the collisions happening, but I haven't figured out how to set isStatic: false when something hits. Appreciate your help!
You can call Matter.Body.setStatic(body, false) on the body in question to make it active.
Here's an example:
const engine = Matter.Engine.create();
const render = Matter.Render.create({
element: document.body,
engine,
options: {width: 400, height: 400, wireframes: false},
});
const fallingBody = Matter.Bodies.rectangle(
200, 0, 20, 20, {
frictionAir: 0.1,
density: 0.8,
render: {fillStyle: "red"},
},
);
const wall = Matter.Bodies.rectangle(
200, 150, 400, 20, {
frictionAir: 0.05,
isStatic: true,
render: {fillStyle: "green"}
},
);
Matter.Composite.add(engine.world, [fallingBody, wall]);
Matter.Events.on(engine, "collisionStart", event => {
if (wall.isStatic && event.pairs.some(e => Object.values(e).includes(wall))) {
Matter.Body.setStatic(wall, false);
}
});
Matter.Render.run(render);
Matter.Runner.run(Matter.Runner.create(), engine);<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.18.0/matter.min.js"></script>