Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Box2dWebで動く床を作ってみる

More than 3 years have passed since last update.

今回はbox2dwebで直動ジョイントをやります。
直動ジョイントはモータで平行移動方向への動きをつけることができます。
いわゆるピストン運動です。

今回のスクリーンショットです。
動く床を作ってみました

スクリーンショット 2014-10-06 1.21.34.png

今回の全ソースコードです。

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  // 衝突オブジェクトの形状(円)
     ,  b2PrismaticJointDef = Box2D.Dynamics.Joints.b2PrismaticJointDef // 直動ジョイント
     ,  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(7,8);

    var fixDef = new b2FixtureDef;
    fixDef.density = 100.0;
    fixDef.friction = 1.0;
    fixDef.restitution = .5;        
    fixDef.shape = new b2PolygonShape;
    fixDef.shape.SetAsBox(5,.5);

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

    //box2
    fixDef.density = 1000.0;
    fixDef.shape.SetAsBox(.5,.5);
    bodyDef.position.Set(8,5);
    var box2 = world.CreateBody(bodyDef);
    box2.CreateFixture(fixDef);

    // 直動ジョイント        
    var worldAxis = new b2Vec2(1, 0);
    var prismaticJointDef = new b2PrismaticJointDef();
    prismaticJointDef.Initialize(world.GetGroundBody(), box1, box1.GetWorldCenter(), worldAxis);     
    prismaticJointDef.lowerTranslation = -5.0;
    prismaticJointDef.upperTranslation = 5.0;
    prismaticJointDef.enableLimit = true;
    prismaticJointDef.maxMotorForce = 20;
    prismaticJointDef.motorSpeed = 5;
    prismaticJointDef.enableMotor = true;
    var prismaticJoint = world.CreateJoint(prismaticJointDef);



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


    // デバッグ描画の設定      
    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(); // 物理世界上の力をリセットする

        if(box1.GetPosition().x >= 8){
            prismaticJoint.SetMotorSpeed(-5);
        }
        if(box1.GetPosition().x <= 3){
            prismaticJoint.SetMotorSpeed(5);
        }
    };

</script>

直動ジョイントを使うためには
b2PrismaticJointDefオブジェクトを使います

     var b2PrismaticJointDef = Box2D.Dynamics.Joints.b2PrismaticJointDef // 直動ジョイント

直動ジョイントをしている箇所です。
worldAxisは可動方向です。
Initialize関数で今回は物理世界にひも付けしています。
lowerTranslationは移動距離の最小値です
upperTranslationは移動距離の最大値です。
この値を超えると止まります。
(見た目上止まるのですが、モータは止まらないため明示的にモータを制御しないと力がかかり続けます)
enableLimitフラグで制限を有効にします。

maxMotorForceはモータ力の最大値です。
motorSpeedはモータのスピードです。
enableMotorはモータの有効化フラグです。

    // 直動ジョイント        
    var worldAxis = new b2Vec2(1, 0);
    var prismaticJointDef = new b2PrismaticJointDef();
    prismaticJointDef.Initialize(world.GetGroundBody(), box1, box1.GetWorldCenter(), worldAxis);     
    prismaticJointDef.lowerTranslation = -5.0;
    prismaticJointDef.upperTranslation = 5.0;
    prismaticJointDef.enableLimit = true;
    prismaticJointDef.maxMotorForce = 20;
    prismaticJointDef.motorSpeed = 5;
    prismaticJointDef.enableMotor = true;
    var prismaticJoint = world.CreateJoint(prismaticJointDef);
teradonburi
気管支喘息を患って死にかけです。 いつ死ぬかわかりません。 成人喘息は誰でもなりえるものだし、 咳喘息から気管支喘息に進行すると慢性的な死の危険があるものです。 自身や周りで数週間咳が続いてる人がいたら気をつけて・・・ Twitterフォローいただけたらフォロバします。 https://twitter.com/teradonburi
meetsmore
プロを探せる見積りプラットフォーム「ミツモア」の開発・運営
https://meetsmore.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away