게임 개발 11

이번에는
box2dweb 사용
① 물리적 세계의 제작
② 동적 충돌 객체 만들기
③ 정적 충돌 객체 만들기
④ 드로잉 디버깅
나는 단숨에 하고 싶다.
이번 캡처.
공이 땅에 떨어져 구르다

모든 소스 코드.
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 = .2; // はね返り係数
    fixDef.shape = new b2CircleShape(1); // 円形状

    // 円作成
    var wheel = world.CreateBody(bodyDef);
    wheel.CreateFixture(fixDef);

    // 角速度（回転速度）指定
    wheel.SetAngularVelocity(Math.PI*2);
    // 位置と角度指定 
    wheel.SetPositionAndAngle(new b2Vec2(2,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;
    fd.shape.SetAsBox(10,1); // 箱型形状

    // 地面作成
    var holder = world.CreateBody(bodyDef);
    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>

다음은 해설.
우선, Box2D의 개체는 매우 긴 것 같습니다.
우선 약칭 이름을 변수로 가져옵니다.

    // 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 // デバッグ描画

충돌 객체 작성하기
Body 및 Fixture가 필요합니다.
Body는 충돌 대상이 물리 세계에서 하는 동작을 결정한다.
Fixture는 재료와 모양을 결정합니다.
동적 신체는 물리 세계에서 충돌 판정이 있는 이동 대상이다

 bodyDef.type = b2Body.b2_dynamicBody;

정적 신체는 물리 세계에서 충돌 판정이 있는 이동할 수 없는 대상이다

 bodyDef.type = b2Body.b2_staticBody;

Body와 Fixture가 완료되면 물리적 세계에서 원과 지면이 생성됩니다.

    // 円作成
    var wheel = world.CreateBody(bodyDef);
    wheel.CreateFixture(fixDef);

    ...

    // 地面作成
    var holder = world.CreateBody(bodyDef);
    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);

준비가 다 된 후 정기적으로 다음 처리를 호출하십시오
물리적 세계에서의 처리 진행

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

• 반탄 계수
마찰력
각속도
매개 변수를 하나씩 해보면 될 것 같아요.
다음에는 모양이 복잡한 충돌 대상을 만들어야 돼요.