今回からbox2dwebのジョイントをやっていきます
英気を養っていて更新遅くなっていました
決してサボッ・・・
今回は溶接ジョイントです。
単純に2つの衝突オブジェクト同士を合体します。
溶接ジョイントすると
あたかも1つのオブジェクトとして動いているようになります。
ジョイントによる合体と分解を行います
今回の全ソースコードです。
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関数で2つの衝突オブジェクトを合体します。
// 溶接ジョイント
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);
ゲームで使う場合は、
特定の上限を超えたら、ジョイントが破壊されるなど面白いかもしれませんね
乗ったら落ちる床とかなどに使えそうです。