Box2dWebでオブジェクトを合体させてみる

今回からbox2dwebのジョイントをやっていきます
英気を養っていて更新遅くなっていました
決してサボッ・・・

今回は溶接ジョイントです。
単純に２つの衝突オブジェクト同士を合体します。
溶接ジョイントすると
あたかも１つのオブジェクトとして動いているようになります。
ジョイントによる合体と分解を行います

![スクリーンショット 2014-10-05 20.28.05.png](https://qiita-image-store.s3.amazonaws.com/0/55077/c9de92ae-a66a-27cc-e2ae-74b5bf43219a.png)

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

```js: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  // 衝突オブジェクトの形状（円）
     ,	b2WeldJointDef = Box2D.Dynamics.Joints.b2WeldJointDef // 溶接ジョイント
     ,  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(9,7);
		
    var fixDef = new b2FixtureDef;
    fixDef.density = 10.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(9,10);	
    fixDef.shape = new b2PolygonShape;
    fixDef.shape.SetAsBox(.5,.5);
		
    var box2 = world.CreateBody(bodyDef);
    box2.CreateFixture(fixDef);
		
    // 地面
    var holderDef = new b2BodyDef;
    holderDef.type = b2Body.b2_staticBody;
    holderDef.position.Set(10, 14);
		 
    var fd = new b2FixtureDef;
	fd.shape = new b2PolygonShape;
	fd.shape.SetAsBox(10,1);
		  
    var ground = world.CreateBody(holderDef);
    ground.CreateFixture(fd);
		
	// 溶接ジョイント	 
	var weldJointDef = new b2WeldJointDef();
	weldJointDef.Initialize(box1, box2, new b2Vec2(10,9));
	var weld_joint = world.CreateJoint(weldJointDef);
		    
    
    /////////////////////////////////////////////////////
 
    // デバッグ描画の設定      
    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);
      
    count = 0;
    function update() {
        world.Step(1 / 60, 10, 10); // 物理世界を更新する
        world.DrawDebugData(); // デバック描画
        world.ClearForces(); // 物理世界上の力をリセットする
        
        count++;
        // 一定時間後Joint削除
        if(count > 1000)
            world.DestroyJoint(weld_joint);
    };
      
</script>
```

溶接ジョイント用の変数を追加しておきます
b2WeldJointDefオブジェクトを使います

```
  b2WeldJointDef = Box2D.Dynamics.Joints.b2WeldJointDef // 溶接ジョイント
```
     
実際にジョイントしているのは次の箇所です。
Initialize関数で２つの衝突オブジェクトを合体します。

```
    // 溶接ジョイント	 
    var weldJointDef = new b2WeldJointDef();
	weldJointDef.Initialize(box1, box2, new b2Vec2(10,9));
	var weld_joint = world.CreateJoint(weldJointDef);
```	    

今回は一定時間後、合体を分解するように
ジョイント破壊の処理を仕込んでおきました

```
    // 一定時間後Joint削除
    if(count > 1000)
        world.DestroyJoint(weld_joint);
```

ゲームで使う場合は、
特定の上限を超えたら、ジョイントが破壊されるなど面白いかもしれませんね

乗ったら落ちる床とかなどに使えそうです。