matter.jsという物理エンジンライブラリのオブジェクトの結合について
matter.jsのオブジェクトの結合でつまづいています。
下記コードでcarオブジェクトの上に四角形を3つ固定させたいのですが、うまく固定できずに困っています。どうすればうまくできますでしょうか?
var Engine = Matter.Engine,
Gui = Matter.Gui,
World = Matter.World,
Bodies = Matter.Bodies,
Body = Matter.Body,
Composite = Matter.Composite,
Composites = Matter.Composites,
Common = Matter.Common,
Events = Matter.Events;
MouseConstraint = Matter.MouseConstraint,
Constraint = Matter.Constraint;
var container = document.getElementById("canvas-container");
var engine = Engine.create(container,{render: {
options: {
wireframes:false,
showIds:true
}
}});
var offset = 5;
World.addBody(engine.world, Bodies.rectangle(400, -offset, 800.5 + 2 * offset, 50.5, { isStatic: true }));
World.addBody(engine.world, Bodies.rectangle(400, 600 + offset, 800.5 + 2 * offset, 50.5, { isStatic: true }));
World.addBody(engine.world, Bodies.rectangle(800 + offset, 300, 50.5, 600.5 + 2 * offset, { isStatic: true }));
World.addBody(engine.world, Bodies.rectangle(-offset, 300, 50.5, 600.5 + 2 * offset, { isStatic: true }));
var mouseConstraint = MouseConstraint.create(engine);
World.add(engine.world, mouseConstraint);
/* var testComp = Composite.create();
var car = Composites.car(200, 400, 100, 40 , 30);
//ここのパラメータは要調整
var testBody = Bodies.rectangle(200,400,10,10);
//carメソッドの内部を参考に追加 ここのパラメータも要調整
var axelTest = Constraint.create({
bodyA: car.bodies[0],
pointA: { x: 200, y:400 },
bodyB: testBody,
stiffness: 0
});
Composite.addBody(car,testBody);
Composite.addConstraint(car, axelTest);
//World.add(engine.world,Composite.add(car,testBody));
World.add(engine.world, car);
//World.add(engine.world, testBody); ここで追加はしません
Engine.run(engine);
World.add(engine.world,Composite.addBody(car,testBody));
//World.add(engine.world, testBody);
*/
var xx = 120;
var yy = 170;
var width = 200;
var height = 40;
var wheelSize = 20;
var groupId = Body.nextGroupId(),
wheelBase = 20,
wheelAOffset = -width * 0.5 + wheelBase,
wheelBOffset = width * 0.5 - wheelBase,
wheelYOffset = 40;
var car = Composite.create({ label: 'Car' }),
body = Bodies.rectangle(xx, yy, width, height, {
groupId: groupId,
friction: 0.01,
});
var wheelA = Bodies.circle(xx + wheelAOffset, yy + wheelYOffset, wheelSize, {
groupId: groupId,
restitution: 0.5,
friction: 0.9,
density: 0.01
});
var wheelB = Bodies.circle(xx + wheelBOffset, yy + wheelYOffset, wheelSize, {
groupId: groupId,
restitution: 0.5,
friction: 0.9,
density: 0.01
});
var axelA = Constraint.create({
bodyA: body,
pointA: { x: wheelAOffset, y: wheelYOffset },
bodyB: wheelA,
stiffness: 0.5
});
var axelB = Constraint.create({
bodyA: body,
pointA: { x: wheelBOffset, y: wheelYOffset },
bodyB: wheelB,
stiffness: 0.5
});
Composite.addBody(car, body);
Composite.addBody(car, wheelA);
Composite.addBody(car, wheelB);
Composite.addConstraint(car, axelA);
Composite.addConstraint(car, axelB);
var box = Composite.create({ label: 'box' });
var underBox = Bodies.rectangle(150,150,60,25);
var leftBox = Bodies.rectangle(110,127.5,25,70);
var rightBox = Bodies.rectangle(190,127.5,25,70);
var leftLabel = Constraint.create({
bodyA: underBox,
pointA: { x: -20,y: 0 },
bodyB: leftBox,
stiffness: 0.5
});
var rightLabel = Constraint.create({
bodyA: underBox,
pointA: { x: 20,y: 0 },
bodyB: rightBox,
stiffness: 0.5
});
// World.add(engine.world,underBox);
// World.add(engine.world,leftBox);
// World.add(engine.world,rightBox);
Composite.addBody(box,underBox);
Composite.addBody(box,leftBox);
Composite.addBody(box,rightBox);
Composite.addConstraint(box,leftLabel);
Composite.addConstraint(box,rightLabel);
var carLabel = Constraint.create({
bodyA: body,
pointA: { x: 0,y: 10 },
bodyB: underBox,
stiffness: 0.5
});
var carLabel2 = Constraint.create({
bodyA: body,
pointA: { x: -20,y: -10 },
bodyB: leftBox,
stiffness: 0.5
});
var carLabel3 = Constraint.create({
bodyA: body,
pointA: { x: 20,y: -10 },
bodyB: rightBox,
stiffness: 0.5
});
Composite.addComposite(car,box);
Composite.addConstraint(car,carLabel);
World.add(engine.world,car);
Engine.run(engine);
$("#left").click(function(t){
var carBodies = Composite.allBodies(car);
carBodies[1].force.x = 2;
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://github.com/liabru/matter-js/releases/download/0.8.0-alpha/matter-0.8.0.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore.js"></script>
<div id = "canvas-container"></div>
<input id = "left" type = "button" value = "left">