matter.jsのobjectの結合について

matter.jsという物理エンジンライブラリについての質問です。
下記のコードを実行すると車と四角が出てくると思うのですが、その二つを結合するにはどうすればいいのでしょうか？
具体的には、車の上に四角を結合させて固定させたいのですが、どうすればいいのでしょうか？
Compositeにaddというメソッドがあり、それで結合できないかと色々試したのですが、うまくいかず質問しました。
よろしくお願いします。

lang
1<html>
2<head>
3	<title>carGetList</title>
4	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
5
6    <script src="./js/matter-0.8.0.js" type="text/javascript"></script>
7    <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore.js"></script>
8    <div id = "canvas-container"></div>
9</head>
10<body>
11<script>
12	var Engine = Matter.Engine,
13        Gui = Matter.Gui,
14        World = Matter.World,
15        Bodies = Matter.Bodies,
16        Body = Matter.Body,
17        Composite = Matter.Composite,
18        Composites = Matter.Composites,
19        Common = Matter.Common,
20        Events = Matter.Events;
21        MouseConstraint = Matter.MouseConstraint,
22        Constraint = Matter.Constraint;
23
24
25    var container = document.getElementById("canvas-container");
26
27    var engine = Engine.create(container,{render: {
28    	options: {
29      	  wireframes:false,
30          showIds:true
31    	}
32    }});
33
34
35
36
37    var offset = 5;
38  	World.addBody(engine.world, Bodies.rectangle(400, -offset, 800.5 + 2 * offset, 50.5, { isStatic: true }));
39    World.addBody(engine.world, Bodies.rectangle(400, 600 + offset, 800.5 + 2 * offset, 50.5, { isStatic: true }));
40    World.addBody(engine.world, Bodies.rectangle(800 + offset, 300, 50.5, 600.5 + 2 * offset, { isStatic: true }));
41    World.addBody(engine.world, Bodies.rectangle(-offset, 300, 50.5, 600.5 + 2 * offset, { isStatic: true }));
42
43
44    var mouseConstraint = MouseConstraint.create(engine);
45	World.add(engine.world, mouseConstraint);
46
47	var testComp = Composite.create();
48    var car = Composites.car(200, 400, 100, 40 , 30);
49    var testBody = Bodies.rectangle(100,100,70,70);
50
51
52    //World.add(engine.world,Composite.add(car,testBody));
53
54
55    World.add(engine.world, car);
56    World.add(engine.world, testBody);
57
58    Engine.run(engine);
59
60
61</script>
62</body>
63</html>
64コード

行動規範の内容に同意します

回答2件

ベストアンサー

carメソッドの処理（台形＋円＋円）を見ると参考になります。
とりあえずで書いてみたので位置の設定は調整してみてください。

lang
1    //一部省略
2
3    var mouseConstraint = MouseConstraint.create(engine);
4    World.add(engine.world, mouseConstraint);
5
6    var testComp = Composite.create();
7    var car = Composites.car(200, 400, 100, 40 , 30);
8
9    //ここのパラメータは要調整
10    var testBody = Bodies.rectangle(200,340,70,70);
11
12    //carメソッドの内部を参考に追加　ここのパラメータも要調整
13    var axelTest = Constraint.create({
14            bodyA: car.bodies[0],
15            pointA: { x: 0, y: 0 },
16            bodyB: testBody,
17            stiffness: 0
18        });
19    Composite.addBody(car,testBody);
20    Composite.addConstraint(car, axelTest);
21
22    //World.add(engine.world,Composite.add(car,testBody));
23
24    World.add(engine.world, car);
25    //World.add(engine.world, testBody); ここで追加はしません
26    Engine.run(engine);