Box2DWeb_01之SayHello

找了好久也才找到box2d，javascript版能用的，box2djs都已经2.2了而网上随处可见的却都还是传说中的骨灰级1.4，后来才知道改名了！

box2DJS已经停止更新了！

悲催····这里是最新版的box2d2.1.a 

http://code.google.com/p/box2dweb/

box2d是一个开源的物理引擎，关于更多的介绍可以去官方有手册！讲一些这个引擎都包含些什么、及怎么使用，详情请参阅http://box2d.org/

box2d是由由一个World或者多个World，当然很多情况下一个就够了!而World中包含了很多body以及body之间的joint，而每一个body又包含body的fixture，

fixture：里面包含一些body的特性如：friction （摩擦），restitution（回弹力），density（密度），形状（shape）等等牛顿世界相关的属性，通常fixture是由 body.CreateFixture(fixDef);创建的。

body ：我们通过world.CreateBody(bodyDef)创建body，而一个bodyDef也就是body的定义里面包含了这个body的坐标以及类型等信息，然后world根据bodyDef创建相应的body

另外bodyDef或者fixtrueDef是可以复用的！我们每一次CreateBody是把bodyDef复制一份然后创建并不是引用！所以当我们创建之后修改bodyDef并创建另外一个并不会影响之前创建的body！

world：相当于一个大容器，所有由他创建的body都拥有物理世界的特性！world负责协调各个body、以及joint之间的关系！或者说这就是引擎的内核！

joint：是连接各个body之间的关节！也就是力矩！ 他自己拥有motor马达！可以自己产生原动力！做功！并且对其他body之间产生影响！

http://box2d-js.sourceforge.net/index2.html 这些事例都可以很好的说明！他们彼此之间的关系！

shape ：body的形状，以完成碰撞计算！及交互！还有debugDraw也默认为我们提供了简单的shape

Collision：关于碰撞检测box2d已经封装的相当好了我们只需要注册监听！处理碰撞！

更多的属性信息可以去看APIhttp://www.box2dflash.org/docs/2.1a/reference/

那接下来SayHello吧...........

第一步当然是创建world ，只需要设置重力和在body没有交互或者任何外力作用的时候是否doSleep

 

var gravity = new b2Vec2(0, 9.8);

var doSleep = true;

world = new b2World(gravity, doSleep);

 

简单吧！顺便提一下之所以我比较烦那之前的版本是因为他要我们自己设置一个b2AABB范围，而这个问题早艾琳考特（box2d的作者）解决了！So........不浪费无谓的感情！

有了World我们就可以创建body，创建Joint、创建Shape、创建Fixture、想想世界就很美好！

那我们就创建一个球吧！哎！不知道为什么！好像所有的例子都是以球开始的悲催..！

还记得我们body怎么创建吗world.CreateBody(bodyDef)！没错就是他！他要求的参数是·····def！So.........

 var bodyDef = new b2BodyDef;

bodyDef.type = b2Body.b2_dynamicBody;//是静态还是动态！当然是会动的爽了！

bodyDef.position.Set(canvaswidth/PIXELS_TO_METRE/2,canvasheight/PIXELS_TO_METRE/2);

var body = world.CreateBody(bodyDef)

 这就有body但是没有fixture，也就是没有他要遵守哪些牛顿定律要遵守到什么程度，都没有！So.............

var fixDef = new b2FixtureDef;
fixDef.density = .5;
fixDef.friction = 0.4;
fixDef.restitution = 0.8;
fixDef.shape = new b2CircleShape(10/drawScale);

我们有了fixture并且为其定义了一个shape，圆！

drawScale是缩放比例，是做什么用的呢！ 

因为box2d的世界时以真实的世界为基础的所以使用的单位是米而已米等于多少像素呢！使我们定的我们定多少就是多少！而box2d会按照这个比例对box2d世界的物体进行缩放，

我们定义为30。 我们在debugDraw里面进行设置！

