Box2dWeb을 사용하여 복잡한 충돌 객체 만들기

이번에는 복잡한 충돌 대상을 만들었다
말하기도 간단하다.
• Fixture 만들기
· 바디에 여러 개의 Fixture 추가
이것뿐이다
이번 캡처는

이번의 모든 소스 코드는
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  // 衝突オブジェクトの形状（円）
     ,  b2DebugDraw = Box2D.Dynamics.b2DebugDraw // デバッグ描画


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

    // 動的衝突オブジェクト生成      
    var bodyDef = new b2BodyDef;
    bodyDef.type = b2Body.b2_dynamicBody;
    bodyDef.position.Set(4,8);
    bodyDef.userData = 'obj';

    // 材質と形状
    var fixDef = new b2FixtureDef;
    fixDef.density = 10.0;
    fixDef.friction = .9;
    fixDef.restitution = .4; 
    fixDef.shape = new b2CircleShape(1); // 円形状

    // 円
    var wheel = world.CreateBody(bodyDef);
    wheel.CreateFixture(fixDef);
    fixDef.shape.m_p.Set(0,1);
    wheel.CreateFixture(fixDef);


    // 角速度（回転速度）指定
    wheel.SetAngularVelocity(Math.PI*2);
    // 位置と角度指定 
    wheel.SetPositionAndAngle(new b2Vec2(15,-3),-20*(Math.PI/180));

    // 静的衝突オブジェクト
    var bodyDef = new b2BodyDef;
    bodyDef.type = b2Body.b2_staticBody;
    bodyDef.position.Set(10,12);

    // 材質と形状
    var fd = new b2FixtureDef;
    fd.shape = new b2PolygonShape;

    // 地面
    var holder = world.CreateBody(bodyDef);


    fd.shape.SetAsBox(10, 1);
    holder.CreateFixture(fd);
    fd.shape.SetAsOrientedBox(1, 10,new b2Vec2(5,0),Math.PI/6);
    holder.CreateFixture(fd);

    // デバッグ描画の設定      
    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 CircleShape(엔화)
・b2 PolygonShape(다각형)
・b2 EdgeShape(선분)
이러한 기본 형태를 조합하면 복잡한 충돌 대상을 만들 수 있다
모양 조합하기
Body에 대해 여러 개의 Fixture를 생성합니다.

    // 円
    var wheel = world.CreateBody(bodyDef);
    wheel.CreateFixture(fixDef);
    fixDef.shape.m_p.Set(0,1);
    wheel.CreateFixture(fixDef);

이번 키모.
m_p.Set 방법으로 중심 위치를 어긋나게 하고 Body에 두 번째 원을 등록합니다
이외의 말은 왼쪽 상각이 원점이고 오른쪽 상각은 x축의 정방향이며 하각은 y축의 정방향임을 주의하십시오
(y축 위아래 뒤집기)
또 하나의 바디에 대해서는 반등계수와 마찰력이 다른 픽처를 추가할 수 있다.

b2CircleShape.shape.m_p.Set(中心からズラすxの値、中心からズラすyの値)

다각형의 b2 PolygonShape도 정점을 정의하는 방법이 있어요.
사각형의 경우 SetasBox 함수와 Setas OrientedBox 함수를 통해 간단하게 생성할 수 있습니다.

    fd.shape.SetAsBox(10, 1);
    holder.CreateFixture(fd);
    fd.shape.SetAsOrientedBox(1, 10,new b2Vec2(5,0),Math.PI/6);
    holder.CreateFixture(fd);

Setas OrientedBox를 사용하면
사각형의 중심 위치와 방향을 이동하다

b2PolygonShape.shape.SetAsOrientedBox(幅,高さ,中心位置,回転角度)

다음부터는 충돌 대상을 서로 연결할 것이다
연결을 사용하면 충돌 대상이 더욱 복잡한 동작을 가지게 할 수 있다