Issue
I need to create a platform that can be rotated with the mouse. I tried to create a rectangle and connect it to the point with Matter.Constraint.create(), but such a platform can't be rotated with the mouse. I haven't found an alternative in demos or examples
This is the code I use:
(function(){
// Matter.js module aliases
var Engine = Matter.Engine;
World = Matter.World;
Render = Matter.Render;
Bodies = Matter.Bodies;
Composites = Matter.Composites;
Constraint = Matter.Constraint;
MouseConstraint = Matter.MouseConstraint;
// create a Matter.js engine
var _engine = Engine.create(document.body);
var rotatingPlatform = Bodies.rectangle(100, 200, 200, 30);
World.add(_engine.world, [
MouseConstraint.create(_engine),
rotatingPlatform,
Constraint.create({ pointA: {x: 100, y: 200}, bodyB: rotatingPlatform}),
]);
// run the engine
Engine.run(_engine);
})();
And the markup:
<!doctype html>
<html>
<head></head>
<body>
<script src="matter-0.8.0.js"></script>
<script src="myJsFile.js"></script>
</body>
</html>
What can I do to make this platform rotate with the mouse?
Solution
The question is a little old but since no one has answered it.
Adding this to the bottom of your script works for me:
Matter.Events.on(_engine, "mousemove", function(event) {
if (Matter.Bounds.contains(rotatingPlatform.bounds, event.mouse.position) && event.mouse.button == 0) {
targetAngle = Matter.Vector.angle(rotatingPlatform.position, event.mouse.position);
Matter.Body.rotate(rotatingPlatform, targetAngle - rotatingPlatform.angle);
}
});
_engine.world.gravity.y = 0;
Answered By - oxdeadbeef
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.