簡介
大名鼎鼎的物理引擎box2d基本上大家都聽說過，網上有兩個javascript版本的box2d庫，一個時box2djs，已經停止維護，一個是box2dweb。下面就來介紹一下box2dweb的基本信息。
一 包，類介紹
BOX2D.Collision>>>碰撞，沖擊包； b2AABB AABB坐標 b2OBB OBB坐標 b2ContactID 接觸ID b2ContactPoint 接觸點 b2ManifoldPoint 繁殖點 BOX2D.Collision.Shapes>>>碰撞形狀形變包； b2CircleShape 圓外形. b2EdgeChainDef邊緣圖形. b2MassData 質量運算器. b2PolygonShape 凸多邊形. b2Shape 圖形基類. BOX2D.Common >>>通用包； b2Color 調試繪圖顏色. b2Settings 全局設置 BOX2D.Common.Math>>>通用數學包； b2Mat22 2*2 矩陣 b2Mat33 3*3 矩陣 b2Sweep 碰撞描述. b2Vec2 向量(x ,y). b2Vec3 向量(x, y z). b2XForm 坐標轉換,平移或旋轉 BOX2D.Dynamics>>>動態包； b2Body 剛體或叫物體. b2BodyDef 剛體定義. b2ContactFilter 繼承這個類用來獲取過濾碰撞 b2ContactListener 繼承這個類用來獲取碰撞結果,根據這個判斷游戲邏輯或聲音處理. 你也可以獲取碰撞在時間步后,時間步會有一個碰撞列表.然而你也有可能漏掉一些碰撞,因為在一個時間步內有多個子步.你應該盡量提高碰撞回調方法的效率,因為在每個時間步內有諸多回調. b2FilterData 碰撞過濾數據 b2DebugDraw 調試繪圖,用於調試. b2DestructionListener 關節或外形銷毀時處理方法 b2FixtureDef 材質定義類 b2Fixture材質類 b2World 物理世界 Box2D.Dynamics.Contacts>>>碰撞管理包 b2Contact 管理兩個外形接觸. b2ContactEdge 接觸邊用來連接多個物體和接觸到一個接觸表(物體是一個節點而接觸相當於一個接觸邊) b2ContactResult 記錄接觸結果 BOX2D.Dynamics.Joints>>>動態關節包； b2DistanceJoint 距離連接 b2DistanceJointDef 距離連接定義. b2GearJoint 齒輪連接. b2GearJointDef 齒輪連接定義. b2Joint 連接基類. b2JointDef 連接定義基類. b2JointEdge 用於組合剛體或連接到一起.剛體相當於節點,而連接相當於邊 b2MouseJoint 鼠標連接. b2MouseJointDef 鼠標連接定義. b2PrismaticJoint 移動連接. b2PrismaticJointDef 移動連接定義. b2PulleyJoint 滑輪連接. b2PulleyJointDef 滑輪連接定義. b2RevoluteJoint 旋轉連接. b2RevoluteJointDef 旋轉連接定義.
二 創建世界
var world = new b2World( gravity, doSleep);
上面這段代碼就創建了一個box2d的世界（Box2D.Dynamics.b2World），所有的box2d中的物體都依托於這個世界存在。下面詳細介紹:
gravity 定義了世界的重力 也是一個2d向量（Box2D.Common.Math.b2Vec2(x,y)),其中x是水平方向重力，正為右，負為左；y是垂直方向重力，正為下，負為上。
var gravity=new b2Vec2(0,300）;
doSleep 一個布爾值變量，設定了當物體停止移動時是否允許物體休眠。一個休眠中的物體不需要任何模擬。
常用的方法:
CreateBody(b2BodyDef);//*所有世界中的物體都必須由本方法創建
DestoryBody(b2Body);
ClearForces();
GetBodyList();
GetBodyCount();
GetJointCount();
GetJointList();
IsLocked();
SetDebugDraw(b2DebugDraw);
Step(dt, velocityIterations, positionIterations);
上面我們就創建了一個box2d的世界。下面讓我們來看如何向這個世界中添加物體。
三 創建物體、剛體
1 首先要創建一個物體定義
var bodydef=new b2BodyDef(); // 物體類型定義，基本上常用的有兩種定義：b2_staticBody 靜態物體; .b2_dynimacBod動態物體 bodydef.type= b2Body.b2_staticBody; //定義物體位置。也可以這樣 bodydef.position.x=10; bodydef.position.y=10; bodydef.position.Set(x,y); //定義用戶自己的數據 bodydef.userData=*;
2 其次要定義一個材質定義
var fixDef = new b2FixtureDef(); fixDef.density = 1.0; // desity 密度，如果密度為0或者null，該物體則為一個靜止對象 fixDef.friction = 0.5; //摩擦力（0~1） fixDef.restitution = 0.2;// 彈性（0~1）
3 為材質定義添加一個形狀
b2PolygonShape多邊形；b2CircleSharp圓形設置該材質形狀的大小；b2PolygonShape對應着SetAsBox(halfWidth,halfHeight)方法設置半長半寬，值//得注意的是Box2d中的單位//是米，一米是30像素，如果自定義多邊形可以使用一個SetAsArray(vertexArray,vertexCount)，其中vertexArray為頂點矢量（b2Vec2）數組，vertexCount為頂點數，最多8個。b2CircleSharp對應的設置屬性為SetRadius(radius);
fixDef.sharp=new b2PolygonShape(); fixDef.sharp.SetAsBox(100/30,20/30); fixDef.sharp=new b2CircleShape(60/30); fixDef.sharp=new b2CircleShape(); fixDef.sharp.SetRadius(100/30); fixDef.shape.SetAsArray([new b2Vec2(0,0), new b2Vec2(2,0), new b2Vec2(3,1.5), new b2Vec2(2,3), new b2Vec2(0,3), new b2Vec2(-1,1.5)],6);
4 根據物體定義，材質定義創建物體
var body=world.CreateBody(bodydef); body.CreateFixture(fixDef);
其他一些屬性
body.ApplyForce(force, point); //添加一個外力，force一個b2Vec2的向量代表外力，point一個b2Vec2的向量代表物體的着力點。
body.SetMassFromShapes();//根據形狀計算質量
四 調試
實現一個基於html5的canvas對象的2d上下文的調試實例，並利用SetDebugDraw方法將其賦予一個世界。
var debugDraw = new b2DebugDraw(); debugDraw.SetSprite(document.getElementById("canvas").getContext("2d")); debugDraw.SetDrawScale(30.0); debugDraw.SetFillAlpha(0.3); debugDraw.SetLineThickness(1.0); debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit); world.SetDebugDraw(debugDraw);
五 世界更新
一切都准備好了，我們要讓所有對象模擬運動。其實他也是通過偵聽幀頻率而不斷刷新實現的，把上面那兩個參數傳入世界對象的Step方法中即可，
同時我們需要遍歷世界中的一切對象，並對每個對象的坐標和角度進行更新。
function update() { world.Step( 1/60//幀率 ,10//速率 , 10//position iterations ); world.DrawDebugData();//繪制調試數據 world.ClearForces();//繪制完畢后清除外力 }; //循環更新和繪制世界 setInteval(update,1000 / 60);