I made a little progress in testing Matter.JS. I managed to create a few elements and show the constraint line that attaches to a box. I also got the background color to change without using the "window ['HYPE_DEBUG_PHYSICS'] = true;" head script.
There is a caveat though, all of the Matter.JS world is outside of Hype's stage.
Another caveat is that you have to have an element with its Physics set to Static or Dynamic or the MATTER WORLD will not show in Preview. But it's Still Fun to Play With!
matter_example2.hype.zip (11.4 KB)
You'll need to pick apart the hype file to see how I got things to work.
I cleaned up the script...
Engine = Matter.Engine,
Render = Matter.Render,
World = Matter.World,
Bodies = Matter.Bodies;
engine = Engine.create();
render = Render.create({
element: document.body,
engine: engine,
options: {
width: 825,
height: 650,
pixelRatio: 1,
// background: 'green', // does not seem to work
wireframeBackground: 'blue',
hasBounds: false,
enabled: true,
// wireframes: true,
showSleeping: false,
showDebug: false,
showBroadphase: false,
showBounds: false,
showVelocity: false,
showCollisions: false,
showSeparations: false,
showAxes: true,
showPositions: true,
showAngleIndicator: false,
showIds: true,
showShadows: false,
showVertexNumbers: false,
showConvexHulls: false,
showInternalEdges: false,
showMousePosition: false
}
});
var circleA = Bodies.circle(235, 30, 45, { isStatic: false }); // x, y radius -- 'isDynamic: true' works too
var boxB = Bodies.rectangle(175, 150, 100, 50, { isStatic: false } );
var boxC = Bodies.rectangle(330, 320, 80, 80, { isStatic: true }); // (x, y, w, h) x,y are center of box (x = horizontal, y = verticle)
var ground = Bodies.rectangle(400, 600, 810, 60, { isStatic: true }); // bottom rectangle
var constraint = Matter.Constraint.create({
bodyA: boxC,
pointA : { x : -75, y: -305}, // place point A of constraint
bodyB: boxB,
pointB : { x : 50, y: 0}, // attach constraint to boxB
stiffness: 0.005,
length: 200,
render: {
type: 'spring', // can be 'line' or 'pin'
visible: true, // false will hide the lines in hype_debug_physics
lineWidth: 6,
strokeStyle: 'green',
anchors: true, // shows anchor points --seems it's not working?
}});
World.add(engine.world,[circleA, boxB, boxC, ground, constraint]);
Engine.run(engine);
Render.run(render);
matter_example3.hype.zip (11.7 KB)
.
