matter-js
matter-js copied to clipboard
Using compound bodies with Bodies.fromVertices does not work it just shows a filled in shape.
Using compound bodies with Bodies.fromVertices does not work it just shows a filled in shape.
the set of vertices is: { x: 0.454546, y: 70 }, { x: 0.454546, y: 0.181816 }, { x: 42.5909, y: 0.181816 }, { x: 42.5909, y: 7.68182 }, { x: 8.90909, y: 7.68182 }, { x: 8.90909, y: 31.2727 }, { x: 40.4091, y: 31.2727 }, { x: 40.4091, y: 38.7727 }, { x: 8.90909, y: 38.7727 }, { x: 8.90909, y: 62.5 }, { x: 43.1364, y: 62.5 }, { x: 43.1364, y: 70 }
But I have tested lots of different vertices sets
code (ignore normalLetterBody and bubbleBody): ``` const root = await loadSvg(images[imageIndex]); const vertexBubbleSets = select(root, "path").map((path) => { return Vertices.scale(Svg.pathToVertices(path, 5), 1.25, 1.25) }); const vertexSets = select(root, "path").map((path) => { return Svg.pathToVertices(path, 5); }); console.log(vertexSets); const normalLetterBody = Bodies.fromVertices( xLocation, 120, vertexSets, // coordinates { render: { fillStyle: "red", strokeStyle: "blue", lineWidth: 1 }, restitution: parseFloat(restitution), density: parseFloat(density), friction: parseFloat(friction), }, true, ); const bubbleBody = Bodies.fromVertices( xLocation, 120, vertexBubbleSets, // coordinates { render: { fillStyle: "transparent", strokeStyle: "red", lineWidth: 1, }, restitution: parseFloat(restitution), density: parseFloat(density), friction: parseFloat(friction), }, false, ) const compoundBody = Body.create({ parts: [Bodies.fromVertices( xLocation, 120, vertexSets, // coordinates { render: { fillStyle: "red", strokeStyle: "blue", lineWidth: 1 }, restitution: parseFloat(restitution), density: parseFloat(density), friction: parseFloat(friction), }, true, )], }); Composite.add( physicsRunner.engine.world, compoundBody );
I think the issue comes from Render.bodies where there needs to be recursion for rendering the body parts. As a body part can have parts