質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.04%

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

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 1,112

score 13

前回オブジェクトの結合の件でここで質問させていただいて、大変参考になりました。
しかし、carオブジェクトの上に箱のように四角形を配置しようとするとうまくいかず困っております。
どのようにすればうまく箱を固定できますか

<!DOCTYPE html>
<html>
<head>
    <title>carGetList</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <script src="./js/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">

</head>
<body>
<script>
    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>
</body>
</html>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.04%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

関連ワード: matter.js