大名鼎鼎的物理引擎box2d基本上你们都据说过,网上有两个javascript版本的box2d库,一个时box2djs,已经中止维护,一个是box2dweb。下面就来介绍一下box2dweb的基本信息。javascript
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 旋转链接定义.
html
var world = new b2World( gravity, doSleep);
上面这段代码就建立了一个box2d的世界(Box2D.Dynamics.b2World),全部的box2d中的物体都依托于这个世界存在。下面详细介绍:
gravity 定义了世界的重力 也是一个2d向量(Box2D.Common.Math.b2Vec2(x,y)),其中x是水平方向重力,正为右,负为左;y是垂直方向重力,正为下,负为上。html5
var gravity=new b2Vec2(0,300);
doSleep 一个布尔值变量,设定了当物体中止移动时是否容许物体休眠。一个休眠中的物体不须要任何模拟。
经常使用的方法:
CreateBody(b2BodyDef);//*全部世界中的物体都必须由本方法建立
DestoryBody(b2Body);
ClearForces();
GetBodyList();
GetBodyCount();
GetJointCount();
GetJointList();
IsLocked();
SetDebugDraw(b2DebugDraw);
Step(dt, velocityIterations, positionIterations);
上面咱们就建立了一个box2d的世界。下面让咱们来看如何向这个世界中添加物体。
java
1 首先要建立一个物体定义web
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 其次要定义一个材质定义canvas
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 根据物体定义,材质定义建立物体spa
var body=world.CreateBody(bodydef); body.CreateFixture(fixDef);
其余一些属性
body.ApplyForce(force, point); //添加一个外力,force一个b2Vec2的向量表明外力,point一个b2Vec2的向量表明物体的着力点。
body.SetMassFromShapes();//根据形状计算质量
debug
实现一个基于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);