box2d问我们提供了一个开发的draw，可以让我们看见我们定义的刚体以及joint！ 

下面就给他一个定义一个draw让他draw吧！

 var debug = new b2DebugDraw();

debug.SetSprite(document.getElementById("stage").getContext("2d"));

debug.SetLineThickness(1);

debug.SetFillAlpha(0.5);

debug.SetAlpha(1);

debug.SetDrawScale(PIXELS_TO_METRE);

debug.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);

world.SetDebugDraw(debug);

然后我们设置一个刷新频率及单步频率

setInterval(update, (1000 / 60));

function update() {

    var timeStep = 1 / 30;

    var velocityInterations = 10;

    var positionIterations = 10;



    world.Step(timeStep, velocityInterations, positionIterations);

    // 在2.1版本清除力，以提高效率

    world.ClearForces();

    // 绘制

    world.DrawDebugData();



};

 

 

 现在呢是可以运行了但是很快小球收到重力的影响会跌入深渊！

加个地面吧

var fixDef = new b2FixtureDef;

fixDef.density = .5;

fixDef.friction = 0.4;

fixDef.restitution = 0.8;

var bodyDef = new b2BodyDef;

bodyDef.type = b2Body.b2_staticBody;

fixDef.shape = new b2PolygonShape;

fixDef.shape.SetAsBox(canvaswidth/drawSclae/ 2, 5/drawSclae);

bodyDef.position.Set(canvaswidth/drawSclae/ 2,(canvasheight-5)/drawSclae);

world.CreateBody(bodyDef).CreateFixture(fixDef);

 

Your browser does not support the canvas element.

下面是全部代码

 window.onload = init;

var world,context;

const

drawSclae = 30;

const

canvaswidth = 500;

const

canvasheight = 500;





function init() {

    //create World

    createWorld();



    // create ground

    createGround();



    //createBall

    createBall();

    

    // The refresh rate of the display. Change the number to make it go faster

    setInterval(update, (1000 / 60));

};



function createWorld(){

    // Define the world

    var gravity = new b2Vec2(0, 9.8);

    var doSleep = true;

    world = new b2World(gravity, doSleep);

    

    

    var debug = new b2DebugDraw();

    debug.SetSprite(document.getElementById("stage").getContext("2d"));

    debug.SetLineThickness(1);

    debug.SetFillAlpha(0.5);

    debug.SetAlpha(1);

    debug.SetDrawScale(drawSclae);

    debug.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);

    world.SetDebugDraw(debug);

};



function createGround(){

    var fixDef = new b2FixtureDef;

    fixDef.density = .5;

    fixDef.friction = 0.4;

    fixDef.restitution = 0.8;

    var bodyDef = new b2BodyDef;

    bodyDef.type = b2Body.b2_staticBody;

    fixDef.shape = new b2PolygonShape;

    fixDef.shape.SetAsBox(canvaswidth/drawSclae/ 2, 5/drawSclae);

    bodyDef.position.Set(canvaswidth/drawSclae/ 2,(canvasheight-5)/drawSclae);

    world.CreateBody(bodyDef).CreateFixture(fixDef);

};



function createBall(){

    var fixDef = new b2FixtureDef;

    fixDef.density = .5;

    fixDef.friction = 0.4;

    fixDef.restitution = 0.8;

    var bodyDef = new b2BodyDef;

    bodyDef.type = b2Body.b2_dynamicBody;//是静态还是动态！当然是会动的爽了！

    bodyDef.position.Set(canvaswidth/drawSclae/2,canvasheight/drawSclae/2);

    fixDef.shape = new b2CircleShape(10/drawSclae);

    world.CreateBody(bodyDef).CreateFixture(fixDef);

};



function update() {

    var timeStep = 1 / 30;

    var velocityInterations = 10;

    var positionIterations = 10;



    world.Step(timeStep, velocityInterations, positionIterations);

    // 在2.1版本清除力，以提高效率

    world.ClearForces();

    // 绘制

    world.DrawDebugData();

};