Box2dWeb로 도르래 만들기

이번에는 박스 2dweb에서 도르래 인터페이스를 한다.
이번 캡처는
두 충돌 대상을 활차에 매달는 동작을 실현하다

이번의 모든 소스 코드는
test.html

<canvas id="canvas" width="600px" height="420px" style="background-color:#333333;"></canvas>

<script type="text/javascript" src="Box2dWeb-2.1.a.3.min.js"></script>
<script type="text/javascript">

    // Box2Dオブジェクトを取得
    var b2Vec2 = Box2D.Common.Math.b2Vec2 // 2Dベクトル
     ,  b2BodyDef = Box2D.Dynamics.b2BodyDef // Body定義
     ,  b2Body = Box2D.Dynamics.b2Body // Body
     ,  b2FixtureDef = Box2D.Dynamics.b2FixtureDef // Fixture定義
     ,  b2Fixture = Box2D.Dynamics.b2Fixture // Fixture
     ,  b2World = Box2D.Dynamics.b2World // 物理世界
     ,  b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape // 衝突オブジェクトの形状（ポリゴン）
     ,  b2CircleShape = Box2D.Collision.Shapes.b2CircleShape  // 衝突オブジェクトの形状（円）
     ,  b2PulleyJointDef = Box2D.Dynamics.Joints.b2PulleyJointDef // 滑車ジョイント
     ,  b2DebugDraw = Box2D.Dynamics.b2DebugDraw // デバッグ描画


    // 世界を作る
    var world = new b2World(new b2Vec2(0,10), true);


    ///////////////////////////////////

    //box1      
    var bodyDef = new b2BodyDef;
    bodyDef.type = b2Body.b2_dynamicBody;
    bodyDef.position.Set(6,7);

    var fixDef = new b2FixtureDef;
    fixDef.density = 15.0;
    fixDef.friction = 0.5;
    fixDef.restitution = .5;

    fixDef.shape = new b2PolygonShape;
    fixDef.shape.SetAsBox(1,1);

    var box1 = world.CreateBody(bodyDef);
    box1.CreateFixture(fixDef);

    //box2      
    bodyDef.position.Set(16,7); 
    fixDef.density = 40;      
    var box2 = world.CreateBody(bodyDef);
    box2.CreateFixture(fixDef);

    // 地面
    bodyDef.type = b2Body.b2_staticBody;
    bodyDef.position.Set(10, 14);
    fixDef.shape = new b2PolygonShape;
    fixDef.shape.SetAsBox(10,1);

    var ground = world.CreateBody(bodyDef);
    ground.CreateFixture(fixDef);

    // 滑車ジョイント
    var myjoint = new b2PulleyJointDef();
    var worldAnchorOnBody1 = new b2Vec2(box1.GetPosition().x, box1.GetPosition().y);
    var worldAnchorOnBody2 = new b2Vec2(box2.GetPosition().x, box2.GetPosition().y);
    var worldAnchorGround1 = new b2Vec2(8,3);
    var worldAnchorGround2 = new b2Vec2(14,4);
    var ratio = 1;
    myjoint.Initialize(box1, box2, worldAnchorGround1, worldAnchorGround2, worldAnchorOnBody1, worldAnchorOnBody2, ratio);
    var pulleyjoint = world.CreateJoint(myjoint);

    ///////////////////////////////////


    // デバッグ描画の設定      
    var debugDraw = new b2DebugDraw();
    debugDraw.SetSprite ( document.getElementById ("canvas").getContext ("2d"));
    debugDraw.SetDrawScale(30);     //描画スケール
    debugDraw.SetFillAlpha(0.3);    //半透明値
    debugDraw.SetLineThickness(1.0);//線の太さ
    debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);// 何をデバッグ描画するか
    world.SetDebugDraw(debugDraw);

    window.setInterval(update,1000/60);

    function update() {
        world.Step(1 / 60, 10, 10); // 物理世界を更新する
        world.DrawDebugData(); // デバック描画
        world.ClearForces(); // 物理世界上の力をリセットする
    };

</script>

풀리 조인트용 b2 Pulley JointDef 객체가 추가되었습니다.

 var b2PulleyJointDef = Box2D.Dynamics.Joints.b2PulleyJointDef // 滑車ジョイント

도르래 이음매는 아래에서 진행된다.
World Anchor Ground 1과 World Anchor Ground 2
두 개의 활차 위치입니다.

    // 滑車ジョイント
    var myjoint = new b2PulleyJointDef();
    var worldAnchorOnBody1 = new b2Vec2(box1.GetPosition().x, box1.GetPosition().y);
    var worldAnchorOnBody2 = new b2Vec2(box2.GetPosition().x, box2.GetPosition().y);
    var worldAnchorGround1 = new b2Vec2(8,3);
    var worldAnchorGround2 = new b2Vec2(14,4);
    var ratio = 1;
    myjoint.Initialize(box1, box2, worldAnchorGround1, worldAnchorGround2, worldAnchorOnBody1, worldAnchorOnBody2, ratio);
    var pulleyjoint = world.CreateJoint(myjoint);

겸사겸사 말씀드리겠습니다.
World Anchor Ground 1
World Anchor Ground 2 를
같은 자리에 있으면 도르래를 하나로 만들 수 있어요.
액션 게임 공중 바닥에서 사용 가능